其他配置

搜索

local 本地搜索

config.mts

export default defineConfig({
	// 主题配置
	themeConfig: {
		search: {
			provider: 'local',
			options: {
				translations: {
					button: {
						buttonText: '搜索文档',
						buttonAriaLabel: '搜索文档',
					},
					modal: {
						noResultsText: '无法找到相关结果',
						resetButtonTitle: '清除查询条件',
						displayDetails: '显示详情',
						backButtonTitle: '返回',
						footer: {
							selectText: '选择',
							navigateText: '切换',
							closeText: '关闭',
						},
					},
				},
			},
		},
	},
});

algolia 搜索

1. 在该网站填写内容后发送申请 https://docsearch.algolia.com/apply/

   

2. 发送后等待邮箱收到邮件

3. 收到后回复邮件，告诉自己就是网站的维护者，并且可以修改代码。例如：

   I am the maintainer of the website,I can modify the code

4. 等待一段时间后，你会收到包含 AppId 等所需信息的邮件

5. 在 docs/.vitepress/config.js 文件下添加相关信息即可

   config.mts

   export default defineConfig({
   	themeConfig: {
   		search: {
   			provider: 'algolia',
   			options: {
   				appId: '...',
   				apiKey: '...',
   				indexName: '...',
   				locales: {
   					zh: {
   						placeholder: '搜索文档',
   						translations: {
   							button: {
   								buttonText: '搜索文档',
   								buttonAriaLabel: '搜索文档',
   							},
   							modal: {
   								searchBox: {
   									resetButtonTitle: '清除查询条件',
   									resetButtonAriaLabel: '清除查询条件',
   									cancelButtonText: '取消',
   									cancelButtonAriaLabel: '取消',
   								},
   								startScreen: {
   									recentSearchesTitle: '搜索历史',
   									noRecentSearchesText: '没有搜索历史',
   									saveRecentSearchButtonTitle: '保存至搜索历史',
   									removeRecentSearchButtonTitle: '从搜索历史中移除',
   									favoriteSearchesTitle: '收藏',
   									removeFavoriteSearchButtonTitle: '从收藏中移除',
   								},
   								errorScreen: {
   									titleText: '无法获取结果',
   									helpText: '你可能需要检查你的网络连接',
   								},
   								footer: {
   									selectText: '选择',
   									navigateText: '切换',
   									closeText: '关闭',
   									searchByText: '搜索提供者',
   								},
   								noResultsScreen: {
   									noResultsText: '无法找到相关结果',
   									suggestedQueryText: '你可以尝试查询',
   									reportMissingResultsText: '你认为该查询应该有结果？',
   									reportMissingResultsLinkText: '点击反馈',
   								},
   							},
   						},
   					},
   				},
   			},
   		},
   	},
   });

图片

不要边框

点击放大预览

鼠标滚轮放大缩小

指定图片大小

代码块

自定义显示图标和标题

config.mts

export default defineConfig({
	// ...
});

npm

npm install ...

yarn

yarn add ...

pnpm

pnpm add ...

bun

bun add ...

自动折叠

高度超过 400px（可配置值） 自动折叠，点击可以展开收起代码块

<template>
	<div>
		<div class="">自动折叠代码块</div>
		<div class="">自动折叠代码块</div>
		<div class="">自动折叠代码块</div>
		<div class="">自动折叠代码块</div>
		<div class="">自动折叠代码块</div>
		<div class="">自动折叠代码块</div>
		<div class="">自动折叠代码块</div>
		<div class="">自动折叠代码块</div>
		<div class="">自动折叠代码块</div>
	</div>
</template>

<script setup></script>

<style lang="scss" scoped></style>

UnoCSS 同款首页动态颜色

导航栏毛玻璃

视图过渡

五彩纸屑

返回顶部

访问量统计

代码效果展示

效果如下（可以点击按钮操作）