How to display a custom website logo and copyright information on the front end?

The website's logo and copyright information, like a business card, is an important manifestation of brand recognition and professionalism.They not only enhance users' trust in the website, but also provide a direct display of the brand image and legal rights.In AnQiCMS, display these core brand elements, the process is simple and clear, allowing you to easily customize a unique image for your website.

Backend settings: the origin of brand image

To display custom LOGO and copyright information on the front end of your AnQiCMS website, you first need to enter this content into the system backend.

Please enter the AnQiCMS backend management interface, find and click on the menu bar on the left,Backend settingsthen select theGlobal feature settingsThis page collects the basic configurations of the website, including the LOGO and copyright information we need.

In the middle of the page, you will see a name calledWebsite LOGOThe option.Click the upload button next to it, select the website logo image file you have designed for uploading.It is recommended to choose image formats such as PNG or SVG that support transparent backgrounds to ensure that the logo can perfectly integrate into the website design.After the image is uploaded, the system will automatically save its path.

Right away, at the bottom of the same page, you will find thatCopyright informationThe setting item.Here, you can enter the copyright statement of the website, for example “u0026copy; 2023 Your company name.”}]All Rights Reserved.Please note that this field is a text input box. If you wish to include links or other HTML tags in the copyright information, you can enter them directly here.

After completing the logo upload and copyright information entry, don't forget to click the button at the bottom of the pageSaveButton, let these changes take effect in the system background.

Template call: let the brand shine in the front end.

After setting up the brand information on the back-end, the next step is to display them on the website front-end.AnQiCMS uses a syntax similar to the Django template engine, obtaining data from the background configuration dynamically through specific tags.

The system is built with a powerful function.systemLabel, used specifically to obtain various system configuration information from the background. We can use it to call the website logo and copyright information that was just set.

Display website logo

The website logo is usually placed in the header section of the website. In your template file (for exampleheader.htmlorbase.html), you can call the website logo image like this:

<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />

here,{% system with name="SiteLogo" %}The URL of the LOGO image you uploaded on the back end will be directly output. At the same time, in order to better comply with SEO standards and improve website accessibility, we recommend adding to the LOGO imagealtProperty.{% system with name="SiteName" %}The website name filled in the background "Global Function Settings" will be dynamically retrieved and used as the alternative text for the image, allowing search engines and visually impaired users to understand the content of the image.

If you prefer to use variables to organize template code, you can also assign them to variables first and then use them:

{% system siteLogoPath with name="SiteLogo" %}
{% system siteTitle with name="SiteName" %}
<img src="{{ siteLogoPath }}" alt="{{ siteTitle }}" />

This can make your template code look neater, especially when you need to refer to this information multiple times in different places.

Display copyright information

Copyright information is usually located at the bottom (footer) area of the website. In your template file (such asfooter.htmlorbase.html), you can call the copyright content set in the background like this:

<p>{% system with name="SiteCopyright" %}</p>

If your copyright information contains HTML tags, such as links or other formatted text, to ensure that these HTML tags are properly parsed and displayed by the browser, you need to add them when outputting|safea filter. For example:

<p>{% system siteCopyrightText with name="SiteCopyright" %}{{ siteCopyrightText|safe }}</p>

|safeThe filter tells the template engine that this content is safe, does not require HTML entity encoding, and can be output directly as HTML code.

Tips and注意事项

1. Logo image optimization: To ensure the website loads quickly and provides a good user experience, the LOGO image uploaded should be appropriately compressed and optimized to maintain moderate file size.At the same time, considering the display effects of different devices, it is best to prepare a high-resolution logo.
2. Year in copyright informationDue to the need for the copyright year to be updated annually, if you want the year to display automatically, this usually requires your template designer to add a dynamic tag for retrieving the current year in the 'copyright information' field template (for example, using Go language'stime.Now().Format("2006")Or similar logic), or you need to manually enter the background every year to update this field. AnQiCMSSiteCopyrightThe field itself is a text field and does not automatically handle the year
3. Clear cacheAfter you complete the background settings and template modifications, if the latest LOGO or copyright information is not immediately displayed on the website front end, it is likely due to system cache. You can click on the bottom of the left menu bar in the background.Update CacheOr find it in the quick operation on the home page of the backgroundUpdate Cachebutton, manually clear the system cache, and then refresh the page to see the changes.

By following these simple steps, you can easily display a customized website logo and copyright information on the frontend of the AnQiCMS website, effectively establishing and maintaining your brand image, making your website more professional and distinctive.

Frequently Asked Questions (FAQ)

Q1: Why didn't the front end display the LOGO image I uploaded?A1: If the logo is not displayed on the front end, first check if you have clicked the 'Save' button in the background 'Global Function Settings'.Second, it may be due to browser cache or AnQiCMS system cache, please try to clear your browser cache and AnQiCMS backend system cache (click the "Update Cache" button), then refresh the page.{% system with name="SiteLogo" %}Tag to call the LOGO.

Q2: Why does the front-end display the raw HTML code (such as links) instead of the rendered effect when I enter it in the copyright information?A2: The AnQiCMS template engine, for security reasons, defaults to escaping all output content to prevent XSS attacks. If you enter HTML code in the "Copyright Information" and want it to be parsed and displayed by the browser, you need to add it when calling the template|safeFilter, for example{{ siteCopyrightText|safe }}This filter will inform the template engine that this content is safe and does not need to be escaped.

Q3: Can I set a different LOGO for the mobile site?A3:SiteLogoIs a global setting, usually a logo shared between PC and mobile terminals.If you really need to set a different logo for the mobile site, you can add a new parameter named 'MobileLogo' through the 'Custom Setting Parameters' feature on the 'Global Function Settings' page of the AnQiCMS backend, and then upload the image URL of the logo specifically for the mobile site.Continue, in your mobile template, based on the device type judgment (usually the logic built into the template or through CSS media queries to hide/display