跳转至

页脚设置

页脚设置

MkDocs 支持自定义页脚。

在docs/overrides/partials/footer.html中（没有该文件时，创建footer.html文件）添加以下代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!-- Footer -->
<footer class="md-footer">

  <!-- Link to previous and/or next page -->
  {% if "navigation.footer" in features %}
    {% if page.previous_page or page.next_page %}
      {% if page.meta and page.meta.hide %}
        {% set hidden = "hidden" if "footer" in page.meta.hide %}
      {% endif %}
      <nav
        class="md-footer__inner md-grid"
        aria-label="{{ lang.t('footer') }}"
        {{ hidden }}
      >

        <!-- Link to previous page -->
        {% if page.previous_page %}
          {% set direction = lang.t("footer.previous") %}
          <a
            href="{{ page.previous_page.url | url }}"
            class="md-footer__link md-footer__link--prev"
            aria-label="{{ direction }}: {{ page.previous_page.title | e }}"
          >
            <div class="md-footer__button md-icon">
              {% set icon = config.theme.icon.previous or "material/arrow-left" %}
              {% include ".icons/" ~ icon ~ ".svg" %}
            </div>
            <div class="md-footer__title">
              <span class="md-footer__direction">
                {{ direction }}
              </span>
              <div class="md-ellipsis">
                {{ page.previous_page.title }}
              </div>
            </div>

          </a>
        {% endif %}

        <!-- Link to next page -->
        {% if page.next_page %}
          {% set direction = lang.t("footer.next") %}
          <a
            href="{{ page.next_page.url | url }}"
            class="md-footer__link md-footer__link--next"
            aria-label="{{ direction }}: {{ page.next_page.title | e }}"
          >
            <div class="md-footer__title">
              <span class="md-footer__direction">
                {{ direction }}
              </span>
              <div class="md-ellipsis">
                {{ page.next_page.title }}
              </div>
            </div>
            <div class="md-footer__button md-icon">
              {% set icon = config.theme.icon.next or "material/arrow-right" %}
              {% include ".icons/" ~ icon ~ ".svg" %}
            </div>
          </a>
        {% endif %}
      </nav>
    {% endif %}
  {% endif %}

  <!-- Further information -->
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      {% include "partials/copyright.html" %}

    <font color="#B9B9B9">
      <div class="footer-visit-count" style="display: flex; justify-content: center; align-items: center;">
    本站访问量：<script async src="//finicounter.eu.org/finicounter.js"></script>
    <span id="finicount_views"></span>    &nbsp;|&nbsp;
    <footer>
      <a href="https://icp.gov.moe/?keyword=20230640" target="_blank">萌ICP备20230640号</a>
    </footer>
  </div>
      </font>

      <style>
        .footer-visit-count {
            height: fit-content;
            min-height: 55px; /* 根据实际情况调整此高度 */
        }
        </style>
      {% if config.extra.social %}
        {% include "partials/social.html" %}
      {% endif %}
    </div>
  </div>
</footer>

高亮部分自行修改即可

页脚版权设置

mkdocs.yml中添加： 

1
copyright: Copyright &copy; 2022~2025 Wcowin # 左下角的版权声明

如果想删除页脚显示“Made with Material for MkDocs”(不建议)

1
2
extra:
  generator: false  #删除页脚显示“使用 MkDocs 材料制造”