Material for MkDocs改动的几个地方

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

去掉左侧的导航栏

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

---
hide:
  - navigation # Hide navigation
  - toc        # Hide table of contents
---

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

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

将{{ hidden }}修改为{{ "hidden" }}。

修改底栏显示

修改overrides/partials/footer.html：

<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:

{% 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 %}中：

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

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

---
nocomment: " "
---

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

<!-- 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中添加

/*修改底栏颜色*/
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，

  <div>
    -curtome contents-
  </div>