跳转至

参与和传播

您可以促进读者参与并改善内容的传播 通过提供人们可以订阅的RSS提要,在您的博客上发布 整合讨论系统。了解更多关于谁在阅读或不在阅读的信息 你的帖子,你可能想集成一个分析系统。你可能还想 当你发布一篇新的博客文章时,在社交媒体上发帖。本教程提供 你在所有这些话题上都领先一步。

所需时间: 通常为30分钟

RSS源

RSS提要允许用户订阅博客,以便在以下情况下收到通知 你发布新帖子。RSS源阅读器通常用于访问博客 用户跟随。他们通常支持离线下载博客内容 消费。

为您的博客创建RSS提要的一个简单方法是使用 MkDocs RSS Plugin,它与MkDocs的Material很好地集成在一起。 由于它是第三方插件,您需要在使用前安装它。

添加RSS源

将RSS插件安装到您的项目中:

$ pip install mkdocs-rss-plugin

重要的是要有“site_name”、“site_description”和 site_url设置配置为[基本博客教程中的说明]。 RSS插件利用这些信息来构建提要,因此 确定您已经配置了它们。

现在,在mkdocs.yml中配置插件。提供的选项限制 为博客文章创建RSS条目的页面,即 可能是你想要的。另请注意日期字段的配置 匹配Material for MkDocs用于容纳 创建日期和更新日期。

plugins:
    - ...
    - rss:
        match_path: "blog/posts/.*"
        date_from_meta:
          as_creation: date.created
          as_update: date.updated

看一看 http://localhost:8000/feed_rss_created.xml 查看RSS 尽情享受XML的荣耀。您可以使用Firefox或Chrome等浏览器 可以显示原始RSS提要,也可以使用curl获取提要,使用xmllint获取提要 格式化它。(您可能需要安装这些工具。)

curl -s http://localhost:8000/feed_rss_created.xml | xmllint --format -

您可能还想使用提要阅读器尝试提要。有各种各样的桌面 以及移动应用程序和在线服务。当然,要使用后者,你 将需要将您的项目部署到他们可以访问的地方。

如果您没有进行任何更改,这个最小配置应该可以很好地工作 设置为blog插件的默认配置。有关适应的更多信息 根据您的需求,请参阅the RSS plugin's documentation

社交媒体按钮

社交媒体按钮有两个用途:允许读者浏览 访问您的社交媒体资料或分享您通过他们发布的内容 自己的账户。

个人资料链接

社交媒体资料的链接通常位于页面的页脚和 Material for MkDocs使这变得容易。您需要做的就是提供 必要的链接并定义要使用的图标。

添加社交媒体个人资料链接

在你的mkdocs.yml中添加一个extra部分,并在其中添加一个社交 部分包含链接定义列表。这些由徽标组成 使用和指向配置文件的链接。

extra:
  social:
    - icon: fontawesome/brands/mastodon
      name: squidfunk on Mastodon
      link: https://fosstodon.org/@squidfunk

对于icon,您可以选择与捆绑在一起的图标的任何有效路径 主题。name将用作图标的标题属性 包括这一点提高了可访问性。 对于流行的社交媒体系统,链接需要是绝对的 需要包括该方案,最有可能是https://

您还可以使用其他方案。例如,要创建一个图标,允许 要创建电子邮件,请添加以下内容:

extra:
  social:
  - icon: /fontawesome/regular/envelope
    name: send me an email
    link: mailto:<email-address>

最后,您可以在网站中指定一个URL,例如指向您的联系人 页面。可以仅指定页面的路径:

extra:
  social:
  - icon: /material/mailbox
    name: contact us
    link: /contact

分享和点赞按钮

添加按钮让人们在社交媒体上分享你的内容有点难 参与度更高,这就是为什么有公司为此提供组件。

数据保护

使用社交媒体提供的集成的“分享”和“点赞”按钮 公司经常留下大量的数据痕迹,即使用户没有 与这些按钮交互。如果您选择将此功能集成到 您的网站请注意数据保护的影响和您的 作为提供者的职责是确保处理只发生在用户一次 已同意。

这种共享按钮的实现故意不使用第三方代码。 它支持在推特/X和脸书上共享,而不会导致数据流 每当有人浏览这些页面时,这些公司都会。只有当有人点击 共享按钮将与这些公司的服务器进行交互。

添加共享按钮

为了添加共享按钮,您可以添加一个附加按钮的钩子 用于共享当前页面。

在项目根目录中创建一个目录hooks并对其进行配置 在您的mkdocs.yml中:

hooks:
  - hooks/socialmedia.py

使用以下Python代码添加文件hooks/socialmedia.py

from textwrap import dedent
import urllib.parse
import re

x_intent = "https://x.com/intent/tweet"
fb_sharer = "https://www.facebook.com/sharer/sharer.php"
include = re.compile(r"blog/[1-9].*")

def on_page_markdown(markdown, **kwargs):
    page = kwargs['page']
    config = kwargs['config']
    if not include.match(page.url):
        return markdown

    page_url = config.site_url+page.url
    page_title = urllib.parse.quote(page.title+'\n')

    return markdown + dedent(f"""
    [Share on :simple-x:]({x_intent}?text={page_title}&url={page_url}){{ .md-button }}
    [Share on :simple-facebook:]({fb_sharer}?u={page_url}){{ .md-button }}
    """)

钩子首先检查当前页面是否是博客文章,然后附加 共享按钮的Markdown代码。按钮使用图标,因此您还需要 配置以下markdown扩展:

markdown_extensions:
  - attr_list
  - pymdownx.emoji:
      emoji_index: !!python/name:material.extensions.emoji.twemoji
      emoji_generator: !!python/name:material.extensions.emoji.to_svg

添加讨论系统

让你的读者对你的帖子发表评论是一种很好的接收方式 反馈,学习一些东西,以及给读者机会 讨论内容和主题。

有很多讨论系统,你需要考虑 当你为你的博客选择一个合适的时。同样,你会 还需要考虑现有的沟通渠道承诺。如果你 例如,如果是Slack的重度用户,您可能对此有字符串偏好 系统。考虑到当你添加一个沟通渠道时,你需要 准备好定期使用它并主持讨论。

Giscus整合

在本教程中,我们将使用Giscus,因为它是免费的、开源的, 并使用GitHub Discussions作为后端。因为Material的很多用户 对于使用GitHub的MkDocs来说,这似乎是一个显而易见的选择。

要将Giscuss添加到您的博客中,您需要经历多个步骤:

  1. 如果还没有GitHub存储库,请创建一个GitHub存储库
  2. 打开讨论并安装Giscus app
  3. 配置将Giscus嵌入博客所需的代码
  4. 将代码添加到您的MkDocs项目中

您可能希望为本教程创建一个测试存储库,以便 稍后废弃。以下说明假设您是用户"example" 并创建一个存储库"giscus-test."。该存储库将需要 公开让人们能够使用讨论。

在下面给出的说明中,您需要至少替换用户名 而且,如果您选择了其他名称,例如当您 希望直接在现有存储库上工作。

打开讨论并安装Giscus应用程序

设置存储库后,转到其设置页面并查找 Features部分中的General。勾选Discussions复选框。 您将看到Discussions出现在 存储库。如果您正在使用实时存储库,那么您可能需要添加一些 此时将讨论部分的内容最小化,然后回到 辅导的。

接下来,您需要按照以下链接安装Giscus app 句子,选择“安装”,然后按照说明进行选择 Giscus应用程序的安装位置:

  1. 为要使用的存储库选择帐户或组织。
  2. 选择仅在选定的存储库上安装,然后选择您要安装的存储库 想要使用。请注意,您可以在此处选择多个存储库。
  3. 在末尾选择“安装”。您可能需要进行身份验证才能提供 允许这种情况发生。
  4. 您最终将进入设置中的“应用程序”页面,在那里您 可以控制Gicsus应用程序,并在需要时卸载它。

这就是存储库所需的所有准备工作。接下来,是时候了 生成一段代码,将Giscuss嵌入到您的网站中。生成的代码 代码片段看起来像这样:

<script src="https://giscus.app/client.js"
        data-repo="<username>/<repository>"
        data-repo-id="..."
        data-category="Announcements"
        data-category-id="..."
        data-mapping="title"
        data-strict="1"
        data-reactions-enabled="1"
        data-emit-metadata="1"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="en"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

配置将Giscus嵌入博客所需的代码

转到Giscus homepage并配置嵌入代码。有一个 设置数量:

  1. 选择语言
  2. 输入用户名/组织名称和存储库名称
  3. 选择如何将讨论映射到博客上的页面。 因为对于博客文章来说,标题是URL的基础,它使 使用“讨论标题包含页面”选项的意义。</li> <li>在“讨论类别”下选择“公告”以限制创建 与Giscuss和维护人员或管理员进行新的讨论 权限。</li> <li>在“功能”下,选择以下内容:<ol> <li>启用主帖子的反应</li> <li>发布讨论元数据</li> <li>将评论框放在评论上方</li> </ol> </li> <li>在“主题”下,选择“首选配色方案”,以便Giscus匹配 用户为您的网站选择的配色方案。</li> </ol> </div> <p>有了这些设置,您现在需要将代码集成到您的 网站。为此目的,存在一个部分的“partials/comments.html” 默认为空。它包含在<code>content.html</code>部分中,因此 包含在您网站的每个页面中。你可能想要,也可能不想要。在这个 在教程中,您将把Giscus集成限制为仅限于博客文章,但它是 如果你想拥有Giscus,很容易省去实现这一点的代码 每页都有讨论。</p> <div class="admonition example"> <p class=admonition-title>添加Giscus集成代码</p> <p>首先,您需要创建一个“override”目录,其中包含 您要覆盖的模板和部分。</p> <div class="language-text highlight"><pre><span></span><code><span id=__span-10-1><a id=__codelineno-10-1 name=__codelineno-10-1 href=#__codelineno-10-1></a>mkdir -p overrides/partials </span></code></pre></div> <p>您需要在<code>mkdocs.yaml</code>中声明它:</p> <div class="language-yaml highlight"><pre><span></span><code><span id=__span-11-1><a id=__codelineno-11-1 name=__codelineno-11-1 href=#__codelineno-11-1></a><span class=nt>theme</span><span class=p>:</span> </span><span id=__span-11-2><a id=__codelineno-11-2 name=__codelineno-11-2 href=#__codelineno-11-2></a><span class=w> </span><span class=nt>name</span><span class=p>:</span><span class=w> </span><span class="l l-Scalar l-Scalar-Plain">material</span> </span><span id=__span-11-3><a id=__codelineno-11-3 name=__codelineno-11-3 href=#__codelineno-11-3></a><span class=hll><span class=w> </span><span class=nt>custom_dir</span><span class=p>:</span><span class=w> </span><span class="l l-Scalar l-Scalar-Plain">overrides</span> </span></span></code></pre></div> <p>现在添加一个文件<code>overrides/particals/comments.html</code>并粘贴代码 您从Giscus主页获得的片段。在本地查看结果 您将看到集成在网站的所有页面上都是活动的。 如果你想将其限制在你的博客文章中,你需要添加一个条件 围绕Giscus脚本,测试是否应该包含注释。一个简单的 这样做的方法是测试元数据标志:</p> <div class="language-html highlight"><pre><span></span><code><span id=__span-12-1><a id=__codelineno-12-1 name=__codelineno-12-1 href=#__codelineno-12-1></a>{% if page.meta.comments %} </span><span id=__span-12-2><a id=__codelineno-12-2 name=__codelineno-12-2 href=#__codelineno-12-2></a><span class=p><</span><span class=nt>script</span><span class=p>>...</</span><span class=nt>script</span><span class=p>></span> </span><span id=__span-12-3><a id=__codelineno-12-3 name=__codelineno-12-3 href=#__codelineno-12-3></a>{% endif %} </span></code></pre></div> <p>缺点是,您现在需要手动打开每个评论 博客文章-除非你想在某些网站上关闭它们。获取评论 在所有博客文章的部分,使用这样的代码:</p> <div class="language-html highlight"><pre><span></span><code><span id=__span-13-1><a id=__codelineno-13-1 name=__codelineno-13-1 href=#__codelineno-13-1></a>{% if page.file.src_uri.startswith('blog/posts') %} </span><span id=__span-13-2><a id=__codelineno-13-2 name=__codelineno-13-2 href=#__codelineno-13-2></a><span class=p><</span><span class=nt>script</span><span class=p>>...</</span><span class=nt>script</span><span class=p>></span> </span><span id=__span-13-3><a id=__codelineno-13-3 name=__codelineno-13-3 href=#__codelineno-13-3></a>{% endif %} </span></code></pre></div> <p>现在您应该看到Giscus评论已添加到您的 博客文章,但不在其他页面上。</p> </div> <h2 id=_6>接下来是什么?<a class=headerlink href=#_6 title="Permanent link">¶</a></h2> <p>博客教程到此结束。我们希望您喜欢它,并设法 按照你喜欢的方式设置你的博客。还有许多其他功能和 我们在这里无法涵盖的选项。<a href=https://squidfunk.github.io/mkdocs-material/plugins/blog/ >blog plugin reference</a> 为插件提供了全面的文档。您可能还想 查看<a href=../../social/basic/ >social plugin tutorial</a>为您的博客生成社交卡 当你发布链接到社交媒体系统时显示的帖子。</p> </article> </div> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> 回到页面顶部 </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=页脚> <a href=../navigation/ class="md-footer__link md-footer__link--prev" aria-label="上一页: 导航、作者和分页"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> 上一页 </span> <div class=md-ellipsis> 导航、作者和分页 </div> </div> </a> <a href=../../social/basic/ class="md-footer__link md-footer__link--next" aria-label="下一页: 基本社交卡"> <div class=md-footer__title> <span class=md-footer__direction> 下一页 </span> <div class=md-ellipsis> 基本社交卡 </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> Copyright © 2016 - 2025 leafcxy </div> Made with <a href=https://squidfunk.github.io/mkdocs-material/ target=_blank rel=noopener> Material for MkDocs </a> </div> <div class=md-social> <a href=https://github.com/leafcxy target=_blank rel=noopener title=github.com class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> <a href=https://t.me/leafcxybot target=_blank rel=noopener title=telegram class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 496 512"><!-- Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M248 8C111.033 8 0 119.033 0 256s111.033 248 248 248 248-111.033 248-248S384.967 8 248 8m114.952 168.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.45 10.45 0 0 1 3.53 6.716 43.8 43.8 0 0 1 .417 9.769"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <script id=__config type=application/json>{"base": "../../..", "features": ["content.action.edit", "content.action.view", "content.code.annotate", "content.code.copy", "content.tooltips", "navigation.footer", "navigation.indexes", "navigation.sections", "navigation.tabs", "navigation.top", "navigation.tracking", "search.highlight", "search.share", "search.suggest", "toc.follow"], "search": "../../../assets/javascripts/workers/search.d50fe291.min.js", "tags": null, "translations": {"clipboard.copied": "\u5df2\u590d\u5236", "clipboard.copy": "\u590d\u5236", "search.result.more.one": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.more.other": "\u5728\u8be5\u9875\u4e0a\u8fd8\u6709 # \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.none": "\u6ca1\u6709\u627e\u5230\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.one": "\u627e\u5230 1 \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.other": "# \u4e2a\u7b26\u5408\u6761\u4ef6\u7684\u7ed3\u679c", "search.result.placeholder": "\u952e\u5165\u4ee5\u5f00\u59cb\u641c\u7d22", "search.result.term.missing": "\u7f3a\u5c11", "select.version": "\u9009\u62e9\u5f53\u524d\u7248\u672c"}, "version": null}</script> <script src=../../../assets/javascripts/bundle.13a4f30d.min.js></script> <script src=../../../assets/javascripts/custom.9e5da760.min.js></script> <script id=init-glightbox>const lightbox = GLightbox({"touchNavigation": true, "loop": false, "zoomable": true, "draggable": false, "openEffect": "zoom", "closeEffect": "zoom", "slideEffect": "none"}); document$.subscribe(() => { lightbox.reload() }); </script></body> </html>