添加 mkdocs-material 网页字数统计功能记录

约 521 个字 • 18 行代码

起因

跟上一篇一样，是看到了同学博客中有字数、代码行数统计的功能，于是询问，然后得知是使用 mkdocs-statistics-plugin 插件，所以今天开始尝试在我的网站上添加并使用这个插件

按照 README.md 进行设置

先 pip 安装

pip install mkdocs-statistics-plugin

再在 mkdocs.yml 中

plugins:
  - statistics

但是发现 图标 icons 不能正常显示

本来应该显示成 ，但显示成了 :material-circle-edit-outline: ，然后我在正文部分中添加这个图标(参考上图)，又能正常显示

解决图标显示错误问题

本来由于找不出原因，所以我打算重新自定义统计信息的样式(参考 自定义单页统计模板)，然后把图标给去掉，

于是我查看插件仓库的模板 mkdocs_statistics_plugin/templates/page_statistics.html

<div markdown="1" style="margin-top: -30px; font-size: 0.75em; opacity: 0.7;">
:material-circle-edit-outline: 约 {{ words }} 个字 {% if code_lines != 0 %}:fontawesome-solid-code: {{ code_lines }} 行代码 {% endif %}{% if read_time %}:material-clock-time-two-outline: {% if read_time == 0 %}预计阅读时间不到 1 分钟{% else %}预计阅读时间 {{ read_time }} 分钟{% endif %}{% endif %}
</div>

发现模板是 html 格式，然后我突然有了一些想法，

于是我将这个代码复制粘贴到正文部分，发现图标也是不能正常显示，而之前在正文中直接添加的图标还是显示正常，这时我意识到，可能是与 html 显示相关的问题，于是在 mkdocs-material 官方文档上搜索 html，

然后发现，需要在 mkdocs.yml 中填加一个设置(参考 Markdown in HTML)，

markdown_extensions:
  - md_in_html

而我之前没有添加，

而添加之后，图标就能正确显示了😄

修改统计信息样式(自定义样式)，调整网页排版

由于使用默认的样式，在我的blog中会有部分字重叠，

所以我想在统计信息前加一个换行，

于是我新建样式文件 /docs/page_template/page_statistics.html ，

<div markdown="1" style="margin-top: -30px; font-size: 0.75em; opacity: 0.7;">
:material-circle-edit-outline: 约 {{ words }} 个字 {% if code_lines != 0 %}:fontawesome-solid-code: {{ code_lines }} 行代码 {% endif %}{% if read_time %}:material-clock-time-two-outline: {% if read_time == 0 %}预计阅读时间不到 1 分钟{% else %}预计阅读时间 {{ read_time }} 分钟{% endif %}{% endif %}
</div>

由于我一开始以为 <div> 里面应该使用 html 的换行，于是接连尝试了 <br \> 和 \n 都没能换行，

摸索了一番之后我才意识到，这里面其实是使用 markdown 的语法，所以换行需要两行，

弄清楚这一点之后，我又进行了一些修改调整，最终我的样式

<div markdown="1" style="margin-top: -30px; font-size: 0.75em; opacity: 0.7;">
&nbsp;

:material-circle-edit-outline: 约 {{ words }} 个字 {% if code_lines != 0 %} • :fontawesome-solid-code: {{ code_lines }} 行代码 {% endif %}{% if read_time %}:material-clock-time-two-outline: {% if read_time == 0 %}预计阅读时间不到 1 分钟{% else %}预计阅读时间 {{ read_time }} 分钟{% endif %}{% endif %}

---
</div>

最后的效果

---

最后更新: 2023-10-24
创建日期: 2023-10-24

评论