开发过程 ​

本文档记录了开发过程，方便以后查阅

0. 项目原因 ​

其实我不是一个前端，而是一名集成电路工程师，但对写code很感兴趣。 本着欲求之，则学之，即得之，当共之的原则，建立了这个分享平台(当然，那时候没有微信公众号等) 从当初的wordpress到hexo, 从vuepress到vitepress，也不是说哪个好，只是自己喜欢用哪个，就一直用哪个。 发现vitepress的主题真的好少，在github上找了半天，没有找到自己喜欢的 后来发现了teek主题，很漂亮，但是，被DIY的太多太零乱了，惊艳过后，还是想自己 做一个主题，自己喜欢，自己用着舒服，自己DIY着开心。 所以，就有了这个项目。

1. 个人需求 ​

因为不是专业的，所以基于官方主题，进行二次开发，满足自己的需求。

1. 用tailwindcss，因为早些年也学习css，但那时候浏览器标准不一，要满足各种浏览器，太麻烦了，所以就放弃了。现在，tailwindcss，可以让我快速开发，不用考虑兼容性，不用考虑浏览器标准，不用考虑各种浏览器兼容性，太爽了。
2. vitepress采用了文件夹作为路由，而不是文件名，所以，我需要一个侧边栏，来显示目录。并且扩展为多级目录，并能折叠
3. 由于以前写文章用的wp,xml转md后，文件名都是以wp时的别名命名的，title,permalink都写在了frontmatter中，所以项目中所有文件名显示的是title，但访问用的是permalink，

1. 从零开始 ​

1.1. 安装 ​

1. 建目录

mkdir chiplayout.top
cd chiplayout.top
pnpm init

2. 安装全部依赖

pnpm add -D vitepress@1.6.4 tailwindcss@3.4.4 postcss@8.4.38 autoprefixer@10.4.19 
@types/node tsx glob fast-glob gray-matter

3. 初始化

npx tailwindcss init -p       # 生成 tailwind.config.ts / postcss.config.js
pnpm dlx vitepress init docs  # 选「Default theme + TypeScript」即可

1.2. 项目结构 ​

chiplayout.top/
├─.vitepress
│  package.json
│  pnpm-lock.yaml
│  pnpm-workspace.yaml
│  postcss.config.js
│  tailwind.config.ts
│  tsconfig.json
├─docs
│  │  api-examples.md
│  │  index.md
│  │  markdown-examples.md
│  │  
│  ├─.vitepress
│  │  │  config.mts
│  │  └─theme
│  │      │  index.ts
│  │      │  style.css
│  │      │  
│  │      ├─styles
│  │      │      custom.css
│  │      │      preflight.css
│  │      │      tailwind.css
│  │      │      
│  │      └─utils
│  │              sidebar.ts

500 KB 警告 ​

• 在build时出现了500KB警告，如下：

(!) Some chunks are larger than 500 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

• 解决方法：在vite.config.ts中添加

build: {
    chunkSizeWarningLimit: 1000
  },