[toc]

VitePress笔记2

目前最新的vitepress版本为 1.6.3

样式美化

当我们在创建vitepress项目中选择了默认+自定义的主题配置时。vitepress会自动在.vitepress目录中创建theme目录。如图所示。

如果想要美化vitepress的样式，就需要修改theme目录下的index.js文件和index.css文件。

h1标题颜色

我们可以全局修改h1标题的颜色。

CSS

/* .vitepress/theme/index.css */

/* 给h1标题弄个渐变颜色 */
.VPDoc h1 {
  background: -webkit-linear-gradient(10deg, #bd34fe 5%, #e43498 15%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

给首页的feature添加悬停效果

css

/* .vitepress/theme/index.css */

/* VPFeatures 页卡悬浮效果 */
.VPFeatures .items .item {
  transition: transform 0.3s;
}

.VPFeatures .items .item:hover {
  transform: translateY(-5px);
}

引用颜色

在Markdown中，常用的引用符号是 >，我们可以给这个符号添加一些样式。

css

/* .vitepress/theme/index.css */

.vp-doc blockquote {
    border-radius: 10px;
    padding: 18px 20px 20px 15px;
    position: relative;
    background-color: var(--vp-c-gray-soft);
    border-left: 6px solid var(--vp-c-green-2);
}

导航栏毛玻璃效果

css

/* .vitepress/theme/index.css */

:root {
    /* 首页下滑后导航透明 */
    .VPNavBar:not(.has-sidebar):not(.home.top) {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    /* 搜索框透明 */
    .DocSearch-Button {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    /* Feature透明 */
    .VPFeature {
        border: 1px solid transparent;
        box-shadow: 0 10px 30px 0 rgb(0 0 0 / 15%);
        background-color: transparent;
    }

    /* 文档页侧边栏顶部透明 */
    .curtain {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

    @media (min-width: 960px) {

        /* 文档页导航中间透明 */
        .VPNavBar:not(.home.top) .content-body {
            background-color: rgba(255, 255, 255, 0);
            backdrop-filter: blur(10px);
        }
    }

    /* 移动端大纲栏透明 */
    .VPLocalNav {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
    }

}

配置插件

/* .vitepress/config.js */
import { defineConfig } from 'vitepress'
import demoPlugin from '@vitepress-demo-preview/plugin'

export default defineConfig({
  // ...
  plugins: [
    demoPlugin({
      // 配置选项
    })
  ]
})

组件

在这里组件通常是指一个将HTML、CSS以及JavaScript封装的 *.vue 文件。使用组件之前，我们需要先安装一下vue。

npm i vue

组件的使用

① 创建一个组件。Mycomponent.vue

html

<script setup>
// 这里是JavaScript
</script>

<template>
<!-- 这里是HTML -->
</template>

<style>
/* 这里是CSS */
</style>

② 在.vitepress/theme/index.js文件中将这个组件注册为全局组件。

import Mycomponent from "./components/Mycomponent.vue"

export default {
  extends: DefaultTheme,
  enhanceApp({app}) { 
    // 注册全局组件
    app.component('Mycomponent' , Mycomponent)
  }
}

③ 使用组件

当组件注册为全局组件后，我们就可以在任何页面中使用它了。

例如在首页index.md中使用。


# 一级标题

## 二级标题

### 在markdown中使用组件

<Mycomponent/>

布局插槽

Vitepress基于Vue3用到了<slot/>插槽，在<Layout/>布局组件中预留了一些插槽，可以对页面布局进行自定义修改。

插槽与组件的区别

插槽：在页面中有固定的孔位，适用于需要频繁显示的内容，比如：广告
组件：在页面中无固定的孔位，适用于单次或少次显示内容，比如：视频播放

插槽表

不同的页面，可使用的插槽不同。下面是常用的几种插槽。更多的插槽请去官网查询。

所有布局都可以使用的插槽如图所示。

当 md文件中的 Frontmatter 配置 layout: home 时插槽及位置。如图所示

当 md文件中的 Frontmatter 配置 layout: doc 时插槽及位置。如图所示

当 Frontmatter 配置 layout: page 时插槽及位置。如图所示

除此之外还有一个not-found插槽。当页面不存在时，会使用这个插槽。如图所示

当layout设置为不同的值的时候，该md文件转换为html的时候，vitepress会给该html页面添加不同的插槽区域。

例如md文件中的formatter的layout: doc配置项，会在对应的html文件中有对应的插槽区域。

另外，插槽是全局生效的。也就是说，当你使用一个组件绑定"doc-top"插槽的时候，vitepress会给所有使用这个插槽的html页面添加上这个组件。

如果你想这个组件单独给某一个页面使用，而不是全局使用，你可以直接在md文件中导入该组件。而不是使用插槽的方式去间接导入到页面中。

使用方式

布局插槽有两种使用方式

Layout 赋值: 直接写在Layout组件中。
h函数渲染: 写在配置文件中。

Layout 赋值 - 方式1

① 创建一个组件 Mycomponent.vue ，并在组件中使用插槽

html

<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
const { Layout } = DefaultTheme
</script>

<template>
    <Layout>
        <!-- 使用aside-outline-before插槽 --> 
        <template #aside-outline-before>
          <!-- 这里写内容，下面是一个简单示例 -->
          <div>我是aside-outline-before</div>
        </template>
    </Layout>
</template>

<style>
</style>

② 在.vitepress/theme/index.js文件中引入组件。

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'

import MyComponent from './components/MyComponent.vue' // 导入组件

export default {
  extends: DefaultTheme,
  Layout: MyComponent, // 应用组件
}

此次自定义组件会代替默认的Layout组件。但是这样只能单个使用，不适用组件多的情况

Layout 赋值 - 方式2

这种方式适合组件多的情况

① 新建一个 MyLayout.vue 布局组件。并且在MyLayout.vue中引入其他组件。

html

<!-- MyLayout.vue -->
<script setup lang="ts">
import DefaultTheme from 'vitepress/theme'
// 组件1、2、3
import MyComponent from "./MyComponent.vue";
import MyComponent2 from "./MyComponent2.vue";
import MyComponent3 from "./MyComponent3.vue";
</script>

<template>
  <DefaultTheme.Layout v-bind="$attrs">
    <!-- doc-footer-before插槽1个组件 -->
    <template #doc-footer-before>
      <MyComponent />
    </template>
    <!-- layout-top插槽2个组件 -->
    <template #layout-top>
      <MyComponent2 />
      <MyComponent3 />
    </template>
  </DefaultTheme.Layout>
</template>

<style scoped>
</style>

② 在.vitepress/theme/index.js文件中引入组件。

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import MyLayout from './components/MyLayout.vue' // 导入布局组件

export default {
  extends: DefaultTheme,
  Layout: MyLayout, // 应用布局组件
}

MyLayout组件会代替默认的Layout组件。

h函数

由于h函数是Vue渲染层的底层 API，不需要写入<slot/>插槽。因此可以直接导入现成的vue组件，在 .vitepress/theme/index.js文件中引入生效

// .vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { h } from 'vue' // h函数
// 组件1、2、3、4
import MyComponent from "./MyComponent.vue";
import MyComponent2 from "./MyComponent2.vue";
import MyComponent3 from "./MyComponent3.vue";
import MyComponent3 from "./MyComponent4.vue";

export default {
  extends: DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {

      // 指定组件使用aside-outline-before插槽
      'aside-outline-before': () => h(MyComponent),

      // 指定组件使用doc-before插槽
      'doc-before': () => h(MyComponent2),

      // 指定多个组件同时使用layout-top插槽
      'layout-top': () => [
        h(MyComponent3),
        h(MyComponent4),
        ],
    })
  }
}

运行时API

VitePress 提供了几个内置的 API 来让你可以访问应用程序数据。VitePress 还附带了一些可以在全局范围内使用的内置组件。

`<Content/>` 组件

<Content/> 组件可以直接显示渲染的 md 内容。

代码示例如下

html

<!-- blog.vue -->
<template>
  <h1>Custom Layout!</h1>
  <content />
</template>

useRouter 路由

vitepress内置了一个简单的路由。在自定义的页面中可以使用路由跳转到其他页面。

例子

html

<script setup>
//引入vitepress内置的路由等
import { useRouter,useRoute } from 'vitepress'
const router = useRouter();
const route = useRoute();

//点击跳转到文章分类页面
function toCategory(categoryName){
  router.go('/pages/views/ArticleCategory?name='+categoryName)
}
//点击跳转到文章标签页面
function toTag(tagName){
  router.go('/pages/views/ArticleTag?name='+tagName)
}
</script>

useData 全局数据

当你在config.mjs中自定义某个属性。

export default {
  themeConfig:{
    docCount:10,  //自定义docCount属性
  }
}

你可以在组件中使用useData函数获取全局数据。

import { useData } from 'vitepress'
const { theme } = useData()
const docCount: number = theme.value.docCount; // 自定义属性

统计所有md文件中的formatter数据

假如你想获取某个目录中所有md文件中的formatter数据。代码示例如下

import { createContentLoader } from 'vitepress'

//统计blogs目录中的所有md文件中的各个数据
export default createContentLoader("blogs/**/*.md", {
    transform(raw){
        //定义blogData对象
        const blogData = {
            articles: [],           //所有的文章数据
            tags: [],               //所有的标签数据,及其标签对应的文章数量
            categories: [],         //所有的分类数据,及其分类对应的文章数量
            tagsSumCount:0,         //所有的标签数据的总数
            categoriesSumCount:0,   //所有的分类数据的总数
            articlesSumCount:0,     //所有的文章数据的总数
        };
        //遍历raw数组
        raw.forEach(({ url, frontmatter }) => {
            //若md文件存在frontmatter
            if(frontmatter){
                // 标签
                if (frontmatter.tags) {
                    frontmatter.tags.forEach((tag) => {
                        let existingTag = blogData.tags.find(t => t.name === tag);
                        if (existingTag) {
                            existingTag.count++;
                        } else {
                            blogData.tags.push({
                                name: tag,
                                count: 1
                            });
                        }
                    });
                }
                // 分类
                if (frontmatter.categories) {
                    frontmatter.categories.forEach((category) => {
                        let existingCategory = blogData.categories.find(c => c.name === category);
                        if (existingCategory) {
                            existingCategory.count++;
                        } else {
                            blogData.categories.push({
                                name: category,
                                count: 1
                            });
                        }
                    });
                }
                //组装文章数据
                blogData.articles.push({
                    title: frontmatter.title,           //文章标题
                    tags: frontmatter.tags,           //文章标签
                    categories: frontmatter.categories,   //文章分类
                    url,                                   //文章url
                    date: frontmatter.date,             //文章创建日期
                    lastUpdated: frontmatter.lastUpdated, //文章最后更新日期
                    metadata:frontmatter,               //文章的元数据
                });
            }
        });
        //标签总数
        blogData.tagsSumCount = blogData.tags.length;
        //分类总数
        blogData.categoriesSumCount = blogData.categories.length;
        //文章总数
        blogData.articlesSumCount = blogData.articles.length;
        //对blogData.articles数据按照日期进行降序排序
        blogData.articles.sort((a, b) => b.date - a.date);
        //返回blogData对象
        return blogData;
    },
});

vitepress集成gitalk评论插件

VitePress 是一个静态站点生成器 (SSG)，非常适合用于个人博客或编写技术文档。但是它缺少一个重要的功能(评论功能)。

我们可以自行集成评论功能。目前有多种集成方式。如下所示。

评论插件	说明
Valine	不用登录账号即可评论，但容易产生垃圾评论，其次没有评论提醒通知。
Waline	是Valine的升级版，登录后方可评论，有通知，但是需要自己部署服务端。
Twikoo	不用登录账号即可评论，但容易产生垃圾评论，有通知，但是需要自己部署服务端。
Artalk	可设置是否启用登录账号后评论，有通知，但是需要自己部署服务端。
utteranc	GitHub登录后方可评论，评论数据在 GitHub issues 中，评论后有邮件通知，无需部署服务端，但UI样式一般，且移动端不显示头像。
gitalk	GitHub登录后方可评论，评论数据在 GitHub issues 中，评论后有邮件通知，无需部署服务端，UI样式一般，评论不支持点赞。
Giscus	GitHub登录后方可评论，评论数据在 GitHub Discussions 中，评论后有邮件通知，无需部署服务端。

目前我选择的评论系统是gitalk。因为它的实现方式简单。

gitalk实现留言功能的原理

gitalk需要登陆github账户，每次评论相当于在github仓库中发issues，利用github仓库的issues来存放和管理每个用户的评论。然后gitalk就会到指定仓库上获取issues来显示到页面上，以达到评论和显示他人评论的目的。

因此需要先在github上完成OAuth应用的注册，然后下载gitalk组件库到vitepress工程项目中，最后就是在页面中用代码显示gitalk评论栏与实现功能。

创建一个github仓库

我们需要创建一个新的 Github 仓库，用于存储评论信息（以 Issue 的形式进行存储）。

如果 vitepress 项目本身就存储在一个 Github 仓库里，我们也可以直接将该仓库作为存储评论信息的仓库，就不用额外创建一个新的仓库了。

注册 Github OAuth application

我们需要在github 中创建一个 Oauth 应用，获取到 ClientId 和 Client Secret数据。这两个会在后续集成 gitalk 插件的时候会用到。

登录github,点击头像，然后选择 setting。

在左侧菜单中，找到 Developer settings 并点击。

选择 Oauth Apps，点击按钮，进入到注册页面。

填写Oauth应用信息

Application name：应用名称。
Homepage URL：站点主页 URL，例如 https://yourblog.com。
Application description：应用描述。
Authorization callback URL：一般与 Homepage URL 相同。如果你的 vitepress 项目部署在仓库的某个子路径下，那么需要填写完整路径，例如 https://yourblog.com/path/....。
Enable Device Flow：是否允许 OAuth 应用通过设备流来授权用户。

提交信息

点击按钮之后会得到一个 ClientId 和 Client Secret。如果 Client Secret 没有自动生成，页面会显示生成该值的按钮，你可以手动点击按钮进行生成。

注意：离开或刷新页面之后，Client Secret 不会再次显示，因此你需要提前保存它。若忘记，只能重新生成。

开始集成Gitalk

安装 Gitalk 插件库

bash

npm i --save gitalk

创建 Gitalk 配置文件

例如在vitepress项目中创建 gitalk.js 文件，添加以下内容。

import Gitalk from 'gitalk';
import 'gitalk/dist/gitalk.css';

export default function createGitalk(path) {
    const gitalk = new Gitalk({
        clientID: 'GitHub Application Client ID',   //填入你的ClientID
        clientSecret: 'GitHub Application Client Secret', //填入你的ClientSecret
        repo: '仓库名',                 //填写你的vitepress所在的仓库名
        owner: '填写你的 Username',     //填写你的github用户名
        admin: ['填写管理员的 Username'],
        id: path,      // 确保唯一性和长度小于 50
        distractionFreeMode: false  // 类似 facebook 的无干扰模式
    });
    gitalk.render('gitalk-container');
}

我们可以在某个页面中，引入 gitalk.js 文件。将评论展示在页面中。

例如在某个vue页面中，代码如下所示。

html

<template>
  <div id="gitalk-container"></div>
</template>

<script setup>
import {watch, nextTick, onMounted} from "vue";
import "gitalk/dist/gitalk.css";
import {useRouter} from "vitepress";
import createGitalk from "./gitalk.js";

let {route} = useRouter(); // 页面路由对象

// 初始化 Gitalk
const initGitalk = () => {
  if (typeof window !== 'undefined') {
    const container = document.getElementById('gitalk-container');
    if (container) {
      container.innerHTML = '';
      //获取页面当前path的末尾的字符串，传入到createGitalk方法中
      let path_end_str = route.path.split("/").pop();
      createGitalk(path_end_str);
    }
  }
};

onMounted(() => {
  // 初次加载时初始化 Gitalk
  initGitalk();
  // 监听路由变化
  watch(
      () => route.path,
      (newPath) => {
        nextTick(() => {
          initGitalk();
        });
      }
  );
});
</script>
<style scoped>
</style>

问题

由于Gitalk 使用了亚马逊的云服务代理里这个接口https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token

这个地址被墙了,意味着代理接口无法访问了，要么自己买服务器重写代理接口，要么科学上网。

vitepress集成Giscus评论插件

Giscus 是一个基于 GitHub Discussion 的评论系统。

Github中安装 Giscus 应用

登录GitHub官网,访问这个链接https://github.com/apps/giscus,点击 Install 安装Giscus应用插件到Github中

Only select repositories。即指定一个仓库用于存储讨论数据。点击安装按钮。这样就把Giscus安装到这个仓库上了。

注意：选中的仓库必须是公开的，私有的不行。

打开仓库的Giscus配置

进入到选中的仓库，点击设置 -> General -> 勾选Features中的discussions

这样设置之后giscus会把评论数据都放到讨论 discussions 中。

设置 Giscus

进入到Giscus官网，输入自己的仓库链接。

进入Giscus官网https://giscus.app/zh-CN。输入自己的仓库链接，满足条件会提示可用

选择Discussion分类。勾选懒加载评论。

类别	中文	说明
Announcements	公告	每次评论都会推送所有人
General	常规	开放式讨论
Ideas	想法	开放式讨论
Polls	投票	可投票与讨论
Q&A	问答	问答形式
Show and tell	展示和说明	开放式讨论

生成脚本

当上面步骤完成之后。Giscus官网会生成脚本。我们需要将该脚本复制到页面中。

代码中使用 Giscus

可以选择安装Giscus组件库。推荐下面这个。也可以自己封装上面的js脚本数据。

npm i @giscus/vue

新建组件。并添加giscus评论的页面样式

html

<template>
    <div class="panel">
        <div class="container">
            <div class="welcome-text">
                🎉🎉🎉🎉🎉🎉🎉 
                欢迎大家在此留下你的建议和意见，或者在 
                <a href="https://github.com/suichentree/suichentree.github.io" 
                   target="_blank" 
                   rel="noopener noreferrer">
                    GitHub
                </a> 
                提交你的留言信息。
                🎉🎉🎉🎉🎉🎉🎉
            </div>
             <div style="margin-top: 2rem">
              <Giscus
                id="comments"
                :key="route.path"
                repo="suichentree/suichentree.github.io"
                repo-id="R_kgDOPXXXXX"
                category="Announcements"
                category-id="DIC_kwDOXXXXXXX"
                mapping="pathname"
                strict="1"
                term="请不吝赐教!"
                reactions-enabled="1"
                emit-metadata="0"
                input-position="top"
                lang="zh-CN"
                loading="lazy"
                :theme="isDark ? 'dark_tritanopia' : 'light_tritanopia'"></Giscus>
            </div>
        </div>
    </div>
</template>
<script setup>
import Giscus from '@giscus/vue'
import { watch } from 'vue'
import { inBrowser, useData, useRoute } from 'vitepress'

const { isDark } = useData()
const route = useRoute()

watch(isDark, (dark) => {
  if (!inBrowser) return
  const iframe = document.querySelector('giscus-widget')?.shadowRoot?.querySelector('iframe')
  iframe?.contentWindow?.postMessage(
    { giscus: { setConfig: { theme: dark ? 'dark_tritanopia' : 'light_tritanopia' } } },
    'https://giscus.app'
  )
})
</script>
<style scoped>
.panel {
    margin: 20px;
}
.container {
    border-radius: 10px;
    width: 100%;
    max-width: 1152px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid var(--vp-c-border);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.welcome-text {
    text-align: center;
    border-left: 10px solid var(--vp-c-brand);
    border-right: 10px solid var(--vp-c-brand);
}
.welcome-text a {
    color: var(--vp-c-brand);
    font-weight: 600;
}
</style>

将组件应用博客页面中。参考组件使用方式。效果图如下所示

vitepress 使用百度统计

网站的数据分析至关重要，而百度统计可以为我们提供丰富的网站访问数据和洞察。

获取百度统计代码

登录百度统计

登录百度统计官网 https://tongji.baidu.com/，使用自己的账号登录。

创建站点

登录后，点击使用设置 -> 网站列表 -> 新增站点。填写需要进行统计的网站信息等。注意域名要写对，其它信息不重要。

获取统计代码

在代码获取页面，找到“统计代码”，将提供的统计代码复制到自己的网站代码中。

在 vitePress 中集成百度统计代码

在VitePress配置文件中head配置中放百度统计代码块。

在.vitepress/config.mjs配置文件中添加百度统计代码。

import { defineConfig } from 'vitepress'
export default defineConfig({
  //网站head中加入标签
    head: [    
        ['script', {}, `var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?xxxxxxxxx";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();`]
    ],
})

配置路由监听

因VitePress是单页面应用，需要在路由监听事件才能统计到每个页面的点击。需要在.vitepress/theme/index.js中添加路由监听代码。

import DefaultTheme from 'vitepress/theme';
export default {
    extends: DefaultTheme,
    enhanceApp({app, router}) {
        // 单页面应用路由更新时触发百度统计事件
        router.onBeforeRouteChange = (to) => {
            if (typeof _hmt !== 'undefined') {
                _hmt.push(['_trackPageview', to]);
            }
        }
    }
}

统计验证

当上面步骤完成之后，将vitepress项目打包到线上服务器，然后刷新页面，打开浏览器控制台，查看是否有报错。如果没有报错，说明配置成功。

然后可以通过百度统计的后台查看数据是否有正常的收集。

插件

下面是一些比较好用的插件

不蒜子统计插件 - busuanzi.pure.js库

浏览量插件使用的是不蒜子，免费的且足够好用。

下载不蒜子库

npm install busuanzi.pure.js

在.vitepress/theme/index.js中引入

// .vitepress/theme/index.js
import DefaultTheme from 'vitepress/theme'

import { inBrowser } from 'vitepress'
import busuanzi from 'busuanzi.pure.js'

export default {
  extends: DefaultTheme,

  enhanceApp({ app , router }) {
    if (inBrowser) {
      router.onAfterRouteChanged = () => {
        busuanzi.fetch()
      }
    }
  },
}

然后直接在任何一个页面中引入下面代码即可使用。注意本地开发出现数字就算成功，等你部署后会显示正确的数值

html

本站总访问量 <span id="busuanzi_value_site_pv"/> 次
本站访客数 <span id="busuanzi_value_site_uv"/> 人次

禁用F12插件 - vitepress-protect-plugin库

下载

npm install vitepress-protect-plugin

在 config.mjs 中配置，不用的功能不配置即可

import { defineConfig } from "vitepress"
import vitepressProtectPlugin from "vitepress-protect-plugin"

export default defineConfig({
  // other VitePress configs...
  vite: {
    plugins: [
      vitepressProtectPlugin({
        disableF12: true, // 禁用F12开发者模式
        disableCopy: true, // 禁用文本复制
        disableSelect: true, // 禁用文本选择
      }),
    ],
  },
})

看板娘插件 - vitepress-theme-website库

看板娘其实就是在首页右下角有个二次元的人物，类似电子宠物。

先下载看板娘库

npm install vitepress-theme-website

在.vitepress/theme/index.js中引入

import DefaultTheme from 'vitepress/theme'

// 看板娘插件
import { useLive2d } from 'vitepress-theme-website'

export default {
  extends: DefaultTheme,

  setup() {
    //引入看板娘
    useLive2d({
      enable: true,
      model: {
        url: 'https://raw.githubusercontent.com/iCharlesZ/vscode-live2d-models/master/model-library/hibiki/hibiki.model.json'
      },
      display: {
        position: 'right',
        width: '135px',
        height: '300px',
        xOffset: '35px',
        yOffset: '5px'
      },
      mobile: {
        show: true
      },
      react: {
        opacity: 0.8
      }
    })
  }
}

切换路由进度条 - nprogress-v2库

当你切换页面，顶部会显示进度条，类似github的进度条。

下载

npm install nprogress-v2

在.vitepress/theme/index.js中引入

import { NProgress } from 'nprogress-v2/dist/index.js' // 进度条组件
import 'nprogress-v2/dist/index.css' // 进度条样式

if (inBrowser) {
      NProgress.configure({ showSpinner: false })
      router.onBeforeRouteChange = () => {
        NProgress.start() // 开始进度条
      }
      router.onAfterRouteChanged = () => {
         busuanzi.fetch()
         NProgress.done() // 停止进度条
      }
}

图片预览放大插件 - vitepress-plugin-image-viewer库

在vitepress中，markdown文章中的图片默认是不支持图片预览放大的。但是我们可以通过插件来实现这个功能。

安装插件

bash

# npm 
npm i vitepress-plugin-image-viewer

# pnpm 提示：如果使用 pnpm 安装，还需要额外安装 viewerjs
pnpm add vitepress-plugin-image-viewer
pnpm add viewerjs

在.vitepress/theme/index.js文件中引入插件。

//引入图片预览组件
import imageViewer from 'vitepress-plugin-image-viewer'
import vImageViewer from 'vitepress-plugin-image-viewer/lib/vImageViewer.vue'
import { useRoute } from 'vitepress';

export default {
  extends: DefaultTheme,
  async enhanceApp({ app, router, siteData }) {
    //...............
    // 全局注册图片预览组件
    app.component('vImageViewer', vImageViewer)
  },
  setup() {
    //...............
    // 使用图片预览插件（先获取路由）
    const route = useRoute();
    imageViewer(route);
  },
}

VitePress笔记2 ​

样式美化 ​

h1标题颜色 ​

给首页的feature添加悬停效果 ​

引用颜色 ​

导航栏毛玻璃效果 ​

配置插件 ​

组件 ​

组件的使用 ​

布局插槽 ​

插槽表 ​

使用方式 ​

Layout 赋值 - 方式1 ​

Layout 赋值 - 方式2 ​

h函数 ​

运行时API ​

<Content/> 组件 ​

useRouter 路由 ​

useData 全局数据 ​

统计所有md文件中的formatter数据 ​

vitepress集成gitalk评论插件 ​

创建一个github仓库 ​

注册 Github OAuth application ​

开始集成Gitalk ​

问题 ​

vitepress集成Giscus评论插件 ​

Github中安装 Giscus 应用 ​

设置 Giscus ​

代码中使用 Giscus ​

vitepress 使用百度统计 ​

获取百度统计代码 ​

在 vitePress 中集成百度统计代码 ​

统计验证 ​

插件 ​

不蒜子统计插件 - busuanzi.pure.js库 ​

禁用F12插件 - vitepress-protect-plugin库 ​

看板娘插件 - vitepress-theme-website库 ​

切换路由进度条 - nprogress-v2库 ​

图片预览放大插件 - vitepress-plugin-image-viewer库 ​

VitePress笔记2

样式美化

h1标题颜色

给首页的feature添加悬停效果

引用颜色

导航栏毛玻璃效果

配置插件

组件

组件的使用

布局插槽

插槽表

使用方式

Layout 赋值 - 方式1

Layout 赋值 - 方式2

h函数

运行时API

`<Content/>` 组件

useRouter 路由

useData 全局数据

统计所有md文件中的formatter数据

vitepress集成gitalk评论插件

创建一个github仓库

注册 Github OAuth application

开始集成Gitalk

问题

vitepress集成Giscus评论插件

Github中安装 Giscus 应用

设置 Giscus

代码中使用 Giscus

vitepress 使用百度统计

获取百度统计代码

在 vitePress 中集成百度统计代码

统计验证

插件

不蒜子统计插件 - busuanzi.pure.js库

禁用F12插件 - vitepress-protect-plugin库

看板娘插件 - vitepress-theme-website库

切换路由进度条 - nprogress-v2库

图片预览放大插件 - vitepress-plugin-image-viewer库