D18 - 加上 CSS Style - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 18

Python

使用 Django 框架和 Wagtail，快速打造一個 CMS 網站系列第 18 篇

D18 - 加上 CSS Style

16th鐵人賽

Marvin

2024-09-30 08:42:17

21 瀏覽

分享至

加 style

To style your site, navigate to your mysite/static/css/mysite.css file and add the following:

*,
::before,
::after {
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif, Apple Color Emoji, "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

body {
  min-height: 100vh;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px;
  display: grid;
  gap: 3vw;
  grid-template-rows: min-content 1fr min-content;
}

a {
  color: currentColor;
}

footer {
  border-top: 2px dotted;
  text-align: center;
}

header {
  border-bottom: 2px dotted;
}

.template-homepage main {
  text-align: center;
}

增加 base.html

Start by modifying your mysite/templates/base.html file as follows:

{# Remove wagtailuserbar: #}
{% load static wagtailcore_tags %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>
            {% block title %}
            {% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}
            {% endblock %}
            {% block title_suffix %}
            {% wagtail_site as current_site %}
            {% if current_site and current_site.site_name %}- {{ current_site.site_name }}{% endif %}
            {% endblock %}
        </title>
        {% if page.search_description %}
        <meta name="description" content="{{ page.search_description }}" />
        {% endif %}
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        {# Force all links in the live preview panel to be opened in a new tab #}
        {% if request.in_preview_panel %}
        <base target="_blank">
        {% endif %}

        {# Add supported color schemes: #}
        <meta name="color-scheme" content="light dark">

        {# Add a favicon with inline SVG: #}
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍩</text></svg>"/>

        {# Global stylesheets #}
        <link rel="stylesheet" type="text/css" href="{% static 'css/mysite.css' %}">

        {% block extra_css %}
        {# Override this in templates to add extra stylesheets #}
        {% endblock %}
    </head>

    <body class="{% block body_class %}{% endblock %}">
        {# Remove  wagtailuserbar: #}

        {% include "includes/header.html" %}

        {# Wrap your block content  within a <main> HTML5 tag: #}
        <main>
            {% block content %}{% endblock %}
        </main>

        {% include "includes/footer.html" %}

        {# Global javascript #}

        <script type="text/javascript" src="{% static 'js/mysite.js' %}"></script>

        {% block extra_js %}
        {# Override this in templates to add extra javascript #}
        {% endblock %}
    </body>
</html>

在前面的模板中，你進行了以下修改：

你從基礎模板中移除了 wagtailuserbar。你將在本教程後面的部分將 wagtailuserbar 添加到你的頭部模板中。這一改變改善了鍵盤和屏幕閱讀器用戶的使用體驗。
你添加了 <meta name="color-scheme" content="light dark"> 以通知瀏覽器你的網站支持的顏色方案。這使你的網站能適應深色和淺色主題。
你使用了 <link> 標籤通過內聯 SVG 添加了一個 favicon 到你的作品集網站。
你用 <main> HTML5 標籤包裹了 {% block content %} 和 {% endblock %} 標籤。<main> 標籤是一個語義 HTML5 標籤，用來指示網頁的主要內容。

此外，你應該動態獲取你的 HomePage 的標題來在你的網站菜單中使用，而不是在你的模板中硬編碼它。你應該包括首頁的子頁面在你的網站菜單中，如果它們的「在菜單中顯示」選項被勾選。最後，你要確保將你從基礎模板中移除的 wagtailuserbar 添加到你的頭部模板中。這將改善鍵盤和屏幕閱讀器用戶的體驗。

要進行前一段提到的改進，請按照以下方式修改你的 mysite/templates/includes/header.html 文件：

{# Load wagtailuserbar: #}
{% load wagtailcore_tags navigation_tags wagtailuserbar %}

<header>
    {% get_site_root as site_root %}
    <nav>
        <p>
          <a href="{% pageurl site_root %}">{{ site_root.title }}</a> |
          {% for menuitem in site_root.get_children.live.in_menu %}

            {# Add the child pages of your HomePage that have their `Show in menu` checked #}
            <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>{% if not forloop.last %} | {% endif %}

          {% endfor %}
        </p>
    </nav>

    {# Add wagtailuserbar: #}
    {% wagtailuserbar "top-right" %}
</header>

你還可以通過添加一個跳過連結來改善鍵盤用戶的使用體驗。跳過連結是一種網頁無障礙功能，能夠增強鍵盤導航者和屏幕閱讀器用戶的瀏覽體驗。跳過連結將讓你的用戶可以直接跳轉到主要內容。

要添加跳過連結，請將以下樣式添加到你的 mysite/static/css/mysite.css 文件中：

.skip-link {
  position: absolute;
  top: -30px;
}

.skip-link:focus-visible {
  top: 5px;
}

更改 styles 後，將 main 加上 unique id ，如下: mysite/templates/base.html

{% include "includes/header.html" %}

{# Add a unique identifier: #}
<main id="main">
  {% block content %}{% endblock %}
</main>

Finally, go to your mysite/templates/includes/header.html file and modify it as follows:

然後，修改 header.html

{% load wagtailcore_tags navigation_tags wagtailuserbar %}
<header>
  {# Add this: #}
  <a href="#main" class="skip-link">Skip to content</a>

  {% get_site_root as site_root %}
  <nav>
    <p>
      <a href="{% pageurl site_root %}">{{ site_root.title }}</a> |
      {% for menuitem in site_root.get_children.live.in_menu %}
        <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a>{% if not forloop.last %} | {% endif %}
      {% endfor %}
    </p>
  </nav>
  {% wagtailuserbar "top-right" %}
</header>

外觀