How to display the website's logo image on the front page?

The website logo is the core of the brand image, it not only enhances the professionalism of the website, but also deepens the users' understanding of the brand.In AnQiCMS, displaying your logo image on the front page is a straightforward and flexible process, mainly involving backend settings and template code adjustments.

Step 1: Upload and configure your Logo on the AnQiCMS backend

In AnQiCMS, managing the website's logo image is very convenient. First, you need to upload the logo image to the system's backend.

After entering the background management interface, find the "Background Settings" in the left navigation bar, and click to enter the "Global Settings" option.On the global settings page, you will see a configuration item named "Website Logo".Click the upload button next to this option, you can select a local Logo image to upload, or choose one from the uploaded image library as the website's Logo.Make sure the logo image you upload is clear and moderately sized to ensure the best display effect on the front page.After uploading and selecting an image, the system will automatically save your settings.

Step 2: Call and display the Logo image in the front-end template

Next, we need to add the corresponding code to the front-end template file of the website so that the logo image you upload can be displayed.

The website's logo is usually placed at the top (Header) or bottom (Footer) of the page in common areas, these parts are usually located in your template folder in the AnQiCMS template system, for example/template/您的模板名称/) underbash.htmlOr similar public template files. Open these files, and you can start adding the Logo display code.

AnQiCMS provides a very convenient template tag to call the information set in the background. For the website logo, we can use{% system %}The tag is used to retrieve various system information configured in the background "Global Settings".

The following is a basic code snippet for displaying the logo image.

{% system logoPath with name="SiteLogo" %}
{% system siteName with name="SiteName" %}
{% system baseUrl with name="BaseUrl" %}

{% if logoPath %}
    <a href="{{ baseUrl }}">
        <img src="{{ logoPath }}" alt="{{ siteName }}" />
    </a>
{% else %}
    <a href="{{ baseUrl }}">
        <h1>{{ siteName }}</h1>
    </a>
{% endif %}

Let's go into a detailed explanation of this code:

• {% system logoPath with name="SiteLogo" %}This line of code assigns the path of the Logo image you uploaded in the background "Global Settings" to a variable namedlogoPath.
• {% system siteName with name="SiteName" %}Similarly, this line of code assigns the website name you entered in the background "Global Settings" tositeNameVariable.
• {% system baseUrl with name="BaseUrl" %}This line of code retrieves the root address of the website (usually your domain) and assigns it tobaseUrlVariable.
• {% if logoPath %}This is a conditional judgment, it will checklogoPathDoes the variable have a value. If the logo has been uploaded to the background,logoPathit will include the image URL, the condition is met.
• <a href="{{ baseUrl }}"> ... </a>In order to enhance the user experience, we usually wrap the Logo image in a<a>tag and move ithrefThe attribute is set to the website's homepage address. This way, when the user clicks on the Logo, they can quickly return to the homepage.{{ baseUrl }}It will dynamically display the address of your website.
• <img src="{{ logoPath }}" alt="{{ siteName }}" />This is the core part of displaying the Logo image.
  • srcattribute:{{ logoPath }}It will dynamically display the Logo image URL you uploaded on the backend.
  • altattribute:altThe attribute provides text descriptions for images, which is very important for search engine optimization (SEO) and accessibility (such as screen reader use for visually impaired users).{{ siteName }}Dynamically displays the name of your website, as the description of the logo, this is recommended practice.
• {% else %} ... {% endif %}If:logoPathThere is no value (i.e., you have not uploaded a Logo image on the backend), this code will act as a backup and display a wrapped in<h1>The website name in the tag, which is also linked to the homepage. This can prevent the appearance of a blank placeholder when the logo is missing, improving user experience.

Place this code in the location of your template where you want to display the Logo, for example<body>within the label<header>area. After saving the changes, refresh your website's frontend page, and you will see your Logo image.

optimize and **practice

• CSS style adjustment: After the logo image is displayed, you may need to adjust its size, position, or margin through CSS to keep it consistent with your website design style. You can do this in the template's CSS file (usually in/public/static/您的模板名称/css/Add style rules, such as for the logo image location<img>tagsclassoridThen fine-tune the control through CSS.
• Image optimization: AnQiCMS provides features such as automatic image compression and WebP format conversion in the 'Content Settings'. Enabling these features can help your logo image load faster.