马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
x
整理下使用 Vitepress 搭建博客过程中使用过的一些资源和方案
主要参考站点
Vitepress 官方文档
VitePress快速上手中文教程，这个站点扩展很全，包括静态部署选择，样式美化，第三方插件等，都是手把手教程，很细
XaviDocs个人技术文档，借鉴了部分 VitePress 的使用经验
vitepress主题 vitepress-theme-async 源码，借鉴了部分对 Vitepress 的配置和操作逻辑，阅读这些代码对你明白 Vitepress 会有很大帮助
晚阳Crown，借鉴了使用 Cloudflare R2 搭建图床以及使用 Cloudflare 管理域名的经验
详细配置参考
下面会列出 Vitepress 使用细节的一些配置参考文章，包括域名、图床、搜索、批评体系、统计文章等模块
暗黑模式切换动画
参考这篇文章
VitePress 切换暗黑模式丝滑动画
使用 DocSearch 搜索
官方教程 Vitepress - Algolia Search
详细教程 VitePress快速上手中文教程 - DocSearch
参考我的配置- import type { DefaultTheme } from 'vitepress'
- export const algolia: DefaultTheme.AlgoliaSearchOptions = {
- appId: "appid",
- apiKey: "apikey",
- indexName: 'weizwz',
- 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: '点击反馈'
- }
- }
- }
- }
Fancybox 是一款非常盛行且功能强大的 JavaScript 图片查看库，集成可参考这篇文章
VitePress 添加图片查看器 Fancybox
添加不蒜子统计
参考这篇文章
VitePress 添加不蒜子统计
文章统计，自界说首页，归档页，标签页
参考这篇文章
VitePress 统计文章，新建归档页和标签页
其他相关参考资料：
vitepress-theme-async 主题文章统计
Vitepress 新建页面和注册组件
静态部署
部署到 GitHub Pages ，参考文章
VitePress快速上手中文教程 - 部署
主要是创建 GitHub 部署工作流，项目根目次创建文件 .github/workflows/main.yml，我之前的配置如下：
[code]# 将静态内容部署到 GitHub Pages 的简易工作流程name: Deploy static content to Pages# env:# VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}# VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}on: # 仅在推送到默认分支时运行。 push: branches: ['main']，暂停部署到 GitHub pages # 这个选项可以使你手动在 Action tab 页面触发工作流 workflow_dispatch:# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。permissions: contents: read pages: write id-token: write# 允许一个并发的部署concurrency: group: 'pages' cancel-in-progress: truejobs: # 构建 build: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 with: persist-credentials: false fetch-depth: 0 # github page deploy - name: Set up pnpm uses: pnpm/action-setup@v4 with: version: 9 - name: Set up Node uses: actions/setup-node@v4 with: node-version: 20 cache: 'pnpm' - name: Setup Pages uses: actions/configure-pages@v4 - name: Install dependencies run: pnpm install - name: Build run: pnpm run build - name: Upload artifact uses: actions/upload-pages-artifact@v3 with: # Upload dist repository path: './dist' # 部署 deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} needs: build runs-on: ubuntu-latest name: Deploy steps: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v4 # vercel deploy # - name: Restore file modification time
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
