Wcowin/Mkdocs-Wcowin
1
0
Fork 0
mirror of https://github.com/Wcowin/Mkdocs-Wcowin.git synced 2025-07-20 08:56:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

我改动的文件（把英文大括号改成了中文中括号，并做出了标注），为了规避那个bug，如有冒犯，请见谅。

Browse Source
This commit is contained in:
W1ndys 2024-04-11 20:18:55 +08:00
parent a3d4897f74
commit f1e0a1a011
3 changed files with 151 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/blog/Mkdocs/mkdocs1.md
View File

@ -4,6 +4,8 @@ tags:
- Mkdocs - Mkdocs
--- ---
> 下面全部内容把】改成}，把【改成{
!!! info !!! info
官方网站：[MkDocs](https://www.mkdocs.org/){target=“_blank”} 官方网站：[MkDocs](https://www.mkdocs.org/){target=“_blank”}
@ -118,7 +120,7 @@ jobs:
- run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
- uses: actions/cache@v3 - uses: actions/cache@v3
with: with:
key: mkdocs-material-${{ env.cache_id }} key: mkdocs-material-$【【 env.cache_id 】】 # 此处把【【】】改成`{``{``}``}`（只有英文大括号）
path: .cache path: .cache
restore-keys: | restore-keys: |
mkdocs-material- mkdocs-material-

31
docs/blog/websitebeauty/header.md
View File

@ -10,6 +10,9 @@ tags:
- Mkdocs - Mkdocs
comments: false #评论，默认不开启 comments: false #评论，默认不开启
--- ---
> 下面全部内容把】改成}，把【改成{
![image.png](https://s2.loli.net/2024/02/02/mvCEgeP4lANuXI8.png) ![image.png](https://s2.loli.net/2024/02/02/mvCEgeP4lANuXI8.png)
docs/overrides下新建main.html ，针对main.html文件 docs/overrides下新建main.html ，针对main.html文件
@ -33,33 +36,33 @@ $ tree -a
``` ```
```html ```html
{#- 【#-
This file was automatically generated - do not edit This file was automatically generated - do not edit
-#} -#】
{% extends "base.html" %} 【% extends "base.html" %】
{% block extrahead %} 【% block extrahead %】
<link rel="stylesheet" href="{{ 'assets/stylesheets/custom.00c04c01.min.css' | url }}"> <link rel="stylesheet" href="【【 'assets/stylesheets/custom.00c04c01.min.css' | url 】】">
{% endblock %} 【% endblock %】
{% block announce %} 【% block announce %】
Follow <strong>@Wcowin</strong> on Follow <strong>@Wcowin</strong> on
<a rel="me" href="https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0"> <a rel="me" href="https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0">
<span class="twemoji bilibili"> <span class="twemoji bilibili">
{% include ".icons/fontawesome/brands/bilibili.svg" %} 【% include ".icons/fontawesome/brands/bilibili.svg" %】
</span> </span>
<strong>Bilibili</strong> <strong>Bilibili</strong>
</a> </a>
and and
<a href="https://twitter.com/Wcowin_"> <a href="https://twitter.com/Wcowin_">
<span class="twemoji twitter"> <span class="twemoji twitter">
{% include ".icons/fontawesome/brands/twitter.svg" %} 【% include ".icons/fontawesome/brands/twitter.svg" %】
</span> </span>
<strong>Twitter</strong> <strong>Twitter</strong>
</a> </a>
{% endblock %} 【% endblock %】
{% block scripts %} 【% block scripts %】
{{ super() }} 【【 super() 】】
<script src="{{ 'assets/javascripts/custom.9458f965.min.js' | url }}"></script> <script src="【【 'assets/javascripts/custom.9458f965.min.js' | url 】】"></script>
{% endblock %} 【% endblock %】
``` ```

235
docs/blog/websitebeauty/mkcomments.md
View File

@ -4,33 +4,39 @@ comments: true
tags: tags:
- Mkdocs - Mkdocs
--- ---
官方文档：[Adding a comment system](https://squidfunk.github.io/mkdocs-material/setup/adding-a-comment-system/)
> 下面全部内容把】改成}，把【改成{
官方文档：[Adding a comment system](https://squidfunk.github.io/mkdocs-material/setup/adding-a-comment-system/)
这里我同样推荐[giscus](https://giscus.app/zh-CN) 这里我同样推荐[giscus](https://giscus.app/zh-CN)
利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。 利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。
* 开源。🌏 - 开源。🌏
* 无跟踪，无广告，永久免费。📡 🚫 - 无跟踪，无广告，永久免费。📡 🚫
* 无需数据库。所有数据均储存在 GitHub Discussions 中。:octocat: - 无需数据库。所有数据均储存在 GitHub Discussions 中。:octocat:
* 支持自定义主题！🌗 - 支持自定义主题！🌗
* 支持多种语言。🌐 - 支持多种语言。🌐
* 高可配置性。🔧 - 高可配置性。🔧
* 自动从 GitHub 拉取新评论与编辑。🔃 - 自动从 GitHub 拉取新评论与编辑。🔃
* 可自建服务！🤳 - 可自建服务！🤳
言归正传 言归正传
## 第一步 ## 第一步
mkdocs.yml中添加
mkdocs.yml 中添加
``` ```
theme: theme:
name: material name: material
custom_dir: docs/overrides #主要是这一行 custom_dir: docs/overrides #主要是这一行
``` ```
参考下图新建overrides文件，在此文件下参考下图新建覆盖html文件
树状结构如下: 参考下图新建 overrides 文件，在此文件下参考下图新建覆盖 html 文件
树状结构如下:
``` ```
$ tree -a $ tree -a
. .
@ -47,17 +53,18 @@ $ tree -a
│ └──comments.html │ └──comments.html
│ │
└── mkdocs.yml └── mkdocs.yml
``` ```
![img](https://s1.imagehub.cc/images/2024/02/02/214447b92070792905259a843de3e233.png) ![img](https://s1.imagehub.cc/images/2024/02/02/214447b92070792905259a843de3e233.png)
在comments.html中 在 comments.html 中
```html hl_lines="4-18" ```html hl_lines="4-18"
{% if page.meta.comments %} 【% if page.meta.comments %】
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2> <h2 id="__comments">【【 lang.t("meta.comments") 】】</h2>
<!-- Insert generated snippet here --> <!-- Insert generated snippet here -->
<script src="https://giscus.app/client.js" <script
src="https://giscus.app/client.js"
data-repo="你的仓库名称（如Wcowin/hexo-site-comments）" data-repo="你的仓库名称（如Wcowin/hexo-site-comments）"
data-repo-id=" " data-repo-id=" "
data-category=" " data-category=" "
@ -70,74 +77,78 @@ $ tree -a
data-theme="preferred_color_scheme" data-theme="preferred_color_scheme"
data-lang="zh-CN" data-lang="zh-CN"
crossorigin="anonymous" crossorigin="anonymous"
async> async
></script>
<!-- Synchronize Giscus theme with palette -->
<script>
var giscus = document.querySelector("script[src*=giscus]")
// Set palette on initial load
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") 【
var theme = palette.color.scheme === "slate"
? "transparent_dark"
: "light"
// Instruct Giscus to set theme
giscus.setAttribute("data-theme", theme)
】
// Register event handlers after documented loaded
document.addEventListener("DOMContentLoaded", function() 【
var ref = document.querySelector("[data-md-component=palette]")
ref.addEventListener("change", function() 【
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") 【
var theme = palette.color.scheme === "slate"
? "transparent_dark"
: "light"
// Instruct Giscus to change theme
var frame = document.querySelector(".giscus-frame")
frame.contentWindow.postMessage(
【 giscus: 【 setConfig: 【 theme 】 】 】,
"https://giscus.app"
)
】
】)
】)
</script> </script>
<!-- Synchronize Giscus theme with palette --> 【% endif %】
<script>
var giscus = document.querySelector("script[src*=giscus]")
// Set palette on initial load
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate"
? "transparent_dark"
: "light"
// Instruct Giscus to set theme
giscus.setAttribute("data-theme", theme)
}
// Register event handlers after documented loaded
document.addEventListener("DOMContentLoaded", function() {
var ref = document.querySelector("[data-md-component=palette]")
ref.addEventListener("change", function() {
var palette = __md_get("__palette")
if (palette && typeof palette.color === "object") {
var theme = palette.color.scheme === "slate"
? "transparent_dark"
: "light"
// Instruct Giscus to change theme
var frame = document.querySelector(".giscus-frame")
frame.contentWindow.postMessage(
{ giscus: { setConfig: { theme } } },
"https://giscus.app"
)
}
})
})
</script>
{% endif %}
``` ```
## 第二步
打开<https://giscus.app/zh-CN> 走完这个页面的流程就会得到(这会在你的Github创建新的仓库，建议自己先去新建个 Discussions)
![](https://s1.imagehub.cc/images/2024/02/02/b0fabd6a0c967d5a846c087adea5b680.png)
![](https://s1.imagehub.cc/images/2024/02/02/d0c7b4e08a714b5c2b60421f58159c62.png) ## 第二步
打开<https://giscus.app/zh-CN> 走完这个页面的流程就会得到(这会在你的 Github 创建新的仓库，建议自己先去新建个 Discussions)
![](https://s1.imagehub.cc/images/2024/02/02/b0fabd6a0c967d5a846c087adea5b680.png)
![](https://s1.imagehub.cc/images/2024/02/02/d0c7b4e08a714b5c2b60421f58159c62.png)
```html ```html
<script src="https://giscus.app/client.js" <script
data-repo="[在此输入仓库]" src="https://giscus.app/client.js"
data-repo-id="[在此输入仓库 ID]" data-repo="[在此输入仓库]"
data-category="[在此输入分类名]" data-repo-id="[在此输入仓库 ID]"
data-category-id="[在此输入分类 ID]" data-category="[在此输入分类名]"
data-mapping="pathname" data-category-id="[在此输入分类 ID]"
data-strict="0" data-mapping="pathname"
data-reactions-enabled="1" data-strict="0"
data-emit-metadata="0" data-reactions-enabled="1"
data-input-position="bottom" data-emit-metadata="0"
data-theme="preferred_color_scheme" data-input-position="bottom"
data-lang="zh-CN" data-theme="preferred_color_scheme"
crossorigin="anonymous" data-lang="zh-CN"
async> crossorigin="anonymous"
</script> async
></script>
``` ```
复制将此代码，替换最上面👆🏻comments.html中高亮的代码 复制将此代码，替换最上面 👆🏻comments.html 中高亮的代码
终端里`mkdocs server`一下 终端里`mkdocs server`一下
## 最后 ## 最后
在你想插入评论的地方的元数据：`comments: true ` 在你想插入评论的地方的元数据：`comments: true `
``` ```
@ -147,13 +158,14 @@ hide:
# - navigation # 显示右 # - navigation # 显示右
# - toc #显示左 # - toc #显示左
# - footer # - footer
# - feedback # - feedback
comments: true #默认不开启评论 comments: true #默认不开启评论
--- ---
``` ```
## 效果
完美!快速相应 ## 效果
完美!快速相应
<figure markdown > <figure markdown >
![](https://s1.imagehub.cc/images/2024/02/02/0619f922f930e7649fb40405c7e49339.png) ![](https://s1.imagehub.cc/images/2024/02/02/0619f922f930e7649fb40405c7e49339.png)
@ -167,27 +179,42 @@ comments: true #默认不开启评论
去看它的官方配置文档很简单就配置好了 去看它的官方配置文档很简单就配置好了
```html ```html
<head> <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous" /> <link
<script defer="" src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script> rel="stylesheet"
<script defer="" src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script> href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
</head> crossorigin="anonymous"
/>
<script
defer=""
src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js"
integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
crossorigin="anonymous"
></script>
<script
defer=""
src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js"
integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
crossorigin="anonymous"
></script>
</head>
<body> <body>
<div id="tcomment"></div> <div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script> <script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script>
<script> <script>
twikoo.init({ twikoo.init(【
envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app） envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
el: '#tcomment', // 容器元素 el: '#tcomment', // 容器元素
//region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填 //region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数 // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
//lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js //lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
onCommentLoaded: function () { onCommentLoaded: function () 【
console.log('评论加载完成'); console.log('评论加载完成');
} 】
}) 】)
</script> </script>
</body>
``` ```
<head> <head>
@ -200,16 +227,16 @@ twikoo.init({
<div id="tcomment"></div> <div id="tcomment"></div>
<script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script> <script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script>
<script> <script>
twikoo.init({ twikoo.init(【
envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app） envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
el: '#tcomment', // 容器元素 el: '#tcomment', // 容器元素
//region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填 //region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数 // path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
//lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js //lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
onCommentLoaded: function () { onCommentLoaded: function () 【
console.log('评论加载完成'); console.log('评论加载完成');
} 】
}) 】)
</script> </script>
我感觉twikoo也好看！ 我感觉 twikoo 也好看！