内容展示优化

首页组件

1.追加样式内容

追加到后面

hadoop 系列教程

2.Vue SFC 组件

我就是 counter 组件

0

3、giscus评论

• 参考链接

步骤如下： 1、登录github，选择仓库，打开discussions模块

2、给仓库安装 安装giscus app，点击安装，然后选择安装到哪个项目

3、配置giscus：打开giscus官网 进行配置

验证仓库，设置后，得到以下代码

<script src="https://giscus.app/client.js"
    data-repo="395784985/my-vitepress-app1"
    data-repo-id="R_kgDOMU0gwg"
    data-category="Announcements"
    data-category-id="DIC_kwDOMU0gws4CgwEd"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="1"
    data-input-position="top"
    data-theme="preferred_color_scheme"
    data-lang="zh-CN"
    data-loading="lazy"
    crossorigin="anonymous"
    async>
</script>

4、配置vitepress

//根据第三步参数，填充一下组件，放入某个页面可看到效果
<giscus-widget
    id="comments"
    repo="395784985/my-vitepress-app1"
    repoid="R_kgDOMU0gwg"
    category="Announcements"
    categoryid="DIC_kwDOMU0gws4CgwEd"
    mapping="pathname"
    term="Welcome to giscus!"
    reactionsenabled="1"
    emitmetadata="0"
    inputposition="top"
    theme="preferred_color_scheme"
    lang="zh-CN"
    loading="lazy">
</giscus-widget>
<script src="https://giscus.app/client.js"
        data-repo="395784985/my-vitepress-app1"
        data-repo-id="R_kgDOMU0gwg"
        data-category="Announcements"
        data-category-id="DIC_kwDOMU0gws4CgwEd"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="1"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

5、全局可用：修改默认主题，的布局，把评论组件放到尾部

首先，在.vitepress目录下的theme目录下创建组件

<!-- Layout.vue -->
<template>
    <Layout>
      <template #doc-after>
        <giscus-widget
            id="comments"
            repo="395784985/my-vitepress-app1"
            repoid="R_kgDOMU0gwg="
            category="Q&A"
            categoryid="DIC_kwDOMU0gws4CgwEf"
            mapping="title"
            term="Welcome to giscus!"
            reactionsenabled="1"
            emitmetadata="0"
            inputposition="top"
            theme="preferred_color_scheme"
            lang="zh-CN"
            loading="lazy">
        </giscus-widget>
      </template>
    </Layout>
  </template>
  
  <script lang="ts" setup>
  import DefaultTheme from "vitepress/theme";
  const { Layout } = DefaultTheme;
  </script>

然后，在.vitepress目录下的theme目录下的index.js文件配置layout

import DefaultTheme from 'vitepress/theme'
import CommentLayout from './CommentLayout.vue'

export default {
  extends: DefaultTheme,
  // 使用注入插槽的包装组件覆盖 Layout
  Layout: CommentLayout
}