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

第一步：In AnQiCMS backend, upload and configure your Logo

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.In the global settings page, you will see a configuration item named "Website Logo".Click the upload button next to the option, you can choose a local Logo image to upload, or select one from the uploaded image library as the website's Logo.Make sure the Logo image you upload is clear and of moderate size to ensure an effective display on the front page.Upload and select an image, the system will automatically save your settings.

第二步：In the front-end template, call and display the Logo image

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 (for example,/template/您的模板名称/) underbash.htmlIn the public template files or similar. Open these files, and you can start adding the display code for the Logo.

AnQiCMS provides very convenient template tags to call the information set in the background. For the website logo, we can use{% system %}Label. This label is used to retrieve the various system information you have 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 take 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 filled in the "Global Settings" in the backgroundsiteNamea variable.
  • {% system baseUrl with name="BaseUrl" %}This line of code retrieves the root address of the website (usually your domain) and assigns it tobaseUrla variable.
  • {% if logoPath %}This is a conditional judgment, which checkslogoPathDoes 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>English for: To enhance user experience, we usually wrap the Logo image in a tag, and<a>English for: andhrefProperty set to the website's home page address. When users click on the logo, they can quickly return to the home page.{{ 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.
    • srcProperties:{{ logoPath }}It will dynamically display the Logo image URL you upload on the backend.
    • altProperties:altThe attribute provides text descriptions for images, which is very important for search engine optimization (SEO) and accessibility (such as for visually impaired users using screen readers).{{ siteName }}The name of your website will be dynamically displayed, used as the description of the Logo, this is the recommended **practice**.
  • {% else %} ... {% endif %}IflogoPathNo value (i.e., you did not upload a Logo image on the backend), this code will be used as a backup option, displaying a wrapper in<h1>The website name in the label, which is also linked to the homepage. This can avoid blank placeholders appearing on the page when the Logo is missing, enhancing the user experience.

Place this code at the location in your template where you want the Logo to be displayed, for example<body>Tags within<header>Area. After saving the changes, refresh your website's front-end page, and you will see your Logo image.

Optimization and **Practice

  • CSS Style AdjustmentLogo image display after, 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 CSS file of the template (usually in/public/static/您的模板名称/css/Add style rules, such as for the logo image location<img>Label addclassorid, then fine-tune through CSS.
  • Image Optimization：AnQiCMS in the "Content Settings" provides features such as automatic image compression, WebP format conversion, etc. Enabling these features can help your Logo image load faster