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
Mkdocs-Wcowin/docs/blog/websitebeauty/mkcomments.md

7.7 KiB
Raw Permalink Blame History

title, comments, tags
title comments tags
为网站添加评论系统 true
Mkdocs

下面全部内容把】改成}，把【改成{

官方文档：Adding a comment system

这里我同样推荐giscus

利用 GitHub Discussions 实现的评论系统，让访客借助 GitHub 在你的网站上留下评论和反应吧！本项目深受 utterances 的启发。

  • 开源。🌏
  • 无跟踪，无广告，永久免费。📡 🚫
  • 无需数据库。所有数据均储存在 GitHub Discussions 中。:octocat:
  • 支持自定义主题！🌗
  • 支持多种语言。🌐
  • 高可配置性。🔧
  • 自动从 GitHub 拉取新评论与编辑。🔃
  • 可自建服务！🤳

言归正传

第一步

mkdocs.yml 中添加

theme:
  name: material
  custom_dir: docs/overrides  #主要是这一行

参考下图新建 overrides 文件，在此文件下参考下图新建覆盖 html 文件
树状结构如下:

$ tree -a
.
├── .github
│   ├── .DS_Store
│   └── workflows
│       └── PublishMySite.yml
├── docs
│   └── index.md
│   └──overrides
│       └──assets
│       └──main.html
│       └──partials
│          └──comments.html
│
└── mkdocs.yml

img

在 comments.html 中

【% 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=" "
  data-category-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>
<!-- 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 %】

第二步

打开https://giscus.app/zh-CN 走完这个页面的流程就会得到(这会在你的 Github 创建新的仓库，建议自己先去新建个 Discussions) 

<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 中高亮的代码

终端里mkdocs server一下

最后

在你想插入评论的地方的元数据：comments: true 

---
title: 留言板
hide:
  #  - navigation # 显示右
  #  - toc #显示左
  #  - footer
  #  - feedback
comments: true  #默认不开启评论
---

效果

完美!快速相应

![](https://s1.imagehub.cc/images/2024/02/02/0619f922f930e7649fb40405c7e49339.png)
这是图片↑↑↑

其他评论系统

把想要内嵌的评论代码放在相应页面即可 比如twikoo 去看它的官方配置文档很简单就配置好了

<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>
</body>
<head> </head>

我感觉 twikoo 也好看！