mkdocs-material页脚配置：版权信息、社交链接、备案号-优快云博客

mkdocs-material页脚配置：版权信息、社交链接、备案号

【免费下载链接】mkdocs-material squidfunk/mkdocs-material: MkDocs Material是MkDocs（一个轻量级的Markdown文档生成器）的一款主题，该主题基于Material Design原则构建，旨在提供美观、响应式且易于导航的文档网站样式。项目地址: https://gitcode.com/GitHub_Trending/mk/mkdocs-material

在构建文档网站时，页脚往往是容易被忽略但至关重要的部分。它不仅是展示版权信息的必要区域，还是引导用户访问社交平台、展示备案信息的重要载体。本文将详细介绍如何在mkdocs-material中配置页脚的各项元素，让你的文档网站既专业又合规。

页脚基础配置

启用页脚导航

mkdocs-material默认情况下可能不会显示包含上一页/下一页链接的页脚导航。要启用这一功能，需要在mkdocs.yml中添加以下配置：

theme:
  features:
    - navigation.footer

配置完成后，页脚将显示指向上一页和下一页的导航链接，方便用户在文档间切换。如果你想在某个特定页面隐藏这些导航链接，可以在该页面的Front Matter中添加：

---
hide:
  - footer
---

相关配置文档：docs/setup/setting-up-the-footer.md

版权信息设置

版权信息是页脚的核心元素之一，通过mkdocs.yml中的copyright字段可以轻松设置：

copyright: Copyright &copy; 2023 你的名称或公司名称

版权信息的渲染逻辑定义在模板文件src/templates/partials/copyright.html中，感兴趣的读者可以查看源码了解更多细节。

社交链接配置

添加社交链接

mkdocs-material允许你在页脚添加各种社交平台的链接，配置方式如下：

extra:
  social:
    - icon: fontawesome/brands/github
      link: https://gitcode.com/GitHub_Trending/mk/mkdocs-material
      name: GitHub仓库
    - icon: fontawesome/brands-twitter
      link: https://twitter.com/your-profile
      name: Twitter主页
    - icon: fontawesome/brands-linkedin
      link: https://linkedin.com/in/your-profile
      name: LinkedIn主页

这里的icon字段指定要使用的图标，mkdocs-material内置了FontAwesome图标库，你可以使用任何FontAwesome支持的图标。link字段是社交平台的链接地址，name字段是可选的，用于设置链接的title属性，提高可访问性。

常用图标参考

以下是一些常用社交平台的图标配置参考：

平台	图标配置
GitHub	`fontawesome/brands/github`
GitLab	`fontawesome/brands/gitlab`
Twitter	`fontawesome/brands/x-twitter`
Mastodon	`fontawesome/brands/mastodon`
Docker	`fontawesome/brands/docker`
邮件	`fontawesome/solid/paper-plane`

更多图标可以参考官方文档：docs/reference/icons-emojis.md

版权信息高级配置

自定义版权文本

除了基本的版权信息设置外，mkdocs-material还支持自定义版权文本的显示。默认情况下，版权信息的渲染由src/templates/partials/copyright.html控制。该模板的核心内容如下：

<div class="md-copyright">
  {% if config.copyright %}
    <div class="md-copyright__highlight">
      {{ config.copyright }}
    </div>
  {% endif %}
  {% if not config.extra.generator == false %}
    Made with
    <a
      href="https://squidfunk.github.io/mkdocs-material/"
      target="_blank" rel="noopener"
    >
      Material for MkDocs
    </a>
  {% endif %}
</div>

如果你需要修改版权信息的显示样式或内容，可以通过自定义主题的方式覆盖这个模板。

移除生成器信息

mkdocs-material默认会在页脚显示"Made with Material for MkDocs"字样。如果你希望移除这段文字，可以在mkdocs.yml中添加：

extra:
  generator: false

不过官方建议在移除这段信息前考虑赞助该项目，以支持mkdocs-material的持续开发。

备案号展示方案

对于中国境内的网站，根据相关规定需要在页脚展示ICP备案号。mkdocs-material虽然没有直接提供备案号配置选项，但我们可以通过以下两种方式实现：

方法一：通过版权信息添加

最简单的方法是将备案号包含在版权信息中：

copyright: 'Copyright &copy; 2023 你的名称或公司名称 | 备案号：粤ICP备XXXXXXXX号'

这种方式的优点是配置简单，不需要修改模板文件。缺点是备案号会和版权信息显示在同一个元素中，可能不够美观。

方法二：自定义页脚模板

更灵活的方式是通过自定义页脚模板来添加备案号。首先，创建一个新的模板文件overrides/partials/copyright.html，内容如下：

<div class="md-copyright">
  {% if config.copyright %}
    <div class="md-copyright__highlight">
      {{ config.copyright }}
    </div>
  {% endif %}
  {% if config.extra.beian %}
    <div class="md-copyright__beian">
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="noopener">
        {{ config.extra.beian }}
      </a>
    </div>
  {% endif %}
  {% if not config.extra.generator == false %}
    Made with
    <a
      href="https://squidfunk.github.io/mkdocs-material/"
      target="_blank" rel="noopener"
    >
      Material for MkDocs
    </a>
  {% endif %}
</div>

然后在mkdocs.yml中添加备案号配置：

extra:
  beian: '粤ICP备XXXXXXXX号'

最后，确保你的mkdocs.yml中配置了模板覆盖：

theme:
  name: material
  custom_dir: overrides

这种方式可以将备案号独立显示，便于添加样式和调整位置。

页脚布局与样式自定义

页脚结构解析

mkdocs-material的页脚结构主要由src/templates/partials/footer.html控制。该模板定义了页脚的整体布局，包括上一页/下一页导航和版权信息区域。核心结构如下：

<footer class="md-footer">
  <!-- 上一页/下一页导航 -->
  {% if "navigation.footer" in features %}
    <!-- 导航链接代码 -->
  {% endif %}

  <!-- 版权和社交链接区域 -->
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      {% include "partials/copyright.html" %}

      <!-- 社交链接 -->
      {% if config.extra.social %}
        {% include "partials/social.html" %}
      {% endif %}
    </div>
  </div>
</footer>

自定义CSS样式

如果需要调整页脚的样式，可以通过添加自定义CSS来实现。例如，要修改版权信息的颜色，可以在docs/assets/stylesheets/extra.css中添加：

.md-copyright {
  color: #666;
}

.md-copyright__highlight {
  color: #333;
  font-weight: bold;
}

然后在mkdocs.yml中引用这个CSS文件：

extra_css:
  - assets/stylesheets/extra.css

完整配置示例

下面是一个包含版权信息、社交链接和备案号的完整mkdocs.yml配置示例：

theme:
  name: material
  features:
    - navigation.footer
  custom_dir: overrides

copyright: 'Copyright &copy; 2023 你的名称或公司名称'

extra:
  social:
    - icon: fontawesome/brands/github
      link: https://gitcode.com/GitHub_Trending/mk/mkdocs-material
      name: GitHub仓库
    - icon: fontawesome/brands-twitter
      link: https://twitter.com/your-profile
      name: Twitter主页
    - icon: fontawesome/solid/paper-plane
      link: mailto:contact@example.com
      name: 联系我们
  beian: '粤ICP备XXXXXXXX号'
  generator: false  # 可选，用于移除生成器信息

extra_css:
  - assets/stylesheets/extra.css

配置完成后，你的页脚将包含导航链接、版权信息、社交图标和备案号，整体效果如下示意图：

总结

页脚作为文档网站的"最后印象"，其配置不容忽视。通过本文介绍的方法，你可以轻松实现版权信息展示、社交链接添加和备案号配置，让你的文档网站既专业又合规。

如果你想进一步定制页脚，可以深入研究以下文件和文档：

页脚模板：src/templates/partials/footer.html
版权模板：src/templates/partials/copyright.html
主题自定义文档：docs/customization.md

希望本文能帮助你打造出更加专业的文档网站页脚。如有任何问题或建议，欢迎通过页脚的社交链接与我们联系！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考