封面来源

Anmi

注意

该主题作者后续会添加评论功能
博主只是利用giscus第三方部署
别忘了去giscus项目点个⭐
请修改前做好备份，以便后续升级

总的来说，giscus的部署还是很方便的
通过选择你的配置后生成一小段代码
将这段 <script>标签 插入到你想让评论出现的位置即可

giscus配置#

1. 访问giscus配置页面

2. 选择你想要显示的语言

   

3. 创建一个符合要求的仓库

   

分别点击蓝色字体，可直接跳转到相关设置页面
在满足上述3点要求后，输入你的[用户名/仓库名]
才会显示 成功!该仓库满足所以条件

4. 页面 ↔️ discussion 映射关系

无其他需求的话，默认即可

5. Discussion 分类

同样的，无其他需求的话，默认即可

6. 特性

按需选择即可
推荐勾选上 将评论框放在评论上方 方便用户发表评论
懒加载看情况进行选择，我这里就没选

7. 主题

默认即可
但对于经常切换白天/黑暗模式的用户来说可能不是很友好
博主这里选择的是 用户偏好的色彩方案
白天模式中很正常，但切换到黑暗模式后
giscus仍保持白色，很突兀
这点博主暂时还没查找有关资料

8. 插入代码 按照顺序配置好后
   下方会自动生成

<script src="https://giscus.app/client.js"
        data-repo="AULyPc/aulypc.github.io"
        data-repo-id="xxxxxxxxxx"
        data-category="Announcements"
        data-category-id="xxxxxxxxxxx"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

注意

博主使用的是astro框架&fuwari主题
其他框架及主题的插入位置，请根据自身配置

友链页面#

如果你还没在fuwari上创建友链页面的话
请看博主前几天发的文章
如果已经创建好，请在 src\pages\friends.astro 文件中修改
直接插入最后一行上方即可

            <Markdown class="mt-2">
                <Content />
            </Markdown>
        </div>
    </div>

<!-- giscus评论 -->
<script src="https://giscus.app/client.js"
        data-repo="AULyPc/aulypc.github.io"
        data-repo-id="xxxxxxxxx"
        data-category="Announcements"
        data-category-id="xxxxxxxxxxxx"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

</MainGridLayout>

文章页面#

找到 src\pages\posts\[...slug].astro 文件
在 </MainGridLayout> 行上方添加即可

                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
            </div>}
        </a>
    </div>

<script src="https://giscus.app/client.js"
    data-repo="AULyPc/aulypc.github.io"
    data-repo-id="xxxxxxxxxxx"
    data-category="Announcements"
    data-category-id="xxxxxxxxxxxxx"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="top"
    data-theme="preferred_color_scheme"
    data-lang="zh-CN"
    crossorigin="anonymous"
    async>
</script>

</MainGridLayout>

<style is:global>
#post-container :nth-child(1) { animation-delay: calc(var(--content-delay) + 0ms) }
#post-container :nth-child(2) { animation-delay: calc(var(--content-delay) + 50ms) }
#post-container :nth-child(3) { animation-delay: calc(var(--content-delay) + 100ms) }
#post-container :nth-child(4) { animation-delay: calc(var(--content-delay) + 175ms) }
#post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) }
#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) } 
</style>

其它页面#

其它页面例如关于、归档等页面，这里也不多赘述
方法是一样的
以上