mirror of
https://github.com/Wcowin/Mkdocs-Wcowin.git
synced 2025-07-20 08:56:35 +00:00
我改动的文件（把英文大括号改成了中文中括号，并做出了标注），为了规避那个bug，如有冒犯，请见谅。
This commit is contained in:
W1ndys
parent
a3d4897f74
commit
f1e0a1a011
@ -4,6 +4,8 @@ tags:
|
||||
- Mkdocs
|
||||
---
|
||||
|
||||
> 下面全部内容把】改成}，把【改成{
|
||||
|
||||
!!! info
|
||||
官方网站：[MkDocs](https://www.mkdocs.org/){target=“_blank”}
|
||||
|
||||
@ -118,7 +120,7 @@ jobs:
|
||||
- run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
|
||||
- uses: actions/cache@v3
|
||||
with:
|
||||
key: mkdocs-material-${{ env.cache_id }}
|
||||
key: mkdocs-material-$【【 env.cache_id 】】 # 此处把【【】】改成`{``{``}``}`（只有英文大括号）
|
||||
path: .cache
|
||||
restore-keys: |
|
||||
mkdocs-material-
|
||||
|
||||
@ -10,6 +10,9 @@ tags:
|
||||
- Mkdocs
|
||||
comments: false #评论，默认不开启
|
||||
---
|
||||
|
||||
> 下面全部内容把】改成}，把【改成{
|
||||
|
||||
|
||||
|
||||
docs/overrides下新建main.html ，针对main.html文件
|
||||
@ -33,33 +36,33 @@ $ tree -a
|
||||
```
|
||||
|
||||
```html
|
||||
{#-
|
||||
【#-
|
||||
This file was automatically generated - do not edit
|
||||
-#}
|
||||
{% extends "base.html" %}
|
||||
{% block extrahead %}
|
||||
<link rel="stylesheet" href="{{ 'assets/stylesheets/custom.00c04c01.min.css' | url }}">
|
||||
{% endblock %}
|
||||
{% block announce %}
|
||||
-#】
|
||||
【% extends "base.html" %】
|
||||
【% block extrahead %】
|
||||
<link rel="stylesheet" href="【【 'assets/stylesheets/custom.00c04c01.min.css' | url 】】">
|
||||
【% endblock %】
|
||||
【% block announce %】
|
||||
Follow <strong>@Wcowin</strong> on
|
||||
<a rel="me" href="https://space.bilibili.com/1407028951?spm_id_from=333.1007.0.0">
|
||||
<span class="twemoji bilibili">
|
||||
{% include ".icons/fontawesome/brands/bilibili.svg" %}
|
||||
【% include ".icons/fontawesome/brands/bilibili.svg" %】
|
||||
</span>
|
||||
<strong>Bilibili</strong>
|
||||
</a>
|
||||
and
|
||||
<a href="https://twitter.com/Wcowin_">
|
||||
<span class="twemoji twitter">
|
||||
{% include ".icons/fontawesome/brands/twitter.svg" %}
|
||||
【% include ".icons/fontawesome/brands/twitter.svg" %】
|
||||
</span>
|
||||
<strong>Twitter</strong>
|
||||
</a>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script src="{{ 'assets/javascripts/custom.9458f965.min.js' | url }}"></script>
|
||||
{% endblock %}
|
||||
【% endblock %】
|
||||
【% block scripts %】
|
||||
【【 super() 】】
|
||||
<script src="【【 'assets/javascripts/custom.9458f965.min.js' | url 】】"></script>
|
||||
【% endblock %】
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -4,33 +4,39 @@ comments: true
|
||||
tags:
|
||||
- Mkdocs
|
||||
---
|
||||
|
||||
> 下面全部内容把】改成}，把【改成{
|
||||
|
||||
官方文档：[Adding a comment system](https://squidfunk.github.io/mkdocs-material/setup/adding-a-comment-system/)
|
||||
|
||||
这里我同样推荐[giscus](https://giscus.app/zh-CN)
|
||||
|
||||
|
||||
利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。
|
||||
|
||||
* 开源。🌏
|
||||
* 无跟踪，无广告，永久免费。📡 🚫
|
||||
* 无需数据库。所有数据均储存在 GitHub Discussions 中。:octocat:
|
||||
* 支持自定义主题！🌗
|
||||
* 支持多种语言。🌐
|
||||
* 高可配置性。🔧
|
||||
* 自动从 GitHub 拉取新评论与编辑。🔃
|
||||
* 可自建服务！🤳
|
||||
- 开源。🌏
|
||||
- 无跟踪，无广告，永久免费。📡 🚫
|
||||
- 无需数据库。所有数据均储存在 GitHub Discussions 中。:octocat:
|
||||
- 支持自定义主题！🌗
|
||||
- 支持多种语言。🌐
|
||||
- 高可配置性。🔧
|
||||
- 自动从 GitHub 拉取新评论与编辑。🔃
|
||||
- 可自建服务！🤳
|
||||
|
||||
言归正传
|
||||
|
||||
## 第一步
|
||||
mkdocs.yml中添加
|
||||
|
||||
mkdocs.yml 中添加
|
||||
|
||||
```
|
||||
theme:
|
||||
name: material
|
||||
custom_dir: docs/overrides #主要是这一行
|
||||
```
|
||||
参考下图新建overrides文件，在此文件下参考下图新建覆盖html文件
|
||||
|
||||
参考下图新建 overrides 文件，在此文件下参考下图新建覆盖 html 文件
|
||||
树状结构如下:
|
||||
|
||||
```
|
||||
$ tree -a
|
||||
.
|
||||
@ -51,13 +57,14 @@ $ tree -a
|
||||
|
||||
|
||||
|
||||
在comments.html中
|
||||
在 comments.html 中
|
||||
|
||||
```html hl_lines="4-18"
|
||||
{% if page.meta.comments %}
|
||||
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
|
||||
<!-- Insert generated snippet here -->
|
||||
<script src="https://giscus.app/client.js"
|
||||
【% if page.meta.comments %】
|
||||
<h2 id="__comments">【【 lang.t("meta.comments") 】】</h2>
|
||||
<!-- Insert generated snippet here -->
|
||||
<script
|
||||
src="https://giscus.app/client.js"
|
||||
data-repo="你的仓库名称（如Wcowin/hexo-site-comments）"
|
||||
data-repo-id=" "
|
||||
data-category=" "
|
||||
@ -70,74 +77,78 @@ $ tree -a
|
||||
data-theme="preferred_color_scheme"
|
||||
data-lang="zh-CN"
|
||||
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>
|
||||
<!-- 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>
|
||||
{% endif %}
|
||||
【% endif %】
|
||||
```
|
||||
|
||||
## 第二步
|
||||
打开<https://giscus.app/zh-CN> 走完这个页面的流程就会得到(这会在你的Github创建新的仓库，建议自己先去新建个 Discussions)
|
||||
|
||||
打开<https://giscus.app/zh-CN> 走完这个页面的流程就会得到(这会在你的 Github 创建新的仓库，建议自己先去新建个 Discussions)
|
||||
|
||||
|
||||
|
||||
|
||||
```html
|
||||
<script src="https://giscus.app/client.js"
|
||||
data-repo="[在此输入仓库]"
|
||||
data-repo-id="[在此输入仓库 ID]"
|
||||
data-category="[在此输入分类名]"
|
||||
data-category-id="[在此输入分类 ID]"
|
||||
data-mapping="pathname"
|
||||
data-strict="0"
|
||||
data-reactions-enabled="1"
|
||||
data-emit-metadata="0"
|
||||
data-input-position="bottom"
|
||||
data-theme="preferred_color_scheme"
|
||||
data-lang="zh-CN"
|
||||
crossorigin="anonymous"
|
||||
async>
|
||||
</script>
|
||||
<script
|
||||
src="https://giscus.app/client.js"
|
||||
data-repo="[在此输入仓库]"
|
||||
data-repo-id="[在此输入仓库 ID]"
|
||||
data-category="[在此输入分类名]"
|
||||
data-category-id="[在此输入分类 ID]"
|
||||
data-mapping="pathname"
|
||||
data-strict="0"
|
||||
data-reactions-enabled="1"
|
||||
data-emit-metadata="0"
|
||||
data-input-position="bottom"
|
||||
data-theme="preferred_color_scheme"
|
||||
data-lang="zh-CN"
|
||||
crossorigin="anonymous"
|
||||
async
|
||||
></script>
|
||||
```
|
||||
|
||||
复制将此代码，替换最上面👆🏻comments.html中高亮的代码
|
||||
复制将此代码，替换最上面 👆🏻comments.html 中高亮的代码
|
||||
|
||||
终端里`mkdocs server`一下
|
||||
|
||||
## 最后
|
||||
|
||||
在你想插入评论的地方的元数据：`comments: true `
|
||||
|
||||
```
|
||||
@ -151,6 +162,7 @@ hide:
|
||||
comments: true #默认不开启评论
|
||||
---
|
||||
```
|
||||
|
||||
## 效果
|
||||
|
||||
完美!快速相应
|
||||
@ -168,26 +180,41 @@ comments: true #默认不开启评论
|
||||
|
||||
```html
|
||||
<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" />
|
||||
<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>
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
<div id="tcomment"></div>
|
||||
<script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script>
|
||||
<script>
|
||||
twikoo.init({
|
||||
envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
|
||||
el: '#tcomment', // 容器元素
|
||||
//region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
|
||||
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
|
||||
//lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
|
||||
onCommentLoaded: function () {
|
||||
console.log('评论加载完成');
|
||||
}
|
||||
})
|
||||
</script>
|
||||
twikoo.init(【
|
||||
envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
|
||||
el: '#tcomment', // 容器元素
|
||||
//region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
|
||||
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
|
||||
//lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
|
||||
onCommentLoaded: function () 【
|
||||
console.log('评论加载完成');
|
||||
】
|
||||
】)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
<head>
|
||||
@ -200,16 +227,16 @@ twikoo.init({
|
||||
<div id="tcomment"></div>
|
||||
<script src="https://cdn.staticfile.org/twikoo/1.6.21/twikoo.all.min.js"></script>
|
||||
<script>
|
||||
twikoo.init({
|
||||
twikoo.init(【
|
||||
envId: 'https://superb-salamander-e730b6.netlify.app/.netlify/functions/twikoo', // 腾讯云环境填 envId；Vercel 环境填地址（https://xxx.vercel.app）
|
||||
el: '#tcomment', // 容器元素
|
||||
//region: 'ap-guangzhou', // 环境地域，默认为 ap-shanghai，腾讯云环境填 ap-shanghai 或 ap-guangzhou；Vercel 环境不填
|
||||
// path: location.pathname, // 用于区分不同文章的自定义 js 路径，如果您的文章路径不是 location.pathname，需传此参数
|
||||
//lang: 'zh-CN', // 用于手动设定评论区语言，支持的语言列表 https://github.com/twikoojs/twikoo/blob/main/src/client/utils/i18n/index.js
|
||||
onCommentLoaded: function () {
|
||||
onCommentLoaded: function () 【
|
||||
console.log('评论加载完成');
|
||||
}
|
||||
})
|
||||
】
|
||||
】)
|
||||
</script>
|
||||
|
||||
我感觉twikoo也好看！
|
||||
我感觉 twikoo 也好看！
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user