VitePress 深入学习

vitepress 快速入门

vitepress 深入学习

vitepress 部署上线

vitepress 入门教程

vitepress 入门到精通

vitepress 从0到1开始

vitepress 实战教程

一、VitePress 搜索/全文检索

https://vitepress.dev/zh/reference/default-theme-search

1. 本地搜索 minisearch

import { defineConfig } from 'vitepress'

export default defineConfig({
  themeConfig: {
    search: {
      provider: "local",
      options: {
        miniSearch: {
          options: {
            /* ... */
          },
          searchOptions: {
            /* ... */
          },
        },
        translations: {
          button: {
            buttonText: "搜索文档",
            buttonAriaLabel: "搜索文档",
          },
          modal: {
            noResultsText: "没有找到结果",
            resetButtonTitle: "清除搜索条件",
            footer: {
              selectText: "选择",
              navigateText: "切换",
              closeText: "关闭",
            },
          },
        },
      },
    },
  }
})

2. 本地搜索 vitepress-plugin-search

https://www.npmjs.com/package/vitepress-plugin-search

npm i vitepress-plugin-search flexsearch -D

import { SearchPlugin } from "vitepress-plugin-search";

export default defineConfig({
  title: "李钟意讲前端",
  srcDir: "src",
  vite: {
    plugins: [
      SearchPlugin({
        previewLength: 80, // 这个选项决定了搜索结果预览的长度，单位是字符数
        buttonLabel: "搜索", // 这个选项可以用来改变搜索按钮的标签
        placeholder: "搜索文档", // 这个选项可以用来设置搜索输入框的占位符
        allow: [], // 这是一个数组，你可以在这个数组中指定哪些页面可以被搜索
        ignore: [], // 这也是一个数组，你可以在这个数组中指定哪些页面不被搜索
      }),
    ],
  },
});

2. Algolia Search

https://vitepress.dev/zh/reference/default-theme-search#algolia-search

二、VitePress 静态资源

/public/ 目录 默认为静态资源

假如文件在 /public/interview/2023-07-16-前端框架.docx 目录，你可以这么去写代码实现下载静态资源

<a href="/interview/2023-07-16-前端框架.docx" target="_blank" download>
  2023-07-16-前端框架.docx
</a>

点击我下载静态资源文件：2023-07-16-前端框架.docx

三、VitePress 如何使用 Vue3

https://vitepress.dev/zh/guide/using-vue

1. hello.md 直接使用 Vue

hello.md

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

计数是: {{ count }}

<button :class="$style.button" @click="count++">点击计数+1</button>

<style module>
.button {
  color: #000;
  font-weight: bold;
  background: #f2f2f2;
  padding: 6px 16px;
  border-radius: 4px;
  min-width: 120px;
  transition: all ease 0.1s;
}
.button:hover {
  background: rgba(0,0,0,0.1);
}
</style>

效果：

计数是: 0

2. hello.md 引入单文件组件

有一个单文件组件 TextWrapperEffect.vue 是一个实现多行文本展开收起功能，组件内容如下：

TextWrapperEffect.vue

<template>
  <div v-show="text" class="content">
    <div class="text" :class="{ isExpanded }">
      <label class="btn" @click="expandText" v-if="!isExpanded && showExpanded"
        >展开</label
      >
      <span>
        {{ text }}
        <label class="btn" @click="expandText" v-if="isExpanded && showExpanded"
          >收起</label
        >
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  text: { type: String, default: "" }, // 显示的文案
  defaultExpanded: { type: Boolean, default: false }, // 默认展开、或者收起
  showExpanded: { type: Boolean, default: true }, // 是否开启展开或者收起功能
});

const isExpanded = ref(props.defaultExpanded);

const expandText = () => {
  isExpanded.value = !isExpanded.value;
};

defineExpose({ isExpanded, expandText });
</script>

<style scoped>
.content {
  display: flex;
}

.content .text {
  word-break: break-all;
}
.content .text::before {
  content: "";
  float: right;
  height: 100%;
  margin-bottom: -1.5em;
}

.content .text:not(.isExpanded) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: var(--custom-line-clamp, 3);
  -webkit-box-orient: vertical;
}

.content .text:not(.isExpanded) .btn {
  float: right;
  clear: both;
  margin-right: 8px;
  cursor: pointer;
}

.content .text .btn {
  color: dodgerblue;
}
</style>

在组件中引入 TextWrapperEffect.vue 组件

<script setup>
import TextWrapperEffect from "./TextWrapperEffect.vue";

const textContent = `前端开发不仅仅是编写代码，还包括用户体验的设计、界面的美观与实用性等。每一个功能模块的背后，都有无数次的设计和调整。随着现代浏览器的发展，Web 技术也在不断更新，从 HTML5 到 CSS3，从 ES6 到如今的 Vue、React 等前端框架，每一个技术的更新都在推动着前端的发展。而开发者不仅要掌握这些新技术，还需要不断学习，以应对复杂的项目需求。`;
</script>

引入 Vue 组件

<TextWrapperEffect :text="textContent" />

效果：

引入 Vue 组件

展开前端开发不仅仅是编写代码，还包括用户体验的设计、界面的美观与实用性等。每一个功能模块的背后，都有无数次的设计和调整。随着现代浏览器的发展，Web 技术也在不断更新，从 HTML5 到 CSS3，从 ES6 到如今的 Vue、React 等前端框架，每一个技术的更新都在推动着前端的发展。而开发者不仅要掌握这些新技术，还需要不断学习，以应对复杂的项目需求。

注意

一个 markdwon 页面中仅允许有一个 <script setup> ... </script>，多个组件引入可以写在一个 script 中。

四、VitePress 自定义主题

https://vitepress.dev/zh/guide/custom-theme

五、VitePress 图片预览

https://www.npmjs.com/package/medium-zoom

图片懒加载 https://vitepress.dev/zh/guide/markdown#image-lazy-loading

六、VitePress 自定义 Tabs

### 语法：

**演示效果：**

:::tabs

=== tab 页签标题 2

内容区域 1

内容区域 2

内容区域 3

=== tab 页签标题 1

内容区域 4

内容区域 5

内容区域 6

:::

语法：

演示效果：

内容区域 1

内容区域 2

内容区域 3

七、VitePress 自定义右下角广告位