跳轉至

設定頁首(Header)

頁首除了搜尋列與程式庫連結(見 程式庫連結),還可以設定自動隱藏公告列

自動隱藏

啟用後,讀者往下捲動超過一定距離,頁首就會自動隱藏,留給內容更多空間:

[project.theme]
features = [
  "header.autohide",
]

公告列(Announcement bar)

公告列是顯示專案消息或重要訊息的好地方。讀者往下捲動超過頁首時,公告列會自動消失。

公告列預設是空的,需要覆寫主題模板announce 區塊。在 overrides/main.html 加入:

overrides/main.html
{% extends "base.html" %}

{% block announce %}
  🎉 Zensical 教學網站全新改版!
  <a href="zensical_basics/">立即開始</a>
{% endblock %}

區塊內可以放任意 HTML,包含連結與圖示。

與現有的 overrides/main.html 合併

如果你已經有 main.html(例如放了 extrahead),把新的 announce 區塊加進同一個檔案即可,同一個檔案可以覆寫多個區塊。

讓讀者可以關閉公告

暫時性的公告可以加上「已讀」按鈕:

[project.theme]
features = [
  "announce.dismiss",
]

讀者按下按鈕後,該公告就不會再顯示,直到公告內容改變為止。

總結

功能 設定
自動隱藏頁首 header.autohide
公告列 覆寫 announce 區塊
可關閉的公告 announce.dismiss

參考資料