个人博客项目

项目简介

简介

项目地址：https://github.com/Charles7c/charles7c.github.io
本篇文章主要是关于如何快速配置本项目
你看到的这个页面就是基于此项目啦

基于 VitePress 构建的个人知识库/博客。扩展 VitePress 默认主题：增加ICP备案号、公安备案号显示，增加文章元数据信息（原创标识、作者、发布时间、分类、标签）显示，增加文末版权声明，增加 Gitalk 评论功能，主页美化、自动生成侧边栏、文章内支持 Mermaid 流程图、MD公式、MD脚注、增加我的标签、我的归档等独立页面，以及浏览器滚条等细节优化。查尔斯的个人技术知识库，记录 & 分享个人碎片化、结构化、体系化的技术知识内容。

注意：

第一点

github page部署失败  配置文件：.github/workflows/deploy-pages.yml
原因：新创建的仓库没有权限

解决办法：在github上创建自己的仓库后：
一定要去本仓库的Settings -> Actions -> General -> Workflow permissions
修改为： Read and write pemissions

第二点

vercel.json一键部署脚本  有个Bug:只能从根路径进去  给我点建议？

json

{
  "builds": [
    {
      "src": "package.json",
      "use": "@vercel/static-build",
      "config": {
        "installCommand": "pnpm install",
        "buildCommand": "pnpm build",
        "distDir": "docs/.vitepress/dist"
      }
    }
  ],
  "routes": [
    {
      "source": "/(.*)",
      "dest": "/$1"
    }
  ]
}

1. 添加自己的文档

1. markdown相关

笔记上方都要写

markdown

---
title: 阿里巴巴的Code Review方法论与实践总结
isOriginal: false
author: 方基成(润甫)
date: 2023/01/06 20:12
isTop: true
articleTitle: 一文梳理Code Review方法论与实践总结 
articleLink: https://mp.weixin.qq.com/s/_4MFrQSYOIGYRdDGOJPDKQ
categories:
 - 碎片化知识点
tags:
 - Code Review
 - 卓越工程文化
---

文章是否置顶：isTop: true
文章是否转载：isOriginal: false
转载标题：articleTitle: 一文梳理Code Review方法论与实践总结 
转载链接：articleLink: https://mp.weixin.qq.com/s/_4MFrQSYOIGYRdDGOJPDKQ

2. 项目配置相关

假如新增了introduction.md，文章中markown的头文件如果是下述所示：

markdown

---
title: 介绍
aside: false
editLink: false
lastUpdated: false
showComment: false
---
# 介绍

需要修改配置：article.data.js

import fs from 'node:fs';
import path from 'node:path';
import parseFrontmatter from 'gray-matter';
// 这里要加！！！！要不然我的归档会出错
const excludedFiles = ['index.md', 'tags.md', 'archives.md', 'me.md', 'introduction.md'];
}

2. 百度统计

1. theme.ts

路径：docs.vitepress\config\theme.ts

tsx

  articleMetadataConfig: {
    author: '查尔斯', // 文章全局默认作者名称
    authorLink: '/about/me', // 点击作者名时默认跳转的链接
    showViewCount: true, // 是否显示文章阅读数, 需要在 docs/.vitepress/theme/api/config.js 及 interface.js 配置好相应 API 接口
},

2. config.js

路径：docs/.vitepress/theme/api/config.js

import axios from 'axios';

const createBaseInstance = () => {
  const instance = axios.create({
    baseURL: 'https://api.charles7c.top/blog',
    timeout: 3000,
  });
  instance.interceptors.request.use(handleRequest, handleError);
  instance.interceptors.response.use(handleResponse, handleError);
  return instance;
}

需要自己有服务器，上述接口来自项目：https://github.com/Charles7c/charles7c-api

3. interface.js

路径：docs.vitepress\theme\api\interface.js

import { request } from './config';

export const getArticleViewCount = (id, pageUrl, call) => {
  request.get(`/article/view/${id}?pageUrl=${pageUrl}`, {}).then(result => {
    call(process(result));
  });
};

4. head.ts

路径：docs.vitepress\config\head.ts

百度统计代码：https://tongji.baidu.com

tsx

export const head: HeadConfig[] = [
    // 没用的东西 直接注释掉
    ['meta', { name: 'baidu_union_verify', content: '19bd8ed3f02a91e23043efdf1d823' }],
    // 修改成自己的
    hm.src = "https://hm.baidu.com/hm.js?53af4b1a12fbe40810ca7ad39f8db";
    // 接口来自项目： https://github.com/Charles7c/charles7c-api
    xhr.open('GET', 'https://api.charles7c.top/blog/pv?pageUrl=' + location.href);
];

5. 如果不需要开启统计功能

除了theme.ts修改外，还需要注释掉以下代码：

路径：docs.vitepress\config\head.ts

tsx

import type { HeadConfig } from 'vitepress';
import { metaData } from './constants';

export const head: HeadConfig[] = [
  ['link', { rel: 'icon', href: '/favicon.ico' }],
  ['meta', { name: 'author', content: 'Charles7c' }],
  ['meta', { name: 'keywords', content: '查尔斯的知识库, 知识库, 博客, Charles7c' }],

  ['meta', { name: 'HandheldFriendly', content: 'True' }],
  ['meta', { name: 'MobileOptimized', content: '320' }],
  ['meta', { name: 'theme-color', content: '#3c8772' }],
  // ['meta', { name: 'baidu_union_verify', content: '19bd8ed3f02a91e23043efdf1d' }],

  ['meta', { property: 'og:type', content: 'website' }],
  ['meta', { property: 'og:locale', content: metaData.locale }],
  ['meta', { property: 'og:title', content: metaData.title }],
  ['meta', { property: 'og:description', content: metaData.description }],
  ['meta', { property: 'og:site', content: metaData.site }],
  ['meta', { property: 'og:site_name', content: metaData.title }],
  ['meta', { property: 'og:image', content: metaData.image }],

  // 百度统计代码：https://tongji.baidu.com
  // ['script', {}, `var _hmt = _hmt || [];
  // (function() {
  //   var hm = document.createElement("script");
  //   hm.src = "https://hm.baidu.com/hm.js?53af4b1a12fbe40810ca7ad39f8d";
  //   var s = document.getElementsByTagName("script")[0]; 
  //   s.parentNode.insertBefore(hm, s);
  // })();`],
  // 页面访问量统计
  // ['script', {}, `
  // window.addEventListener('load', function() {
  //   let oldHref = document.location.href, bodyDOM = document.querySelector('body');
  //   const observer = new MutationObserver(function(mutations) {
  //     if (oldHref != document.location.href) {
  //       oldHref = document.location.href;
  //       getPv()
  //       window.requestAnimationFrame(function() {
  //         let tmp = document.querySelector('body');
  //         if(tmp != bodyDOM) {
  //           bodyDOM = tmp;
  //           observer.observe(bodyDOM, config);
  //         }
  //       })
  //     }
  //   });
  //   const config = {
  //     childList: true,
  //     subtree: true
  //   };
  //   observer.observe(bodyDOM, config);
  //   getPv()
  // }, true);

  // function getPv() {
  //   xhr = new XMLHttpRequest();
  //   xhr.open('GET', 'https://api.charles7c.top/blog/pv?pageUrl=' + location.href);
  //   xhr.send();
  // }`]
];

3. 评论功能

1. theme.ts

路径：docs.vitepress\config\theme.ts

tsx

  // 自定义扩展: 评论配置
  commentConfig: {
    type: 'gitalk',
    showComment: true // 是否显示评论
  },

2. Comment.vue

路径：docs.vitepress\theme\components\layout\Comment.vue

github申请密钥：https://github.com/settings/applications/new

proxy这个东西来自项目：https://github.com/clint-sfy/cors-server
这个项目主要解决国内的 https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token 接口被墙导致 gitalk 无法获取 token 问题
fork项目后，直接在vercel上一键部署，并绑定自己的域名

vue

  if (type.value && type.value == 'gitalk') {
    gitalk = new Gitalk({
      clientID: '1de126ce1fbdbe0',
      // 修改成自己的密钥
      clientSecret: '035fe49874a43e5cefc28a99b7e40b19253',
      repo: 'charles7c.github.io',
      owner: 'Charles7c',
      admin: ['Charles7c'],
      id: md5(page.value.relativePath),
      language: 'zh-CN',
      distractionFreeMode: false,
      // 默认: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token
      proxy: 'https://vercel.charles7c.top/github_access_token',
    });
  }

4. 在线搜索

1. theme.ts

路径：docs.vitepress\config\theme.ts

tsx

  // 搜索配置（二选一）
  search: {
    provider: 'algolia',
    options: algoliaSearchOptions,
    // 本地离线搜索
    // provider: 'local',
    // options: localSearchOptions
  },

2. algolia-search.ts

路径：docs.vitepress\config\search\algolia-search.ts

tsx

import type { AlgoliaSearchOptions } from 'vitepress';

export const algoliaSearchOptions: AlgoliaSearchOptions = {
  appId: 'DBZ0G9H',
  apiKey: '00cef480a543003d05d9808110ea',
  indexName: 'charles7c',

5. 我的归档

1. Archive.vue

路径：docs.vitepress\theme\components\Archive.vue

vue

<svg v-if="article.categories.includes('Bug万象集')" @click="goToLink('/archives', 'category', article.categories[0])" role="img" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-bug" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter" style="color: #f53f3f;"><title>Bug万象集</title><path d="M24 42c-6.075 0-11-4.925-11-11V18h22v13c0 6.075-4.925 11-11 11Zm0 0V23m11 4h8M5 27h8M7 14a4 4 0 0 0 4 4h26a4 4 0 0 0 4-4m0 28v-.5a6.5 6.5 0 0 0-6.5-6.5M7 42v-.5a6.5 6.5 0 0 1 6.5-6.5M17 14a7 7 0 1 1 14 0"></path></svg>
              
              <svg v-else-if="article.categories.includes('杂碎逆袭史')" @click="goToLink('/archives', 'category', article.categories[0])" role="img" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-bulb" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter" style="color: #ff7d00;"><title>杂碎逆袭史</title><path d="M17 42h14m6-24c0 2.823-.9 5.437-2.43 7.568-1.539 2.147-3.185 4.32-3.77 6.897l-.623 2.756A1 1 0 0 1 29.2 36H18.8a1 1 0 0 1-.976-.779l-.624-2.756c-.584-2.576-2.23-4.75-3.77-6.897A12.94 12.94 0 0 1 11 18c0-7.18 5.82-13 13-13s13 5.82 13 13Z"></path></svg>
              
              <svg v-else-if="article.categories.includes('方案春秋志')" @click="goToLink('/archives', 'category', article.categories[0])" role="img" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-code" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter" style="color: #165dff;"><title>方案春秋志</title><path d="M16.734 12.686 5.42 24l11.314 11.314m14.521-22.628L42.57 24 31.255 35.314M27.2 6.28l-6.251 35.453"></path></svg>

如果要按照时间顺序(使用方法：getItemsByDate)进行归档的话，需要修改上述代码

tsx

// docs\.vitepress\config\sidebar.ts
'/categories/issues/': getItemsByDate("categories/issues"),
'/categories/fragments/': getItemsByDate("categories/fragments"),

普通的方法（使用方法：getItems）不用，类似如下：

tsx

// docs\.vitepress\config\sidebar.ts
'/courses/c/': getItems("courses/c"),
'/courses/c_plus/': getItems("courses/c_plus"),

个人博客项目 ​

项目简介 ​

注意： ​

第一点 ​

第二点 ​

1. 添加自己的文档 ​

1. markdown相关 ​

2. 项目配置相关 ​

2. 百度统计 ​

1. theme.ts ​

2. config.js ​

3. interface.js ​

4. head.ts ​

5. 如果不需要开启统计功能 ​

3. 评论功能 ​

1. theme.ts ​

2. Comment.vue ​

4. 在线搜索 ​

1. theme.ts ​

2. algolia-search.ts ​

5. 我的归档 ​

1. Archive.vue ​

个人博客项目

项目简介

注意：

第一点

第二点

1. 添加自己的文档

1. markdown相关

2. 项目配置相关

2. 百度统计

1. theme.ts

2. config.js

3. interface.js

4. head.ts

5. 如果不需要开启统计功能

3. 评论功能

1. theme.ts

2. Comment.vue

4. 在线搜索

1. theme.ts

2. algolia-search.ts

5. 我的归档

1. Archive.vue