iEnote

外观

快速开始 ​

介绍 Vitepress 环境搭建以及安装配置等操作 。

环境 ​

bash
# 安装 node.js （提供 npm 安装包）
wget https://nodejs.org/dist/v20.11.1/node-v20.11.1.tar.gz
tar -xvf node-v20.11.1.tar.gz -O ~/Program/node
echo "export PATH=$PATH:/home/echoxu/Programe/node-v20.11.1-linux-x64/bin" >> ~/.bashrc
source ~/.bashrc

安装 ​

步骤一：安装 (任选一)

要求 Node.js 18 及以上版本。

  • npm: npm add -D vitepress
  • pnpm: pnpm add -D vitepress
  • yarn: yarn add -D vitepress
  • bun: bun add -D vitepress

步骤二：设置 (任选一)

安装后，通过运行以下命令启动向导

  • npm: npx vitepress init
  • pnpm: pnpm vitepress init
  • bun: bunx vitepress init

步骤二运行向导后将需要回答几个简单的问题：

sh
┌  Welcome to VitePress!
│
◇  Where should VitePress initialize the config?
│  ./docs
│
◇  Site title:
│  My Awesome Project
│
◇  Site description:
│  A VitePress Site
│
◆  Theme:
│  ○ Default Theme (Out of the box, good-looking docs)
│  ● Default Theme + Customization (选择这个)
│  ○ Custom Theme
└

配置 ​

点击查看 .vitepress/config.js 代码
js
import { defineConfig } from 'vitepress'
import { head, nav, sidebar } from './configs'
import containerPlugin from './configs/plugins'

import { fileURLToPath, URL } from 'node:url'


// https://vitepress.dev/reference/site-config
export default defineConfig({
  lang: 'zh-CN',
  title: "iEnote",
  description: "iEnote 是一个记录 IT 知识点的文档生成器。IT 知识，文档管理，文档记录，文档生成器",
  outDir: '../dist',
  // srcDir: 'docs',

  head,

  lastUpdated: true,
  cleanUrls: true,
  
  themeConfig: {

    i18nRouting: false,

    logo: '/favicon.svg',
    // logo: '/logo.svg',

    nav,
    sidebar,

    search: {
      provider: 'algolia',
      options: {
        appId: 'appId',
        apiKey: 'apiKey',
        indexName: 'indexName'
      }
    },

    // vite: {
    //   resolve: {
    //     alias: [
    //       {
    //         find: "/^.*\/VPNavBar\.vue$/",
    //         replacement: fileURLToPath(
    //           new URL('./components/VPBadgeExtended.vue', import.meta.url)
    //         )
    //       },
    //       {
    //         find: "/^.*\/VPBadge\.vue$/",
    //         replacement: fileURLToPath(
    //           new URL('./components/VPBadgeExtended.vue', import.meta.url)
    //         )
    //       }
    //     ]
    //   }
    // },

    socialLinks: [
      { icon: 'github', link: 'https://github.com/iEchoxu/' }
    ],

    outline: {
      level: 'deep',
      label: '页面导航',
    },

    darkModeSwitchLabel: '外观',
    returnToTopLabel: '返回顶部',
    lastUpdatedText: '上次更新',

    docFooter: {
      prev: '上一篇',
      next: '下一篇',
    },
  },
  markdown: {
    lineNumbers: true,
    config: (md) => containerPlugin(md),
  }
})

特性 ​

FAQ ​

  • "https://registry.npm.taobao.org/create-vuepress: certificate has expired".
    • npm config list 查看得到用的是淘宝的镜像
    • 清空缓存：npm cache clean --force
    • 执行：npm config set registry https://registry.npmmirror.com