Initial commit

.editorconfig

@@ -0,0 +1,14 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.github/workflows/deploy.yml

@@ -0,0 +1,65 @@
+name: GitHub Actions Build and Deploy
+
+# 触发条件
+on:
+  # 手动触发
+  workflow_dispatch:
+  # push 到指定分支
+  push:
+    branches:
+      - main
+    # 只在下列路径变更时触发
+    paths:
+      - 'docs/**'
+      - 'package.json'
+
+# 设置权限
+permissions:
+  contents: write
+
+# 设置上海时区
+env:
+  TZ: Asia/Shanghai
+
+# 任务
+jobs:
+  build-and-deploy:
+    # 服务器环境：最新版 ubuntu
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20]
+    steps:
+      # 拉取代码
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      # 安装 pnpm
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      # 设置 node 版本
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'pnpm'
+
+      # 打包静态文件
+      - name: Build
+        env:
+          APP_BASE_PATH: /${{ github.repository }}
+        run: pnpm install && pnpm run build
+
+      # 部署
+      - name: Deploy
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          # GitHub Pages 读取的分支
+          branch: gh-pages
+          # 静态文件所在目录
+          folder: dist

.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# editor directories and files
+.idea
+.vscode
+
+# dependencies
+node_modules
+
+# compiled output
+dist
+dist-dev
+build
+cache
+.cache
+.temp
+.tmp
+.turbo
+
+# log and lock files
+*.log
+yarn.lock
+package-lock.json
+
+# local env files
+.env.local
+.env.*.local
+
+# misc
+.DS_Store
+
+# user-specific files

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx femm-verify-commit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged --quiet

.npmrc

@@ -0,0 +1,6 @@
+# https://docs.npmjs.com/cli/configuring-npm/npmrc/
+# https://pnpm.io/npmrc
+
+auto-install-peers=true
+
+registry=https://registry.npmmirror.com

.prettierignore

@@ -0,0 +1,20 @@
+# See https://github.com/prettier/prettier/blob/main/docs/ignore.md
+
+# dependencies
+node_modules
+
+# compiled output
+dist
+dist-dev
+build
+cache
+.cache
+.temp
+.tmp
+
+# lock files
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+
+# user-specific files

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 maomao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,88 @@
+# vitepress-nav-template
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/maomao1996/picture/main/vitepress-nav-template/home.webp" alt="home" />
+</p>
+<p align="center"> 基于 <b>VitePress</b> 的个人前端导航页面模板 </p>
+<p align='center'><a href="/guide.md">基础教程</a> | <a href="https://notes.fe-mm.com/">作者博客</a></p>
+
+---
+
+## 预览地址
+
+- <https://fe-nav.netlify.app/nav/>
+- <https://maomao1996.github.io/vitepress-nav-template/nav/>
+
+## 功能
+
+- 新增 `layout-class` 方便更好的自定义样式
+- 默认中文
+- 自带前端导航模块
+- 支持访客统计
+- 支持 [giscus 评论](https://giscus.app/zh-CN)
+- 支持日夜颜色模式自适应切换
+- 支持 Github Pages 直接部署上线
+  - 1. 开启 github actions
+  - 2. 配置 Pages 为 `gh-pages` 分支
+  - 3. 访问地址为 `https://<username>.github.io/<repository>/`
+- 支持 [tailwindcss](https://github.com/tailwindlabs/tailwindcss)
+- 支持查看 vue 示例组件源码（使用 [vite-plugin-markdown-preview](https://github.com/jaskang/vite-plugin-markdown-preview)）
+
+### 开启访客统计
+
+需在 `docs/.vitepress/config.ts` 中配置 `themeConfig.visitor`
+
+```ts
+export default defineConfig({
+  themeConfig: {
+    /* 访客统计 */
+    visitor: {
+      /** 统计 id（单独页面的统计会作为前缀使用）*/
+      badgeId: 'maomao1996.vitepress-nav-template',
+    },
+  },
+})
+```
+
+### 开启 giscus 评论
+
+需在 `docs/.vitepress/config.ts` 中配置 `themeConfig.comment`
+
+```ts
+export default defineConfig({
+  themeConfig: {
+    /**
+     * giscus 评论配置
+     *  请根据 https://giscus.app/zh-CN 生成内容填写
+     */
+    comment: {
+      /** github 仓库地址 */
+      repo: '',
+      /** giscus 仓库 ID */
+      repoId: '',
+      /** Discussion 分类 */
+      category: '',
+      /** giscus 分类 ID */
+      categoryId: '',
+    },
+  },
+})
+```
+
+#### 在指定页面关闭评论
+
+需在指定页面的 `markdown` 文件中添加如下 `frontmatter` 配置
+
+```md
+---
+comment: false
+---
+
+# 功能测试页
+```
+
+docs: 更新 README
+
+## 说明
+
+前端导航模块由 [茂茂 | maomao](https://github.com/maomao1996) 开发，如有引用、借鉴的请保留版权声明：<https://github.com/maomao1996/vitepress-nav-template>

docs/.vitepress/config.ts

@@ -0,0 +1,83 @@
+import { basename } from 'node:path'
+import { defineConfig } from 'vitepress'
+import MarkdownPreview from 'vite-plugin-markdown-preview'
+
+import { head, nav, sidebar } from './configs'
+
+const APP_BASE_PATH = basename(process.env.GITHUB_REPOSITORY || '')
+
+export default defineConfig({
+  outDir: '../dist',
+  base: APP_BASE_PATH ? `/${APP_BASE_PATH}/` : '/',
+
+  lang: 'zh-CN',
+  title: '茂茂物语',
+  description: '茂茂的成长之路，包含前端常用知识、源码阅读笔记、各种奇淫技巧、日常提效工具等',
+  head,
+
+  lastUpdated: true,
+  cleanUrls: true,
+
+  /* markdown 配置 */
+  markdown: {
+    lineNumbers: true,
+  },
+
+  /* 主题配置 */
+  themeConfig: {
+    i18nRouting: false,
+
+    logo: '/logo.png',
+
+    nav,
+    sidebar,
+
+    /* 右侧大纲配置 */
+    outline: {
+      level: 'deep',
+      label: '目录',
+    },
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/maomao1996/vitepress-nav-template' }],
+
+    footer: {
+      message: '如有转载或 CV 的请标注本站原文地址',
+      copyright: 'Copyright © 2019-present maomao',
+    },
+
+    lastUpdated: {
+      text: '最后更新于',
+      formatOptions: {
+        dateStyle: 'short',
+        timeStyle: 'medium',
+      },
+    },
+
+    docFooter: {
+      prev: '上一篇',
+      next: '下一篇',
+    },
+
+    returnToTopLabel: '回到顶部',
+    sidebarMenuLabel: '菜单',
+    darkModeSwitchLabel: '主题',
+    lightModeSwitchTitle: '切换到浅色模式',
+    darkModeSwitchTitle: '切换到深色模式',
+
+    /*** 自定义配置 ***/
+    visitor: {
+      badgeId: 'maomao1996.vitepress-nav-template',
+    },
+
+    comment: {
+      repo: 'maomao1996/vitepress-nav-template',
+      repoId: 'R_kgDOJC09Jg',
+      category: 'Announcements',
+      categoryId: 'DIC_kwDOJC09Js4Cekn0',
+    },
+  },
+
+  vite: {
+    plugins: [MarkdownPreview()],
+  },
+})

docs/.vitepress/configs/head.ts

@@ -0,0 +1,11 @@
+import type { HeadConfig } from 'vitepress'
+
+export const head: HeadConfig[] = [
+  ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+  ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+  ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+  ['link', { rel: 'apple-touch-icon', href: '/favicon.ico' }],
+  ['link', { rel: 'mask-icon', href: '/favicon.ico', color: '#3eaf7c' }],
+  ['meta', { name: 'msapplication-TileImage', content: '/favicon.ico' }],
+  ['meta', { name: 'msapplication-TileColor', content: '#000000' }],
+]

docs/.vitepress/configs/index.ts

@@ -0,0 +1,3 @@
+export * from './head'
+export * from './nav'
+export * from './sidebar'

docs/.vitepress/configs/nav.ts

@@ -0,0 +1,15 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const nav: DefaultTheme.Config['nav'] = [
+  { text: '前端导航', link: '/nav/' },
+  { text: '茂茂主页', link: 'https://fe-mm.com' },
+  {
+    text: '茂茂物语',
+    link: 'https://notes.fe-mm.com',
+  },
+  { text: 'mmPlayer', link: 'https://netease-music.fe-mm.com' },
+  {
+    text: '油猴脚本',
+    link: 'https://github.com/maomao1996/tampermonkey-scripts',
+  },
+]

docs/.vitepress/configs/sidebar.ts

@@ -0,0 +1,3 @@
+import type { DefaultTheme } from 'vitepress'
+
+export const sidebar: DefaultTheme.Config['sidebar'] = {}