From f1e0a1a011c3eee784e7b0561e34115bb54b8577 Mon Sep 17 00:00:00 2001 From: W1ndys Date: Thu, 11 Apr 2024 20:18:55 +0800 Subject: [PATCH] =?UTF-8?q?=E6=88=91=E6=94=B9=E5=8A=A8=E7=9A=84=E6=96=87?= =?UTF-8?q?=E4=BB=B6=EF=BC=88=E6=8A=8A=E8=8B=B1=E6=96=87=E5=A4=A7=E6=8B=AC?= =?UTF-8?q?=E5=8F=B7=E6=94=B9=E6=88=90=E4=BA=86=E4=B8=AD=E6=96=87=E4=B8=AD?= =?UTF-8?q?=E6=8B=AC=E5=8F=B7=EF=BC=8C=E5=B9=B6=E5=81=9A=E5=87=BA=E4=BA=86?= =?UTF-8?q?=E6=A0=87=E6=B3=A8=EF=BC=89=EF=BC=8C=E4=B8=BA=E4=BA=86=E8=A7=84?= =?UTF-8?q?=E9=81=BF=E9=82=A3=E4=B8=AAbug=EF=BC=8C=E5=A6=82=E6=9C=89?= =?UTF-8?q?=E5=86=92=E7=8A=AF=EF=BC=8C=E8=AF=B7=E8=A7=81=E8=B0=85=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/blog/Mkdocs/mkdocs1.md | 4 +- docs/blog/websitebeauty/header.md | 31 ++-- docs/blog/websitebeauty/mkcomments.md | 235 ++++++++++++++------------ 3 files changed, 151 insertions(+), 119 deletions(-) diff --git a/docs/blog/Mkdocs/mkdocs1.md b/docs/blog/Mkdocs/mkdocs1.md index 5877ee1..41c5cf6 100644 --- a/docs/blog/Mkdocs/mkdocs1.md +++ b/docs/blog/Mkdocs/mkdocs1.md @@ -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- diff --git a/docs/blog/websitebeauty/header.md b/docs/blog/websitebeauty/header.md index 9e4298c..5eb2eeb 100644 --- a/docs/blog/websitebeauty/header.md +++ b/docs/blog/websitebeauty/header.md @@ -10,6 +10,9 @@ tags: - Mkdocs comments: false #评论，默认不开启 --- + +> 下面全部内容把】改成}，把【改成{ + ![image.png](https://s2.loli.net/2024/02/02/mvCEgeP4lANuXI8.png) 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 %} - - {% endblock %} - {% block announce %} + -#】 + 【% extends "base.html" %】 + 【% block extrahead %】 + + 【% endblock %】 + 【% block announce %】 Follow @Wcowin on - {% include ".icons/fontawesome/brands/bilibili.svg" %} + 【% include ".icons/fontawesome/brands/bilibili.svg" %】 Bilibili and Twitter - {% endblock %} - {% block scripts %} - {{ super() }} - - {% endblock %} + 【% endblock %】 + 【% block scripts %】 + 【【 super() 】】 + + 【% endblock %】 ``` diff --git a/docs/blog/websitebeauty/mkcomments.md b/docs/blog/websitebeauty/mkcomments.md index a6a4e81..8f91171 100644 --- a/docs/blog/websitebeauty/mkcomments.md +++ b/docs/blog/websitebeauty/mkcomments.md @@ -4,33 +4,39 @@ comments: true tags: - 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) - 利用 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 . @@ -47,17 +53,18 @@ $ tree -a │ └──comments.html │ └── mkdocs.yml -``` +``` ![img](https://s1.imagehub.cc/images/2024/02/02/214447b92070792905259a843de3e233.png) -在comments.html中 +在 comments.html 中 ```html hl_lines="4-18" -{% if page.meta.comments %} -

{{ lang.t("meta.comments") }}

- - + + - - -{% endif %} +【% endif %】 ``` -## 第二步 -打开 走完这个页面的流程就会得到(这会在你的Github创建新的仓库，建议自己先去新建个 Discussions) -![](https://s1.imagehub.cc/images/2024/02/02/b0fabd6a0c967d5a846c087adea5b680.png) -![](https://s1.imagehub.cc/images/2024/02/02/d0c7b4e08a714b5c2b60421f58159c62.png) +## 第二步 + +打开 走完这个页面的流程就会得到(这会在你的 Github 创建新的仓库，建议自己先去新建个 Discussions) +![](https://s1.imagehub.cc/images/2024/02/02/b0fabd6a0c967d5a846c087adea5b680.png) + +![](https://s1.imagehub.cc/images/2024/02/02/d0c7b4e08a714b5c2b60421f58159c62.png) ```html - + ``` -复制将此代码，替换最上面👆🏻comments.html中高亮的代码 +复制将此代码，替换最上面 👆🏻comments.html 中高亮的代码 终端里`mkdocs server`一下 ## 最后 + 在你想插入评论的地方的元数据：`comments: true ` ``` @@ -147,13 +158,14 @@ hide: # - navigation # 显示右 # - toc #显示左 # - footer - # - feedback + # - feedback comments: true #默认不开启评论 --- ``` -## 效果 -完美!快速相应 +## 效果 + +完美!快速相应
![](https://s1.imagehub.cc/images/2024/02/02/0619f922f930e7649fb40405c7e49339.png) @@ -167,27 +179,42 @@ comments: true #默认不开启评论 去看它的官方配置文档很简单就配置好了 ```html - - - - - - + + + + + -
- +
+ + 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('评论加载完成'); + 】 + 】) + + ``` @@ -200,16 +227,16 @@ twikoo.init({
+ 】 +】) + -我感觉twikoo也好看！ \ No newline at end of file +我感觉 twikoo 也好看！