One

主题

00:00:00
2025-09-062025-11-24博客Teek
11172
48.4m
0

Teek-one模板手把手使用文档 推荐1 ​

Teek-one模板手把手使用文档 ​

Teek~一款简约、唯美、丝滑且强大的VitePress主题博客(博客和知识库二合一)

image-20250502073710566

目录 ​

[toc]

前言 ​

为什么要创建个人博客 ​

  1. 个人博客，不止是技术的记录，也是生活，更是人生。
  2. 让别人拿着我写的文档保准出效果，避免踩坑。
  3. 热爱分享、传播、开源。
  4. 记录博客的人，多半也是孤独的人吧。
  5. 每更新一次博客，就像在精心打理着自己的小庄园。

你的需求 ​

所以，对一个写博客的人来说，他自己的需求是什么？（很关键）

1.是想要一个博客，有空了写几篇文章丢上去 --那么建议选择 博客风格的；（很多，例如wp，hexo等等，但是还是推荐teek博客，或者张洪heo风格）

2.是想要一个同时支持 博客和文档库 的博客，后续会持续且成体系地更新数据 -----那么建议选择 博客风格的；（推荐teek博客-基于vitepress开发的）

🍀

重点：

博客只适合碎片化知识分享，而知识库才是沉淀知识的理想方式。

产生背景 ​

提示

以下文字来源于《天客Teeker》作者《我用 VitePress 打造了一个文档风、博客风主题，VuePress 晚安！》文章，介绍了Teek的产生背景，这里只记录相关信息，感谢作者的优秀作品。

相信使用 VitePress 的小伙伴们知道，VitePress 默认主题适合搭建文档站，不适合搭建博客站，但是 VitePress 提供了大量的插槽支持拓展或者覆盖其内置的主题，于是我在默认主题的基础上进行拓展：vitepress-theme-teek 诞生了🎉。

我第一次搭建博客使用 VuePress 的主题 Vdoing，如果用过 Vdoing 搭建的小伙伴可能熟悉我的网站 Young Kbt，然后一直用到了现在，此时我的博客已经有了很多的文档，但是 VuePress 面对大量的文档已经显得力不从心，本地启动需要花费很长时间才能成功，于是我把目光移到了 VitePress。

但是 VitePress 主题较于 VuePress 主题太少了，很多的都是在个人项目里定制开发，并没有抽离出来（如一个 NPM 包），而已有的主题不符合我的使用习惯，毕竟用了 Vdoing 的很多便捷功能(PS: Vdoing 真好用)，所以一直等待着平替品。

2025 年初我打算给一个项目 Hd Security 写使用文档，于是打算尝试用 VitePress 来搭建，在搭建的时候竟然发现 VitePress 默认是基于文档路径来当作 URL 访问，而不是像 VuePress 可以单独给文章设置一个自定义永久链接来访问，这就难受了🙂。

于是我打算实现这个 Permalink 永久链接功能，慢慢开始阅读 VitePress 源码、一些开源的 VitePress 主题源码，寻找灵感，慢慢事情就不对劲了🤔，我了解了 VitePress 的许多拓展用法，然后动了坏心思：实现一个类似于 Vdoing 的 VitePress 主题，利用 VitePress 即时启动、闪电般的热更新特性解决 VuePress 启动/构建慢的问题，于是 Teek 诞生了🎉。

Teek 一开始是照着 Vdoing 原型开发，毕竟没有大量时间从零设计。后来慢慢实现了 Vdoing 大部分功能，原本打算就此收手，然而 Vdoing 群里的 2 个小伙伴尝试使用了初版 Teek，并给予了我极大的鼓励和支持。他们边使用边提大量需求（照着其他开源项目的功能使劲提 😭），我想着正好熟悉下前端开发，于是不断完善 Teek，重构架构、规范代码和版本、编写使用文档，最后就是大家现在看到的 Teek。

在此感谢 Teek 参考的优质 VitePress、VuePress 主题和博客 vuepress-theme-vdoing、粥里有勺糖、VitePress 快速上手中文教程、友人A、Lumen、Nólëbase 集成。

背景 ​

为什么要写这篇文章呢？

静态类型博客(ssg)部署非常简单，无非就是拉取代码，本地运行，构建数据，推送数据。但是对小白来说，如何快速部署一个ssg类型博客，如何使用博客，且将其发布到自己个人域名下，尤其是面对一个全新的博客，总会显得不知所措。

老夫也是过来人，不想见小白因为各种小问题踩各种坑，浪费了光阴却中途放弃，于是鄙人写了这篇手把手使用Teek博客的文档，各位小伙伴使用过程中有任何问题，可以在群里@我，我会帮大家快速部署属于自己的博客博客哦😜。

所以：

  1. 你想要 3s 即刻就会拥有和我一样的个人博客吗？
  2. 宇宙最美博客~Teek博客(博客和文档库二合一)，你想要体验吗？

那就按这篇手把手教程快速部署一个宇宙最美博客哦，哈哈哈。🤣

简介 ​

Teek 是一个 轻量、简洁高效、灵活配置，易于扩展 的 VitePress 主题 ✨，可以轻松打造属于你自己的知识管理平台，它有如下特性：

知识管理

包含三种典型的知识管理形态：结构化、碎片化、体系化。轻松打造属于你自己的知识管理平台。

结构化 & 体系化

自动生成侧边栏、目录页、索引页、面包屑等，轻松构建一个结构化知识库。

碎片化 & 个性化

博客功能提供快速构建知识的碎片化形态，并提供大量个性化的主题配置。

文档风 & 博客风

支持通过配置随意切换文档风和博客风，支持个人博客、文档站、知识库等场景。

🍊视频讲解

https://www.bilibili.com/video/BV1YuaUzWE1Z/?vd_source=77325423ced14ef15b0723db235167e3 Teek~一款简约、唯美、丝滑且强大的VitePress主题博客(博客和知识库二合一)

PixPin_2025-09-04_19-03-25

🍊关于Teek博客介绍，详情见如下链接：

https://onedayxyy.cn/teek/teek-blog 《Teek博客》

image-20251028050412706

🍊细节展示

链接访问：文档地址 | Github 仓库 （欢迎点个 star✨~）

Teek 的官方文档站默认采用 VitePress 原始风格，当然您可以点击右上角的主题面板，切换 Demo 来查看效果。

image-20250818122230143

🍊 博客案例

Teek 文档站的内容仅仅基于 Teek 本身功能构建的，并没有添加一些第三方美化的插件、功能，您可以访问下面使用 Teek 搭建的博客地址(一开始跟随 Teek 的两位小伙伴的博客)，这些博客添加了很多美化功能，也许更符合您的爱好。

Ones Blog | Hyde Blog

🍊 功能概览

相较于 VitePress 默认主题，Teek 主要实现了博客风格的功能，这些功能也兼容文档风格。

全局

  • 侧边栏自动生成，根据目录自动生成侧边栏，无需手动配置
  • 提供目录页，根据 Markdown 文件路径自动生成目录
  • 自动生成 frontmatter，并且支持拓展 frontmatter 格式
  • 自动生成一级标题
  • 全站背景图片
  • Markdown 拓展：居中、居右容器、卡片容器、Demo 容器、TODO 列表、Video 容器
  • 主题多元化：4 种布局模式、8 种主题风格选择，且支持自定义扩展新的主题风格
  • ...

首页

  • Banner 功能：提供 3 种风格选择：局部背景色、局部图片、全屏图片，提供打印个性签名、切换个性签名选择，提供 feature 功能
  • 文章列表：支持切换列表和卡片模式，展示文章标题、封面图、作者、创建时间、更新时间、标签、分类，且支持重写文章列表
  • 博客卡片栏：博主信息栏、精选文章栏、分类栏、标签栏、友情链接栏、站点信息栏
  • 全屏壁纸模式：只保留 Banner 背景图片或全站背景图片，且禁止滚动、打开开发者工具、右键功能
  • 页脚：展示社交图标、版权信息、备案信息、自定义信息
  • ...

文章页

  • 文章信息：展示面包屑、作者、创建时间、更新时间、标签、分类、字数、阅读时长
  • 评论区：提供 Giscus、Twikoo、Waline、Artalk 四种评论提供商选择，并且支持自定义评论区
  • 代码块：UI 升级，支持一键折叠/展开
  • 文章页风格书页化：提供 3 种风格选择：VitePress 原生、整体卡片化、片段卡片化
  • 文章打赏：支持 3 种打赏风格选择
  • 文章分享：提供一键复制文章链接功能
  • 最近更新栏：展示最近更新文章
  • ...

功能页

  • 分类页
  • 标签页
  • 归档页
  • 清单页
  • 登录页
  • 风险链接提示页

除了上述功能，Teek 也提供了各种 CSS 文件来增强 VitePress 的样式，并提供大量的插槽支持二次开发。

如果您是其他主题的用户，也可以按需引入 Teek 的功能，增强自己的站点风格。

亮点 ​

Teek最大亮点：

Teek~一款简约、唯美、丝滑且强大的VitePress主题博客 ❤️❤️❤️

  1. 理念超前：Teek 以“将本地目录的 Markdown 文档渲染成博客”这一设计思想贯穿其中，大道至简，实用且强大。
  2. 双模式支持：能同时满足 知识库 & 博客 & 云笔记 需求，且功能完整、体验丝滑，试问全网还有哪个网站能与其争锋？
  3. 纯静态部署：一键轻松部署，最低配服务器即可满足需求，真正做到轻量化、高效化。
  4. 极致体验：风格简约、唯美，阅读/编辑文章就像读一本书一样清晰、舒适，细节打磨到位，操作丝滑流畅，用户体验无可挑剔。
  5. 数据管理：本地typora/obsidian维护markdown文档，git管理，一键发布本地md知识目录到网站；
  6. 社区氛围：群内热心小伙伴手把手教学，耐心解答问题，价值感和情绪价值双拉满，群主对小伙伴提出的需求基本有求必应……
  7. 持续迭代：开发者热心持续开发新功能，及时修复 Bug，完全开源，诚意满满。

无论是从设计理念、功能丰富度，还是从用户体验和社区支持来看，Teek 都堪称全网最美博客，实至名归！

版权 ​

警告

此《vitepress-theme-teek 》项目是《天客 - Teeker》大佬开源的，感谢大佬开发的优秀主题，大佬威武，这里仅记录下个人日常使用teek的一些信息，关于项目具体信息，可访问其官网，多谢。❤️❤️❤️

  • 官方demo及仓库

Teek官方文档：https://vp.teek.top/

Teek原作者博客：https://notes.teek.top/

模板：

Teek爱好者《One》开源的模板：Teek-one（本人 开箱即用的 漂亮博客风，适合小白，强烈推荐😜） https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public

官方开箱即用版仓库（官方 开箱即用的 简约文档风，适合小白，强烈推荐😜）：https://github.com/Kele-Bingtang/vitepress-theme-teek-docs-template

官方开发版仓库（想二开Teek的可选择这个）：https://github.com/Kele-Bingtang/vitepress-theme-teek

推广文章：

原作者天客 - Teeker掘金发表的文章：《我用 VitePress 打造了一个文档风、博客风主题，VuePress 晚安！》

一切博客，凡是作者不能很好地支持更新，都不如 Teek博客。🤣

开箱即用版 ​

开箱即用版~Teek-one💖 介绍

我的网站效果 https://onedayxyy.cn/

NOTE

自己开源的 《vitepress-theme-teek-one-public》网站模板。

此模板是在《天客 - Teeker》大佬开源项目《vitepress-theme-teek 》基础上 添加了 一些友好的用户体验 开源的，非常适合小白使用（强烈建议小白直接拉取次库体验效果😜）。

感谢大佬开发的主题，大佬威武。❤️❤️

部分效果见如下图所示：

  • 简约文档风格

image-20250526063538038

  • Banner 大图

image-20250521212430758

  • 卡片风格

image-20250628154827174

更多效果，请访问我的网站One。

前提条件 ​

自己电脑得提前安装好git和nodejs：

  1. 安装好git；
  2. 安装好nodejs；（Node.js 需要满足18.0.0 及以上版本）
  3. 具有自己的域名；（可选）
  4. 有手就行；

以下配置是讲述了如何拉取自己Teek-one模板，且想要修改把当前网站修改为自己网站的配置信息，都是手把手教程，按着配置弄就完全OK，保准无坑。😍

项目需知 ​

1.项目结构 ​

以下是Teek的各目录结构。

image-20250915210850567

Teek目录结构官方文档：《结构化目录》

image-20250915210934775

2.命名规则 ​

🍊命名规则

我们在维护Teek仓库之前，必须得弄清楚Teek里目录及文件的命名规则，以方便后续维护Teek网站。

🍊原文链接

原文链接：结构化目录 | vitepress-theme-teek

image-20250829062721100

如果你搭建的是博客风的站点，那么 Teek 建议和 vdoing 一样，使用以下命名约定：

  • 无论是文件还是文件夹，请为其名称添加上正确的正整数序号和 .，从 00 或 01 开始累计，如 01.文件夹、02.文件.md，我们将会按照序号的顺序来决定其在侧边栏当中的顺序
  • 同一级别目录别内即使只有一个文件或文件夹也要为其加上序号

序号只是用于决定先后顺序，并不一定需要连着，如 01、02、03...，实际可能会在两个文章中间插入一篇新的文章，因此为了方便可以采用间隔序号 10、20、30...，后面如果需要在 10 和 20 中间插入一篇新文章，可以给定序号 15。

当然可以使用非序号的命名，这并不影响使用，添加序号只是为了排序，且更具有结构化，如果同一个目录下同时存在带序号和不带序号的文件，在生成侧边栏时，Teek 会分为两个区：带序号区和不带序号区，两个区内部按照各自的逻辑排序，在最终生成侧边栏的时候，不带序号区始终放在带序号区的后面。

从维护性、可读性的角度分析，带有序号的文件名在本地目录看起来更加直观；从站点渲染的角度分析，在生成侧边栏时，Teek 会根据文件名的序号进行排序。

🍊最佳姿势

一级目录下只能存在一个md，其余必须为目录。目录按序号递增（例如10. 20. 30. 40.）；

image-20251016123712011

image-20251016123737171

3.rewrite模式 ​

🍊模式选择

当前Teek-one默认的模式已强制修改为rewrite，别问为什么，贫道自有道理，肯定是最佳实践啦。

那么，为什么要切换到rewrite呢？

  • 左下角会有中文路径提示
  • url打开会有中文提示

这2个问题导致proxy模式的vitepress主题体验就是一坨粑粑（所以不得不切到rewrite模式）。🤣

Teek里文件路径使用原则

  1. Teek里的每个页面url链接只能是https://域名/一级前缀/随机uid （例如我网站《Teek博客》文章的唯一链接就是https://onedayxyy.cn/teek/teek-blog，此时 一级前缀 就是teek，随机uid 就是teek-blog）
  2. 必须保证 一级目录下的 所有md都得有同一个一级前缀，例如 /一级前缀/随机uid
  3. 一级前缀决定了是否都在同一个侧边栏显示。你一级目录下，都是其子目录，默认都弄成同一个一级前缀就好了。如果不想让他出现在侧边栏，那就单独指定一个一级目录。
  4. 所以，一级前缀 就统一整成 /技术/xxx /专题/xxx /生活/xxx /兴趣/xxx /关于/xxx (这里的中文可以替换为对应的英文)

image-20250824213924835

1、拉取模板 ​

（1）克隆仓库

bash
#来到自己电脑d盘
cd /d/
#项目拉取
git clone https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public.git

cd /d/vitepress-theme-teek-one-public
#依赖安装（只能用 pnpm 安装依赖）
pnpm install

#项目本地运行
pnpm docs:dev #本地运行

#项目打包
pnpm docs:build

提示

推荐小白使用Teek-One这个模板，此模板遵循大道至简，简约、唯美、丝滑且强大。

让然也可以使用Teek原作者《vitepress-theme-teek-docs-template》模板。

（2）浏览器访问http://localhost:5173/观察效果

执行pnpm docs:dev后，浏览器默认就会打开一个http://localhost:5173/网页：（恭喜你，此时你的Teek博客已经部署完成了）

image-20250830080357790

以上，Teek博客本地部署好了，接下来，那么我们把模板中的一些信息修改为自己的个人信息。

🍊扩展：

dockre部署

警告

仅用于快速拉起一个teek博客，实际部署推荐以上源码部署。

bash
#dockre一键启动teek博客
docker run -d -p 8054:80 --name docker.cnb.cool/onedayxyy/vitepress-theme-teek-one-public/teek-blog --restart unless-stopped teek-blog

2、修改信息 ​

1.左上角网站名称 ​

编辑docs\.vitepress\config.ts文件：

ts
title: "One", //左上角网站名称

image-20250830095941277

效果：

image-20250830100113585

2.标签页名称 ​

编辑docs\index.md文件：

md
#标签页名称
title: One
#标签页-副标题
titleTemplate: 明心静性，爱自己

image-20250830100215849

效果：

image-20250830100257815

3.首页网站名称 ​

编辑docs\.vitepress\theme\config\teekConfig.ts文件：

修改banner.name属性为One Blog 🎉 （记得批量把 博客默认配置/小图/大图/全图/卡片等下的banner.name属性都配置一遍）

ts
import type { TeekConfig } from "vitepress-theme-teek/config";

// 文档配置
export const teekDocConfig: TeekConfig = {
  themeEnhance: {
    layoutSwitch: {
      defaultMode: "bothWidthAdjustable",
    },
  },
};

// 博客基础配置
const teekBlogCommonConfig: TeekConfig = {
  teekHome: true,
  vpHome: false,
  loading: true,
  wallpaper: {
    enabled: true,
    hideBanner: true,
  },
  footerInfo: {
    customHtml: `<span id="runtime"></span>`, // 需要搭配 .vitepress/theme/helper/useRuntime.ts 使用
  },
  docAnalysis: {
    createTime: "2025-03-23",
    statistics: {
      provider: "busuanzi",
    },
  },
  friendLink: {
    list: [
      {
        name: "Teeker",
        desc: "朝圣的使徒，正在走向编程的至高殿堂！",
        avatar: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png",
        link: "http://notes.teek.top/",
      },
      {
        name: "vuepress-theme-vdoing",
        desc: "🚀一款简洁高效的VuePress 知识管理&博客 主题",
        avatar: "https://doc.xugaoyi.com/img/logo.png",
        link: "https://doc.xugaoyi.com/",
      },
      {
        name: "One",
        desc: "明心静性，爱自己",
        avatar: "https://onedayxyy.cn/img/xyy.webp",
        link: "https://onedayxyy.cn/",
      },
      {
        name: "Hyde Blog",
        desc: "人心中的成见是一座大山",
        avatar: "https://teek.seasir.top/avatar/avatar.webp",
        link: "https://teek.seasir.top/",
      },
      {
        name: "二丫讲梵",
        desc: "💻学习📝记录🔗分享",
        avatar: "https://wiki.eryajf.net/img/logo.png",
        link: " https://wiki.eryajf.net/",
      },
      {
        name: "粥里有勺糖",
        desc: "简约风的 VitePress 博客主题",
        avatar: "https://theme.sugarat.top/logo.png",
        link: "https://theme.sugarat.top/",
      },
      {
        name: "VitePress 快速上手中文教程",
        desc: "如果你也想搭建它，那跟我一起做吧",
        avatar: "https://avatars.githubusercontent.com/u/90893790?v=4",
        link: "https://vitepress.yiov.top/",
      },
      {
        name: "友人A",
        desc: "おとといは兎をみたの，昨日は鹿，今日はあなた",
        avatar: "http://niubin.site/logo.jpg",
        link: "http://niubin.site/",
      },
    ],
    autoScroll: true,
  },
  social: [
    {
      icon: "mdi:github",
      name: "GitHub",
      link: "https://github.com/kele-bingtang",
    },
    {
      icon: "simple-icons:gitee",
      name: "Gitee",
      link: "https://gitee.com/kele-bingtang",
    },
  ],
};

// 博客默认配置
export const teekBlogConfig: TeekConfig = {
  ...teekBlogCommonConfig,
  banner: {
    name: "One Blog 🎉",
    description: "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
    bgStyle: "partImg",
  },
};

// 博客小图配置
export const teekBlogParkConfig: TeekConfig = {
  ...teekBlogCommonConfig,
  banner: {
    name: "One Blog 🎉",
    bgStyle: "partImg",
    imgSrc: ["/blog/bg1.webp", "/blog/bg2.webp", "/blog/bg3.webp"],
    description: [
      "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
      "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu",
      "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw",
    ],
    descStyle: "switch",
  },
  footerGroup: [
    {
      title: "外部链接",
      links: [
        { name: "示例 1", link: "https://vp.teek.top" },
        { name: "示例 2", link: "https://vp.teek.top" },
        { name: "示例 3", link: "https://vp.teek.top" },
      ],
    },
    {
      title: "内部链接",
      links: [
        { name: "快速开始", link: "/guide/quickstart" },
        { name: "配置简介", link: "/reference/config" },
      ],
    },
  ],
};

// 博客大图配置
export const teekBlogFullConfig: TeekConfig = {
  ...teekBlogCommonConfig,
  post: {
    coverImgMode: "full",
  },
  banner: {
    name: "One Blog 🎉",
    bgStyle: "fullImg",
    imgSrc: ["/blog/bg1.webp", "/blog/bg2.webp", "/blog/bg3.webp"],
    description: [
      "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
      "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu",
      "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw",
    ],
    descStyle: "types",
  },
  comment: {
    provider: "giscus",
    options: {
      repo: "Kele-Bingtang/vitepress-theme-teek",
      repoId: "R_kgDONpVfBA",
      category: "Announcements",
      categoryId: "DIC_kwDONpVfBM4Cm3v9",
    },
  },
  codeBlock: {
    overlay: true,
  },
  themeEnhance: {
    themeColor: {
      append: [
        {
          label: "博客扩展主题",
          tip: "博客扩展主题",
          options: [
            { label: "紫罗兰", value: "violet", color: "#7166f0" },
            { label: "珊瑚粉", value: "coral-pink", color: "#ff6b6b" },
            { label: "天蓝", value: "sky-blue", color: "#00bbf9" },
            { label: "蓝绿", value: "blue-green", color: "#00f5d4" },
            { label: "石板灰", value: "slate-gray", color: "#708090" },
            { label: "粉红", value: "pink", color: "#f15bb5" },
            { label: "黄绿", value: "yellow-green", color: "#8ac926" },
            { label: "橙红", value: "orange-red", color: "#ff9e6b" },
          ],
        },
      ],
    },
  },
};

// 博客全图配置
export const teekBlogBodyConfig: TeekConfig = {
  ...teekBlogCommonConfig,
  pageStyle: "segment-nav",
  bodyBgImg: {
    imgSrc: ["/blog/bg1.webp", "/blog/bg2.webp", "/blog/bg3.webp"],
  },
  banner: {
    name: "One Blog 🎉",
    description: [
      "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
      "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu",
      "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw",
    ],
    descStyle: "types",
  },
  themeEnhance: {
    layoutSwitch: {
      defaultMode: "original",
    },
  },
};

// 博客卡片配置
export const teekBlogCardConfig: TeekConfig = {
  ...teekBlogCommonConfig,
  post: {
    postStyle: "card",
  },
  homeCardListPosition: "left",
  banner: {
    name: "One Blog 🎉",
    bgStyle: "fullImg",
    imgSrc: ["/blog/bg1.webp", "/blog/bg2.webp", "/blog/bg3.webp"],
    description: [
      "故事由我书写，旅程由你见证，传奇由她聆听 —— 来自 Young Kbt",
      "积跬步以至千里，致敬每个爱学习的你 —— 来自 Evan Xu",
      "这一生波澜壮阔或是不惊都没问题 —— 来自 Weibw",
    ],
    descStyle: "types",
  },
};

image-20250925061016688

image-20250925060959601

效果：

image-20250830100453653

编辑docs\.vitepress\config.ts文件：

ts
logo: "/xyy-favicon.ico", //网站logo

image-20250925061402155

效果：

image-20250830100637843

侧边栏 个人头像、呢称、背景图、座右铭、首页3个banner图片 ​

1.侧边栏 个人头像、呢称、背景图、座右铭 ​

编辑docs\.vitepress\teekConfig.ts文件：

ts
  blogger: {
    // 博主信息，显示在首页侧边栏

    name: "One", // 侧边栏个人昵称
    slogan: "明心静性，爱自己", // 侧边栏个人座右铭
    avatar: "/img/xyy.webp",  //侧边栏个人头像
    shape: "circle-rotate", // 头像风格：square 为方形头像，circle 为圆形头像，circle-rotate 可支持鼠标悬停旋转
    circleBgImg: "https://img.onedayxyy.cn/images/Teek/TeekBg/14.webp", // 侧边栏个人头像圆形背景图
    circleBgMask: false, // 头像圆形背景图是否显示遮罩层
    color: "#ffffff",
    circleSize: 120,
    status: {
      icon: "😪",
      size: 28,
      title: "困",
    },
  },

image-20250925061950359

效果：

image-20250830100947659

2.首页3个banner图片 ​

编辑docs\index.md文件：

md
  features: # 可选的
    - title: 初见
      details: 茫茫人海，我们相遇
      link: / # 可选
      # imgUrl: /img/web.png # 可选
      image: /img/xyy-1.webp # 可选
    - title: 幸福
      details: 与你一起，真的幸福
      link: /
      # imgUrl: /img/ui.png
      image: /img/xyy-2.webp
    - title: 后来
      details: 再见竟是，再也不见
      link: /
      # imgUrl: /img/other.png
      image: /img/xyy-3.webp

image-20250830102645933

效果：

image-20250830102718716

壁纸 ​

编辑docs\.vitepress\ConfigHyde\Wallaper.ts文件，把自己喜欢的图片放进去就好：

ts
// 首页壁纸 - 动态获取本地图片服务器的图片

// 壁纸服务配置 - 统一配置服务地址，一处修改全局生效
export const WALLPAPER_SERVICE_CONFIG = {
  baseUrl: 'https://imgapi.onedayxyy.cn',
  // baseUrl: 'https://imgapi.onedayxyy.cn',
  apiEndpoint: '/api/images',
  get fullUrl() {
    return `${this.baseUrl}${this.apiEndpoint}`
  }
}

// 备用图片列表（当本地服务不可用时使用）
const fallbackImages = [
  "https://img.onedayxyy.cn/images/Teek/TeekBg/1.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/2.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/3.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/4.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/5.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/6.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/7.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/8.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/9.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/10.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/11.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/12.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/13.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/14.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/15.webp", 
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/16.webp",
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/17.webp",
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/18.webp",
  // "https://img.onedayxyy.cn/images/Teek/TeekBg/19.webp",
];
// 动态获取图片列表的函数
async function fetchDynamicWallpapers(): Promise<string[]> {
  try {
    // 使用统一配置的图片服务API
    const response = await fetch(WALLPAPER_SERVICE_CONFIG.fullUrl, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
      },
    });
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    const data = await response.json();
    const images = data.images || [];
    
    // 将相对路径转换为完整的服务器URL
    const wallpapers = images.map((imagePath: string) => `${WALLPAPER_SERVICE_CONFIG.baseUrl}${imagePath}`);
    
    // 如果获取到图片，返回动态图片列表，否则返回备用图片
    return wallpapers.length > 0 ? wallpapers : wallpapers;
    
  } catch (error) {
    console.warn('无法获取动态壁纸，使用备用图片:', error);
    return fallbackImages;
  }
}

// 创建一个Promise来获取壁纸
let wallpaperPromise: Promise<string[]> | null = null;

// 获取壁纸的函数
function getWallpapers(): Promise<string[]> {
  if (!wallpaperPromise) {
    wallpaperPromise = fetchDynamicWallpapers();
  }
  return wallpaperPromise;
}

// 导出的Wallpaper数组 - 在服务端渲染时使用备用图片，客户端动态加载
export const Wallpaper: string[] = fallbackImages;

// 导出动态获取函数供主题使用
export { getWallpapers, fetchDynamicWallpapers };

这里的Teek博客的首页壁纸使用的是XGQ大佬开发的Go壁纸api，你可以选择继续使用我的壁纸。或者把这一行注释掉，然后换成自己的壁纸。

文章封面 ​

编辑docs\.vitepress\ConfigHyde\Cover.ts文件，把自己喜欢的图片放进去就好：

ts
// 首页壁纸
export const Cover = [
  "https://img.onedayxyy.cn/images/Teek/TeekCover/1.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/2.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/3.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/4.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/5.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/6.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/7.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/8.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/9.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/10.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/11.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/12.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/13.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/14.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/15.webp", 
  "https://img.onedayxyy.cn/images/Teek/TeekCover/16.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/17.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/18.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/19.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/20.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/21.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/22.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/23.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/24.webp",
  "https://img.onedayxyy.cn/images/Teek/TeekCover/25.webp",
];

以上的壁纸路径是我图床里的，你也可以把图片放大项目里，此时的路径就需要改为/img/xx.jpg了，这里使用的是相对路径，相对于docs\public目录而言的。

Twikoo评论 ​

（1）docker部署twikoo服务

Twikoo评论需要单独搭建服务，具体部署方法见如下链接：《 https://onedayxyy.cn//zhuanti/twikoo-install 》

image-20251028150604341

（2）次项目配置Twikoo

编辑docs\.vitepress\theme\components\Twikoo.vue文件：

vue
envId: 'https://twikoo.onedayxyy.cn/', // 换成你自己配置的域名

image-20251028150737417

Algolia搜索 ​

Algolia搜索需要单独搭建服务，具体部署方法见如下链接：《 https://onedayxyy.cn/teek/algolia 》

Teek博客默认支持本地搜索，但是当数据量大的时候，就会出现卡顿现象。因此这里需手动配置下Algolia搜索。配置过程，稍微会复杂点，但是按文档提示的来，一般没多大问题。

image-20251028143619938

以上文档包含了Algolia配置过程，及项目配置过程。

3、管理数据 ​

以上个人信息修改完后，我们看下如何往博客里新增文章数据呢？

  1. 如何把原有博客数据迁移到Teek博客？
  2. 如何在Teek博客新建文章呢？

请看下文。

1.迁移数据 ​

（特别注意🛑）

（1）删除模板中存在的老数据

此时，就可以把模板docs目录下的10.运维、15.前端……65.Teek等 目录都 给删除了，然后把你之前的个人笔记数据给放到Teek的docs目录下，然后按上面提到的方式命名。

image-20250916124457183

（2）创建自己的新数据

例如，我们会创建如下目录结构：（每个目录下有多个子目录或者md）

image-20250916124611304

具体目录结构截图示例：

image-20250916124651754

image-20250916124722161

特别注意：

在把你之前的数据迁移到teek时，这里需要格外注意一个问题。

teek目前使用rewrite模式的autoformatter插件来给md强制注入永久permalink，每个md的permalink格式为/一级前缀/随机uid。

因此，当你想要使用teek的rewrite模式后，这里需要我们提前配置一点东西，后续就可以丝滑使用了：

（3）指定一级前缀规则

编辑docs\.vitepress\config.ts文件：

ts
                  { folderName: "10.运维", prefix: "/linux/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "15.前端", prefix: "/qianduan/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "20.编程", prefix: "/code/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "25.黑客", prefix: "/hacker/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "30.专题", prefix: "/zhuanti/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "35.工具", prefix: "/tools/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "40.生活", prefix: "/life/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "45.精神小屋", prefix: "/love/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "50.娱乐", prefix: "/yule/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "55.兴趣", prefix: "/xingqu/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "60.关于", prefix: "/about/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数
                  { folderName: "65.Teek", prefix: "/teek/$uuid5", removeLevel: 99}, // 清空前缀并且添加前缀使用随机数

image-20250916124836366

即：有多少个一级目录，那么配置文件那里就必须配置多少行，这样每个一级目录下的内容就会出现在同一个侧边栏了。

配置完成后，不管你之前的md是否有permalink，teek的autoformatter插件都会强制注入永久permalink。（先可以用其他少量文档做下测试，没问题后，再迁移自己的个人数据。我这里都是测试没问题的，大家可以放心食用。🤣）

（4）配置导航栏项

你需要做的就是，在docs\.vitepress\ConfigHyde\Nav.ts文件里配置对应的url即可：

这里为了方便管理，每个一级目录下最好存放一个md,其序号可以命名为01. 让其为最优先的一个文件。（导航栏对应的菜单就可以配置对应一级目录下这个文件的permalink就行了。）

详细信息
ts
// nav导航栏配置
import { TeekIcon, VdoingIcon, SSLIcon, BlogIcon } from "./icon/NavIcon";
export const Nav = [
    { text: "🏡首页", link: "/" },





    // 笔记
    {
      text: '📚文档',
      items: [
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/linux.svg" alt="" style="width: 16px; height: 16px;">
              <span>运维</span>
            </div>
            `,
          link: '/linux/linux-index',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/前端.svg" alt="" style="width: 16px; height: 16px;">
              <span>前端</span>
            </div>
            `,
          link: '/qianduan/qianduan-index',
        },
                {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/编程.svg" alt="" style="width: 16px; height: 16px;">
              <span>编程</span>
            </div>
            `,
          link: '/code/code-index',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/黑客.svg" alt="" style="width: 16px; height: 16px;">
              <span>黑客</span>
            </div>
            `,
          link: '/hacker/hacker-index',
        },
      ],
    },  

    // 专题
    {
      text: '🛠️专题',
      items: [
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/teek.svg" alt="" style="width: 16px; height: 16px;">
              <span>Teek</span>
            </div>
            `,
          link: '/teek/teek-blog',
        },        
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/Git.svg" alt="" style="width: 16px; height: 16px;">
              <span>Git</span>
            </div>
            `,
          link: '/zhuanti/git',
        },


        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/脚本.svg" alt="" style="width: 16px; height: 16px;">
              <span>脚本</span>
            </div>
            `,
          link: '/zhuanti/jiaoben',
        },
     
      ],
    },  







    // 生活
    {
      text: '🏓生活',
      items: [
        {
          // 分组标题1
          text: '娱乐',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/相册.svg" alt="" style="width: 16px; height: 16px;">
                  <span>相册</span>
                </div>
                `,
              link: '/yule/photo',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/电影.svg" alt="" style="width: 16px; height: 16px;">
                  <span>电影</span>
                </div>
                `,
              link: '/yule/movie',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/音乐.svg" alt="" style="width: 16px; height: 16px;">
                  <span>音乐</span>
                </div>
                `,
              link: '/yule/music',
            },
          ],
        },
        {
          // 分组标题2
          text: '小屋',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/精神小屋.svg" alt="" style="width: 16px; height: 16px;">
                  <span>精神小屋</span>
                </div>
                `,
              link: '/love/inner',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/时间管理.svg" alt="" style="width: 16px; height: 16px;">
                  <span>时间管理</span>
                </div>
                `,
              link: '/love/time-plan',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/文案.svg" alt="" style="width: 16px; height: 16px;">
                  <span>情感文案</span>
                </div>
                `,
              link: '/love/wenan',
            },
            // { text: "💖情侣空间", link: "https://fxj.onedayxyy.cn/" },
          ],
        },
        // 兴趣
        {
          text: '兴趣',
          items: [
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/旅行.svg" alt="" style="width: 16px; height: 16px;">
                  <span>旅行</span>
                </div>
                `,
              link: '/xingqu/travel',
            },
            {
              text: `
                <div style="display: flex; align-items: center; gap: 4px;">
                  <img src="/img/nav/读书.svg" alt="" style="width: 16px; height: 16px;">
                  <span>读书</span>
                </div>
                `,
              link: '/xingqu/reading',
            },
          ],
        },  

      ],
    },  


    // // 兴趣
    // {
    //   text: '🎨兴趣',
    //   items: [
    //     {
    //       text: `
    //         <div style="display: flex; align-items: center; gap: 4px;">
    //           <img src="/img/nav/旅行.svg" alt="" style="width: 16px; height: 16px;">
    //           <span>旅行</span>
    //         </div>
    //         `,
    //       link: '/xingqu/travel',
    //     },
    //     {
    //       text: `
    //         <div style="display: flex; align-items: center; gap: 4px;">
    //           <img src="/img/nav/读书.svg" alt="" style="width: 16px; height: 16px;">
    //           <span>读书</span>
    //         </div>
    //         `,
    //       link: '/xingqu/reading',
    //     },
    //   ],
    // },  
    
    
    // 索引
    {
      text: '👏索引',
      items: [
        { text: '📃分类页', link: '/categories' },
        { text: '🔖标签页', link: '/tags' },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/归档.svg" alt="" style="width: 16px; height: 16px;">
              <span>归档页</span>
            </div>
            `,
          link: '/archives',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/清单.svg" alt="" style="width: 16px; height: 16px;">
              <span>清单页</span>
            </div>
            `,
          link: '/articleOverview',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/登录.svg" alt="" style="width: 16px; height: 16px;">
              <span>登录页</span>
            </div>
            `,
          link: '/login',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/风险提示.svg" alt="" style="width: 16px; height: 16px;">
              <span>风险链接提示页</span>
            </div>
            `,
          link: '/risk-link?target=https://onedayxyy.cn/',
        },
      ],
    },  

    // 关于
    {
      text: '🍷关于',
      items: [
        { text: '👋关于我', link: '/about/me' },
        { text: '🎉关于本站', link: '/about/website' },
        { text: '💖友链', link: '/about/friend-links' },
        { text: '🌐网站导航', link: '/about/websites' },          
        { text: "👂留言区", link: "/about/liuyanqu" },
        { text: "💡思考", link: "/about/thouht" },
        { text: "💡情侣相册", link: "/about/love" },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/时间轴.svg" alt="" style="width: 16px; height: 16px;">
              <span>时间轴</span>
            </div>
            `,
          link: '/about/time-line',
        },
        { text: "💡朋友圈", link: "/about/pyq" },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/网站统计.svg" alt="" style="width: 16px; height: 16px;">
              <span>网站统计</span>
            </div>
            `,
          link: 'https://umami.onedayxyy.cn/share/DzS4g85V8JkxsNRk/onedayxyy.cn',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/站点监控.svg" alt="" style="width: 16px; height: 16px;">
              <span>站点监控</span>
            </div>
            `,
          link: 'https://status.onedayxyy.cn/status/monitor',
        },
        { text: "📌我的云盘", link: "https://zdir.onedayxyy.cn/" },

      ],
    },       
  ]

最后形成的导航栏如下：

image-20250916124940975

2.新增md ​

如果你想要新建一个md，该如何呢？

你只需要在对应目录下，新创建一个md就好，但是注意命名必须类似为 20.中国.md才行（以此为例）。

运行项目后，Teek里的autoformatter插件会自动给注入formater参数（如下截图）（你无需做任何操作）：

运行，然后观察效果：

bash
pnpm docs:dev

image-20250916125332157

4、发布博客 ​

以上个人的笔记数据已经整理好了，接下来，我们就把自己博客发布到公网上，供其它用户访问。

有以下2种方式：

  1. cnb+eop（无服务器版）（推荐）
  2. 传统云服务器部署：云服务器+nginx

方式1：CNB+Eo Pages（推荐） ​

这里推荐使用CNB+Eo Pages，非常丝滑。

《CNB配合eo托管静态博客》（腾讯的eo Pages也的确丝滑）

image-20250916052145610

具体步骤：

  1. 注册CNB，注册腾讯的EO;
  2. 把Teek项目代码上传到CNB仓库；
  3. 配置CNB流水线，一键发布博客到EO的Pages；

备注：

CNB是腾讯推出的云原生构建产品，EO是腾讯推出的免费cdn；

方式2：传统的云服务器部署 ​

传统的云服务器部署，然后利用nginx代理。

（1）自己电脑得提前安装好git和nodejs：

（2）在自己winodws pc上部署Teek

bash
#来到自己电脑d盘
cd /d/
#项目拉取
git clone https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public.git

cd /d/vitepress-theme-teek-one-public
#依赖安装（只能用 pnpm 安装依赖）
pnpm install

#项目本地运行
pnpm docs:dev #本地运行

#项目打包
pnpm docs:build

执行pnpm docs:dev后，浏览器默认就会打开一个http://localhost:5173/网页：（恭喜你，此时你的Teek博客已经部署完成了）

（3）将Teek生成的静态文件推送到云服务器的nginx站点目录下

利用pnpm docs:build 命令打包好静态文件，然后把docs\.vitepress\dist路径下的内容直接传输到自己的云服务器的nginx站点目录下，这样其它小伙伴就可以通过域名来访问你的博客了。

特别注意：

一般情况，自己的云服务器都是通过nginx来代理静态站点的，但是这里需要单独做一个额外的配置，否则自己的Teek博客部署到云服务器后，刷新url会报404。

具体配置方法如下：

vim /etc/nginx/conf.d/onedayxyy.cn.conf （这里编辑自己的nginx配置文件就好）

bash
    location / {
        index index.html index.htm;
        try_files $uri $uri.html $uri/ =404; #添加这一行

		……
    }

image-20250516062832580

配置后重启nginx： nginx -s reload

nginx完整配置如下：

bash
[root@wiki ~]# cat /etc/nginx/conf.d/onedayxyy.cn.conf 
server {
    listen 80;
    server_name onedayxyy.cn;
    #配置https重定向
    return 301 https://$host$request_uri;
}

server {
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;


    listen  443 ssl;
    server_name  onedayxyy.cn;

    root /root/rsync/rsync-vitepress/dist;    
    location / {
        index index.html index.htm;
        try_files $uri $uri.html $uri/ =404;

        # non existent pages
        error_page 404 /404.html;

        # a folder without index.html raises 403 in this setup
        error_page 403 /404.html;

        # adjust caching headers
        # files in the assets folder have hashes filenames
        location ~* ^/assets/ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    } 

    location /images {
        alias /images;
        index index.html;
      valid_referers none blocked *.onedayxyy.cn onedayxyy.cn *.gitee.com gitee.com *.cnb.cool cnb.cool *.sleele.com localhost 127.0.0.1;
      if ( $invalid_referer ) {
           # 如不满足，指定访问如下资源
           rewrite ^/ https://onedayxyy.cn/error/1.png;
           return 403;
      }
    }
    

    location /error {
        autoindex on; # 启用目录索引
        alias /FdangDaoLianImages;
        index index.html;   # 默认显示index.html文件，如果没有则列出目录内容
    }   
    

    ssl_certificate             /etc/letsencrypt/live/onedayxyy.cn/fullchain.pem;
    ssl_certificate_key         /etc/letsencrypt/live/onedayxyy.cn/privkey.pem; 

    ssl_session_timeout 5m;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    add_header Strict-Transport-Security "max-age=31536000";
    
    access_log /var/log/nginx/onedayxyy.cn.https.log;
}

（4）验证

访问自己域名：

https://onedayxyy.cn/

image-20250502073710566

扩展

如何将本地Teek生成的静态文件推送到云服务器的nginx站点目录，有多种办法（见如下详细链接）：

  1. shell一键发布 （shell一键发布版内容到teek网站）
  2. 或者利用其它传输软件；（例如sftp,ftp,winscp……）

5、升级 ​

一条命令就可以完成在线升级，特别丝滑哦。

bash
pnpm add vitepress-theme-teek@latest -D

FAQ ​

日志 ​

具体官方更新日志见如下链接：《更新日志》

image-20250818122615463

计划 ​

  1. 重点优化 简约 风格博客功能
  2. 添加一些其他主题/博客 有趣的元素到Teek里
  3. Teek性能、细节持续优化
  4. 希望有更多大佬能参与到这个项目，贡献自己一份力量
  5. 选一些好看的壁纸(风景/妹纸/动漫等)
  6. ……

反馈 ​

在使用过程中有任何问题和想法，请给作者提 Issue。 你也可以在 Issue 查看别人提的问题和给出解决方案。

或者加入我们的交流群，请前往 Teek 官网 的首页查看进群方式。（或者 添加我的微信并备注 进Teek群）

image-20230107215114763

赞赏 ​

警告

次赞赏为直接给原作者充电，感谢大家热爱开源。好的产品，值得付费。😜

如果您正在使用这个项目并感觉这个项目给你带来帮助，或者是想支持我继续开发，您可以通过如下任意方式支持我：

  • Star 并分享 VitePress Theme Teek 🚀
  • 通过以下二维码进行赞助，打赏作者一杯茶 🍵

谢谢！❤️

微信赞赏微信支付宝

您的赞助将帮助 Teek：

  • 维护项目的基础设施
  • 投入更多时间进行开发
  • 提供更好的技术支持
  • 开发更多实用功能

致谢 ​

❤️ 感谢威武的群主开发了这个优秀的产品。

❤️ 感谢支持这个项目的朋友，您的每一份帮助都让这个项目变得更好！

❤️ 感谢为这个项目贡献代码的朋友 → Contributors

扩展 ​

其它Teek小伙伴：

image-20250916052709183

其它VitePress网站：

image-20250818123236958

关于我 ​

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 个人网站

image-20250109220325748

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

最后 ​

如果你还有疑惑，可以去我的网站查看更多内容或者联系我帮忙查看。

如果你有更好的方式，评论区留言告诉我。谢谢！

好了，本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

image-20251028052827315

最近更新