00:00:00
博客技巧 推荐
暗黑模式切换动画
参考 https://note.weizwz.com/vitepress/basic/dark-animation
链接前加图标
参考 https://note.weizwz.com/vitepress/basic/link-icon
优化代码块为mac风格
参考 https://note.weizwz.com/vitepress/basic/code-block
使用 DocSearch 搜索
官方教程 https://vitepress.dev/zh/reference/default-theme-search#algolia-search
详细教程 https://vitepress.yiov.top/docsearch.html
title: 标题 date: 2020-02-21 14:40:19 categories:
- 分类1
- 分类2 tags:
- 标签1 titleTag: 原创 # v1.9.0+ 可写选项：
原创、转载、优质、推荐titleTag v1.9.0 + 用于给标题添加 原创、转载 、优质、推荐 等自定义标记。 添加了标题标记的文章，在文章页和文章列表、最近更新栏、归档页的文章标题都会显示此标记。
sidebar: false article: false false 判定当前页面为非文章页 对于非文章页，如目录页、关于、友情链接等自定义页面，需要设置此项。设置之后这个页面将被认定为非文章页，不显示面包屑和作者、时间，不显示最近更新栏，不会参与到最近更新文章的数据计
comment: false false 不显示评论区，这是评论插件 (opens new window)的一个配置 editLink: false false 不显示编辑链接
author: name: 97 link: https://jieliu.me author author.name 作者名称 author.link 作者链接 指定当前页面的作者信息，如没有作者链接时可以这样：author: 作者名称
sticky: 1 sticky (置顶) 类型： number 排序：允许有多个置顶文章，按照 1, 2, 3, ... 来降低置顶文章的排列优先级 文章置顶，设置了此项将在首页详细版文章列表中处于置顶位置。
自动生成的front matter字段包括title、date、permalink、categories、tags，这里就不再重复赘述，参考：自动生成front matter
安装环境
pnpm install
启动开发服务器
pnpm docs:dev
构建静态文件
pnpm docs:build
本地预览生产构建
pnpm docs:preview
查看有哪些文件被修改了
git status
将所有更改添加到暂存区
git add .
提交更改，并附上本次修改的说明
git commit -m "更新了网站的最新内容"
将本地的更改推送到你的私有 GitHub 仓库
git push
teek更新 pnpm add vitepress-theme-teek@latest -D
图片
和链接的区别是前面多一个感叹号!
markdown
当然，你也可以像链接那样对图片地址使用变量:
markdown
这里链接用 img 作为图片地址变量
然后在文档的结尾或其他位置给变量赋值（图片地址）
![RUNOOB][img]
[img]: https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png
图片宽高
如下想设置图片宽高，可以使用 <img> 标签。
html
<img src="https://raw.githubusercontent.com/xugaoyi/image_store/master/blog/md_logo.png" width="50px" height="30px">最近有朋友问，这个网站是怎么搭建的？
其实很简单。
整个网站背后，只有一个 GitHub 仓库。没有其他外部依赖，像数据库、缓存什么的，都没有。
全部工作流，用的都是开源和免费的产品，不需要花钱。
这是我在一开始设计的时候就想好的。
以内容为中心，零依赖，持续集成和部署（CI/CD）。
当然，简单背后有不简单。
- 构想 张小龙在《微信背后的产品观》这本书中提到过一个观点，很认同：
产品是进化出来的，而非规划出来的。
现在这个网站，已经是迭代中的第三个版本。
之前的网站，前端用 jQuery，后端用了很重的 MongoDB，服务器自己托管。所有的内容和代码耦合，保存在一个文件夹中。
坏处很明显。
一者，迁移成本高。当服务器过期，换到一台新的服务器时，不仅要拷贝文件夹，还需要重新部署 MongoDB 服务。不胜其扰。
同时，发布复杂。需要先上传文章到服务器，然后更新数据库。
另外，网站性能很差。尽管实际上需要的只是静态页面，但网页请求时，却需要先访问数据库，然后再将结果动态展示。当时甚至设想过要不要再加一个缓存层…
看似用到的技术点很多，其实都是花拳绣腿。不仅没解决问题，反而带来更多问题。
好在，在犯错中，确实也学习和领悟了一些技术开发的原理。
面向问题，选择务实的方案，多做减法。
于是在新版网站创建之初，吸取之前的教训，设立了两个小目标：
发布简单 部署简单 最好是，发布即部署。
梁朝伟在《一代宗师》中讲：
功夫就是两个字，一横，一竖。
越简单越好。
- 实施 实施过程中，一共做了三件事。
内容和展示分离 零依赖 持续集成和部署 2.1 内容和展示分离 网站开发中的第一性原理是什么？
对于博客网站，我认为是：内容。
是否能快速访问，是否跨端适配良好，是否美观，都重要，但不是最重要的。
内容，是一切的出发点。
好的博客网站，首先一定是能提供观点鲜明、结构清晰、容易理解的内容。
载体是文章。
我将所有的文章，以 Markdown 的格式保存在文件里。
这一步聚焦于内容，至于怎么呈现，不去关注。
Markdown 是一种结构化内容的轻量级方式，是纯文本。其哲学也是以内容为中心，样式由展示者控制，而非内容提供者。
为了方便保存和迭代，文章都放在 GitHub 仓库中，兼顾变更，发布，以及迁移。
这也是当下产品开发的主流手段，基于分支的 Git 工作流🔗。
2.2 零依赖 博客网站里的页面都是静态的。
在前端，JavaScript 不是必要的。
在后端，除了网页服务器，其他服务，像数据库等，可有可无。
唯一需要的工具，就是静态站点生成（Static Site Generation）。将 Markdown 转换为 HTML。
当下这样的产品很多，像 Hexo，Gatsby，Hugo，VitePress 等。
我选择的是 Astro🔗。
静态站点的托管，前些年选择还很少，要么用 GitHub Pages，要么自己部署。
现在选择很多，而且还都支持 CDN 和 边缘计算。
除了 Vercel 和 Netlify 外，AWS 和 Cloudflare 都有相应的产品。
目前我用的是 Netlify。
GitHub + Astro + Netlify，除了这三个必不可少的工具，就没有任何其他外部依赖了。
2.3 持续集成和部署 剩下的就是把这几个工具串联。
真实的工作流是：
本地提交新的文章或改动 推送到 GitHub 远程分支 Netlify 监听分支变动，触发 Astro 生成静态站点 Netlify 将新的生成结果部署 从文章写完，到用户在网页端访问，中间所有的流程，都是自动化的。
非常方便。
- 不足之处 目前网站在样式上还有优化空间。
我不是很擅长设计和 CSS。
当初开发的时候，这一块就是最令人头疼的。
有可能的话，后面会用 shadcn/ui🔗 重写。
得益于最开始的顶层设计，样式的变更很容易。
分支各自管理，内容和样式独立，工作流中的其他环节之间没有依赖。
就像是只需要更换机器中的其中一个零件，不用把整个机器都换了。
- 总结 如果对网站架构比较熟悉的话，可以看出，这一套网站开发思路，其实就是借鉴 JAMstack🔗。
这说明了顶层设计的重要性。
程序员的工作，远不止写代码这么简单。
要从写代码出发，先架构小的组件，然后架构小的系统，进而架构复杂系统，架构整个产品，甚至架构商业。
（完）
主题配置
在首页 index.md 的 frontmatter，可以覆盖 config 主题配置的首页相关选项：
banner横幅topArticle精选文章category分类tag标签friendLink友情链接docAnalysis站点分析post文章列表article文章信息（作者、创建时间、分类、标签等）page分页- ...
在首页 index.md 的 frontmatter 中配置时，建议以 tk 开头，然后是主题配置的选项，举个示例：
这些配置将会覆盖 config 主题配置中的对应选项。
提示
不以 tk 开头也是可以的，Teek 支持的 frontmatter 既可以是 tk.xx.xx，也可以是 xx.xx，其中 tk.xx.xx 优先级更高。
文章页配置
在文章页的 frontmatter，可以覆盖 config 主题配置的文章页相关选项：
author作者信息article文章信息（作者、创建时间、分类、标签等）breadcrumb面包屑articleShare文章分享appreciation赞赏- ...
文章配置
除了支持覆盖主题配置的选项，Teek 还提供了以下额外的选项：
- 标签 1 titleTag 原创 top true sticky sidebar article comment description
docAnalysis inCatalogue autoTitle articleUpdate inHomePost
title
- 类型：
string
页面标题，将作为一级标题显示在页面上。
支持填写 HTML 标签 v1.3.0：
date
- 类型：
string
页面创建时间，将作为创建时间显示在首页的文章列表、文章页顶部。
permalink
- 类型：
string
页面永久链接，将作为页面访问的 URL 路径，该配置项由 vitepress-plugin-permalink 提供。
categories
- 类型：
string[]
分类，将显示在首页的文章列表、分类卡片、文章页顶部，并在分类页渲染所有分类的文章。
tags
- 类型：
string[]
标签，将显示在首页的文章列表、标签卡片、文章页顶部，并在标签页渲染所有标签的文章。
titleTag v1.1.0
用于给标题添加 原创、转载、优质、推荐 等自定义标记。
添加了标题标记的文章，在文章列表、文章页、归档页、目录页的文章标题都会显示此标记。
top
- 类型：
boolean - 默认值：
false
标记为精选文章。如果为 true，则在首页的精选文章卡片中显示，如果多个文章都设置了 top: true，则按照 date 进行排序（最新时间在上面）。
sticky
- 类型：
number
文章置顶，设置了此项将在首页文章列表中处于置顶位置，如果同时设置了 top: true，则在精选文章卡片的序号添加高亮背景色
sidebar
- 类型：
boolean - 默认值：
true
侧边栏，true 表示显示侧边栏。设置为 false 表示不显示侧边栏。
article
- 类型：
boolean - 默认值：
true
非文章页的标记，非文章页如目录页、关于、友情链接等自定义页面，需要设置此项。设置之后这个页面将被认定为非文章页，不显示面包屑和文章信息（作者、时间、分类、标签等），不显示在如下模块中：
- 首页的文章列表
- 归档页
- 文章最近更新栏
comment
- 类型：
boolean - 默认值：
true
评论功能，true 表示显示评论区。设置为 false 表示不显示评论区。
description
- 类型：
string - 默认值：null
文章摘要，将显示在首页的文章列表。
coverImg
- 类型：
string - 默认值：null
封面图片，将显示在首页的文章列表。
inCatalogue
- 类型：
boolean - 默认值：
true
目录页，true 表示允许 Markdown 文档纳入目录里。设置为 false 表示不允许，该配置项由 vitepress-plugin-catalogue 插件提供。
docAnalysis
- 类型：
boolean - 默认值：
true
站点分析，true 表示允许站点信息功能对 Markdown 文档进行数据分析和统计。设置为 false 表示不允许，该配置项由 vitepress-plugin-doc-analysis 插件提供。
autoTitle
- 类型：
boolean - 默认值：
true
如果 Markdown 不设置一级标题，在访问页面的时候自动添加一级标题。设置为 false 表示不允许自动添加一级标题，该配置项由 vitepress-plugin-md-h1 插件提供。
一级标题获取优先级：frontmatter.title > 文件名
articleUpdate v1.2.0
- 类型：
boolean - 默认值：
true
是否在文章底部显示最近更新栏。
inHomePost v1.3.0
- 类型：
boolean - 默认值：
true
Markdown 文档是否在首页的文章列表中显示。
articleBanner v1.5.0
- 类型：
boolean - 默认值：
true
是否显示文章页的 Banner 栏，仅当没有侧边栏的文章页生效。
coverColor v1.5.0
- 类型：
string - 默认值：
""
文章页 Banner 的背景色，仅当 articleBanner 为 true 时生效。
评论