跳转至

Material for MkDocs改动的几个地方

由于自定义或者方便的需要,对Material for MkDocs的几个地方做了些许改动。

去掉左侧的导航栏

根据官方文档介绍,隐藏导航或者内容栏,通过meta标签的形式实现:

1
2
3
4
5
---
hide:
  - navigation # Hide navigation
  - toc        # Hide table of contents
---

也就是在每一个md文档的开始位置设置meta标签。由于我是中途使用的Material for MkDocs主题,先前的md文档都没有设置这个标签,现在一一设置显得有点麻烦。于是通过改动base.html来实现:

134
<div class="md-sidebar md-sidebar--primary" data-md-component="navigation" {{ "hidden" }}>

{{ hidden }}修改为{{ "hidden" }}

修改底栏显示

修改overrides/partials/footer.html

86
87
88
89
90
91
92
93
94
95
96
<div class="md-footer-copyright">
{% if config.copyright %}
  <div class="md-footer-copyright__highlight">
    {{ config.copyright }} , <a href="http://www.beian.miit.gov.cn" target="_blank">蜀ICP备19036239号</a>
  </div>
{% endif %}
  Built With <a target="_blank" href="https://www.mkdocs.org/">Mkdocs {{ mkdocs_version }} </a>@ <span id="zimo-mkdocsdate"></span> | Theme By <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">Material for MkDocs</a>
  <script>
    document.querySelector("#zimo-mkdocsdate").textContent='{{ build_date_utc }}'.substr(0,19)
  </script>
</div>

添加评论

使用自建的Hashover评论,修改overrides/base.html:

175
176
177
178
179
180
181
{% block disqus %}
    <!-- set meta.nocomment to disable comment -->
    {% if page.meta and page.meta.nocomment %}
    {% else %}
    <div id="hashover"></div>
    {% endif %}
{% endblock %}

为使js不影响整体页面的加载,把评论的js文件放在末尾的{% block scripts %}中:

227
228
229
230
{% if page.meta and page.meta.nocomment %}
{% else %}
    <script type="text/javascript" src="https://comments.zimoapps.com/hashover/comments.php"></script>
{% endif %}

为了避免评论出现在首页或其它不需要的页面,使用页面的meta标签来关闭评论。在不需要显示评论的原始md文件的页面最上面加入:

1
2
3
---
nocomment: " "
---

删除底部的上一页和下一页

由于是作为博客使用,有上下页看着就不是那么回事了,想删除这个翻页,删除overrides/partials/footer.html文件中的以下部分:

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
<!-- Link to previous and/or next page -->
{% if page.previous_page or page.next_page %}
<div class="md-footer-nav">
  <nav
    class="md-footer-nav__inner md-grid"
    aria-label="{{ lang.t('footer.title') }}"
  >

    <!-- Link to previous page -->
    {% if page.previous_page %}
      <a
        href="{{ page.previous_page.url | url }}"
        class="md-footer-nav__link md-footer-nav__link--prev"
        rel="prev"
      >
        <div class="md-footer-nav__button md-icon">
          {% include ".icons/material/arrow-left.svg" %}
        </div>
        <div class="md-footer-nav__title">
          <div class="md-ellipsis">
            <span class="md-footer-nav__direction">
              {{ lang.t("footer.previous") }}
            </span>
            {{ page.previous_page.title }}
          </div>
        </div>
      </a>
    {% endif %}

    <!-- Link to next page -->
    {% if page.next_page %}
      <a
        href="{{ page.next_page.url | url }}"
        class="md-footer-nav__link md-footer-nav__link--next"
        rel="next"
      >
        <div class="md-footer-nav__title">
          <div class="md-ellipsis">
            <span class="md-footer-nav__direction">
              {{ lang.t("footer.next") }}
            </span>
            {{ page.next_page.title }}
          </div>
        </div>
        <div class="md-footer-nav__button md-icon">
          {% include ".icons/material/arrow-right.svg" %}
        </div>
      </a>
    {% endif %}
  </nav>
</div>
{% endif %}

修改底栏颜色

在自定义的css文件docs/css/extra.css中添加

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
/*修改底栏颜色*/
footer{
    background-color: hsl(199deg,18%,40%,.9) !important;
    font-size: 16px;
}
footer,
footer .md-footer-copyright,
footer .md-footer-copyright a,
footer .md-footer-copyright__highlight,
footer .md-footer-copyright__highlight a{
    color: #ddd!important;
}
.md-footer-meta.md-typeset{
    background-color: unset !important;
}

添加自定义的侧栏内容

修改overrides/partials/toc.html

6
7
8
  <div>
    -curtome contents-
  </div>