How to make the home page Banner image open the link in a new window?

As an experienced website operation expert, I am more than happy to give you a detailed explanation of how to implement the function of opening a link in a new window after clicking the home page Banner image in the Anqi CMS.This concerns user experience not only, but also involves the website's SEO performance and security.

How to make the home page Banner image open the link in a new window after clicking, to enhance user experience and website security

In website operation, the homepage Banner serves as an important visual element and traffic entrance, carrying the key role of attracting users, conveying information, and guiding behavior.When the user clicks on the Banner image, we usually want it to open a link in a new window or a new tab, so that the user can browse new content while keeping the current page open, maintaining the user's stickiness to the main site.This is not only a detail that improves user experience, but also an important aspect for enhancing the professionalism of the website and potential conversion rate.

AutoCMS (AutoCMS) relies on its flexible template engine and powerful content management capabilities, making it relatively simple and intuitive to meet this requirement.Below, I will combine the features of the Anqi CMS and explain the operation steps and technical considerations in detail.

Understanding the Banner mechanism of Anqi CMS

In the Auto CMS, the homepage banner is usually managed as a special content type.Based on the document content we are familiar with, the Banner image and its corresponding link information are dynamically called from the backend using template tags.bannerListLabels are used to obtain the Banner list data.This means that we need to modify not the backend data itself, but the code that renders these banners in the frontend template.

Banner的相关数据通常包含ID、图片地址（Logo）、Link Address（Link), description (Description）以及Alt文本（Alt）et al. These data are traversed by loops in the template to generate corresponding HTML structures, with the core being to wrap the image in a tag and point to<a>标签内，并指向item.Link.

Core operation: Locate and modify the template file

To make the Banner link open in a new window, we need to render the Banner at<a>Add an HTML attribute in the tag:target="_blank". In order to ensure website security and SEO optimization, we also recommend adding:rel="noopener noreferrer".

The specific operation steps are as follows:

第一步：确定Banner所在的模板文件

首页Banner通常位于网站的首页模板文件中，最常见的是在当前使用模板目录下的index/index.html，or is one that has beenindex.htmlintroduced as a common code snippet (such as)partial/banner.htmlor a similar naming).

You can locate the file by the following methods:

Guess according to the file naming habit:Most security CMS templates follow certain naming conventions, the home page is usuallyindex.html.
Checkindex.htmlofincludeTags:Ifindex.htmlcontains other files to render the Banner, you will see something like{% include "partial/header.html" %}or{% include "partial/banner.html" %}code.
Use browser developer tools:On the website's front page, right-click on the Banner image, select "Inspect Element", and you can view the HTML structure of the Banner. Tracing up the parent elements usually leads to the element that contains<a>The overall structure of the label and image elements, and infer the corresponding template file location.

After finding the file, you can edit it online through the "Template Design" feature of the Safe CMS backend, or edit it directly through FTP/SSH.

第二步：Find the Banner's Loop Rendering Area

In the template file located, you will find a region for looping output of Banner list. According totag-/anqiapi-other/3498.htmlThe description of the document, which is usually in the following form of code:

{% bannerList banners %}
    {% for item in banners %}
    {# 这里是渲染单个Banner的地方 #}
    {% endfor %}
{% endbannerList %}

In{% for item in banners %}and{% endfor %}Between them, you will see<a>tags wrapping<img>tag for each language site,hrefthe attribute points to{{item.Link}}.

For example, the original code may look like this:

{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}">
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

Step 3: Add`target="_blank"`Property

This step is the core of opening a new window link. You need to<a>tag.target="_blank"properties.

The modified code snippet is as follows:

{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank"> {# <-- 在这里添加 target="_blank" #}
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

Step 4: Consider security and compatibility: Add`rel="noopener noreferrer"`

Just addtarget="_blank"It may bring some potential security risks known aswindow.openervulnerabilities. Malicious websites canwindow.openerProperty access and modification open its original page (i.e., your website). To avoid this risk and enhance website security, it is strongly recommended to add it simultaneously.rel="noopener noreferrer"properties.

noopener：Prevent newly opened pages from accessingwindow.openerproperties.
noreferrer：Prevent the browser from sending Referer Header, improve user privacy, and is alsonoopenera supplement to.

Add these two properties to<a>Modify the code snippet as follows:

{% bannerList banners %}
    {% for item in banners %}
    <a href="{{item.Link}}" target="_blank" rel="noopener noreferrer"> {# <-- 添加 target="_blank" 和 rel="noopener noreferrer" #}
        <img src="{{item.Logo}}" alt="{{item.Alt}}" />
        <h5>{{item.Title}}</h5>
    </a>
    {% endfor %}
{% endbannerList %}

Step 5: Save the changes and update the cache

Complete the modification of the template file and save it definitely.Then, please log in to the Anqi CMS backend, find the "Update Cache" feature in the left menu, and click to execute to clear the system cache.This step is very critical because the security CMS caches template files for performance considerations. If the cache is not cleared, your modifications may not take effect immediately on the front end.

Not only the home page Banner: a comprehensive application

This method is not only applicable to the homepage Banner. In the Anqi CMS, many content types, such as article category pages (help-content-category.mdwith a Banner image), single pages (help-source-page.md提及有Banner图）等，都可能包含可点击的图片元素。只要您发现这些元素最终渲染为<a>Labels, and hope they open in a new window, can all use the same principle, add to the corresponding template filetarget="_blank" rel="noopener noreferrer"properties.

In summary, by making simple yet crucial modifications to the code that renders the Banner in the Anqi CMS template, you can easily achieve the function of opening the link in a new window after clicking the Banner. This not only optimizes the user experience and prevents user loss, but also, more importantly, by addingrel="noopener noreferrer"Properties, enhanced website security, ensuring your site operates more stably.

Common Questions (FAQ)

Q1：I modified the template file according to the steps and cleared the cache, but the Banner link on the front page still opens in the original window. Why is that?

A1:This may be due to the following reasons:

The location file is inaccurate:The file you modified may not be the template file that actually renders the current Banner. Please check carefully.index.htmlDoes it have?includeOther files, or use the browser developer tools to reconfirm the template file corresponding to the HTML structure.
Cache not completely cleared:Even though you clicked 'Update Cache', sometimes the browser itself may have a cache.Attempt to force refresh the browser (Ctrl+F5 or Cmd+Shift+R), or try clearing the browser cache and then try again.In extreme cases, if the server uses multi-level caching (such as CDN caching), it is also necessary to clear the CDN cache.
Code spelling error:Checktarget="_blank"andrel="noopener noreferrer"Property has any spelling or grammar errors, even subtle differences may cause the property to not work.

Q2: All external links need to be added.target="_blank"andrel="noopener noreferrer"Do this have an impact on SEO?

A2：It is usually recommended to set links pointing to external sites astarget="_blank"to avoid users leaving your website. At the same time, addrel="noopener noreferrer"It is for safety.For SEO, search engines like Google tend to prefer that users stay on your website, but reasonably opening external links in a new window will not have a negative impact on SEO, but may indirectly improve user experience.nofollowProperty (if necessary), but this is an independent operation when opening in a new window.

Q3: How can I operate if my Banner is not only an image but also includes a title or a description?

A3:No matter what elements are contained within the Banner

How can I make the homepage banner image open a link in a new window after being clicked?