使用文档

Typora-one模板小白使用文档

说明

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

前提条件

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

安装好git；
安装好nodejs；（Node.js 需要满足18.0.0 及以上版本）

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

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

NOTE

以上方式的确快速帮你拉起了一个Teek网站，但是里的数据都是作者One的信息，此时你需要修改为自己的信息，请看下文。

2、配置博客

个人信息。

模板拉起的博客默认是菜鸡 One的一些个人信息，此时，你需要修改为自己的个人信息，需要修改的个人信息如下：

个人信息：
1. 侧边栏个人头像、呢称、背景图、座右铭；
2. 网页名称、左上角名称、标签页名称、网站logo；
3. 联系方式；
4. 友链；
5. 壁纸配置：个人壁纸、文章封面壁纸；
6. 文档风 or 博客风；
7. 导航栏
其它服务：
1. twikoo评论系统
2. Algolia搜索
3. Umami监控

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

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

  blogger: {
    // 博主信息，显示在首页侧边栏
    avatar: "/img/xyy.webp",  //侧边栏个人头像
    shape: "circle-rotate", // 头像风格：square 为方形头像，circle 为圆形头像，circle-rotate 可支持鼠标悬停旋转
    name: "One", // 侧边栏个人昵称
    slogan: "明心静性，爱自己", // 侧边栏个人座右铭
    circleBgImg: "https://img.onedayxyy.cn/images/TeekBg/14.webp", // 侧边栏个人头像圆形背景图
    circleBgMask: false, // 头像圆形背景图是否显示遮罩层
    color: "#fff",
  },

效果：

（2）首页3个banner图片

编辑docs\index.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

效果：

2.左上角网站名称、标签页名称、首页网站名称、网站logo

（1）左上角网站名称

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

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

效果：

（2）标签页名称

编辑docs\index.md文件：

title: One
titleTemplate: 明心静性，爱自己

效果：

（3）首页网站名称

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

效果：

（4）网站logo

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

logo: "/favicon.ico",   //网站logo

效果：

（1）联系方式

编辑docs\.vitepress\ConfigHyde\SocialDate.ts文件：

// 卡片栏社交信息
import { Social } from "vitepress-theme-teek/config";

export const SocialDate: Social[] = [
  {
    icon: "mdi:github",
    name: "GitHub",
    link: "https://cnb.cool/onedayxyy",
  },
  {
    icon: "simple-icons:gitee",
    name: "Gitee",
    link: "https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public",
  },
  {
    icon: "icon-qq",
    iconType: "iconfont",
    name: "QQ",
    // link: "http://wpa.qq.com/msgrd?v=3&uin=2675263825&site=qq&menu=yes",
    link: "https://img.onedayxyy.cn/images/Teekwebsite/teek-hg-qq.jpg",
  },
  {
    icon: "icon-mobile",
    iconType: "iconfont",
    name: "微信",
    // link: "https://onedayxyy.cn/?contact=true",
    link: "https://img.onedayxyy.cn/images/image-20230107215114763-1694437284994-1-1697348761221-1-1697407921190-1-1697636582091-3-1698965093137-1.png",
  },
];

效果：

（2）友链

编辑docs\.vitepress\ConfigHyde\FriendLink.ts文件：

// FriendLink用于在首页展示一些友链
export const FriendLink = {
  enabled: true, // 是否启用友情链接卡片
  limit: 5, // 一页显示的数量
  // autoScroll: true, // 是否自动滚动
  // scrollSpeed: 2500, // 滚动间隔时间，单位：毫秒。autoScroll 为 true 时生效

  autoPage: true, // 是否自动翻页
  pageSpeed: 4000, // 翻页间隔时间，单位：毫秒。autoPage 为 true 时生效
  titleClick: (router) => router.go("/websites"), // 查看更多友链

  // 友情链接数据列表
  list: [
    {
      avatar: "/teek-logo-large.png",
      name: "vitepress-theme-teek",
      desc: "Teek官网",
      link: "https://vp.teek.top/",
    },  
    {
      name: "Teeker",
      desc: "朝圣的使徒，正在走向编程的至高殿堂！",
      link: "http://notes.teek.top/",
      avatar: "https://testingcf.jsdelivr.net/gh/Kele-Bingtang/static/user/avatar2.png",
    },     
    {
      avatar: "https://img.onedayxyy.cn/images/Teekwebsite/hyde.webp",
      name: "Hyde Blog",
      desc: "人心中的成见是一座大山",
      link: "https://teek.seasir.top/",
    },
    {
      avatar: "https://wiki.eryajf.net/img/logo.png",
      name: "二丫讲梵",
      desc: "💻学习📝记录🔗分享",
      link: "https://wiki.eryajf.net/",
    },
    {
      avatar: "https://img.onedayxyy.cn/images/Teekwebsite/sugarat.top-logo.jpeg",
      name: "粥里有勺糖",
      desc: "你的指尖,拥有改变世界的力量",
      link: "https://sugarat.top/",
    },
    {
      avatar: "https://img.onedayxyy.cn/images/POETIZE-logo.jpg",
      name: "POETIZE",
      desc: "最美博客",
      link: "https://poetize.cn/",
    },
    {
      avatar: "https://img.onedayxyy.cn/images/image-20250220073534772.png",
      name: "宇阳",
      desc: "记录所学知识，缩短和大神的差距！",
      link: "https://liuyuyang.net",
    },
    {
      avatar: "https://img.onedayxyy.cn/images/Teekwebsite/blog.grtsinry43.com.jpeg",
      name: "Grtsinry43’s Blog",
      desc: "总之岁月漫长，然而值得等待 ",
      link: "https://blog.grtsinry43.com/",
    },  
    {
      avatar: "https://img.onedayxyy.cn/images/Teekwebsite/blog.zhheo.com.png",
      name: "张洪Heo",
      desc: "分享设计与科技生活",
      link: "https://blog.zhheo.com/",
    },    
    {
      name: "王嘉祥",
      desc: "唱响科普和人生兴事，分享科技与美好生活（rust写的zola主题，移植于张洪heo）",
      link: "https://blog.jiaxiang.wang/",
      avatar: "https://img.onedayxyy.cn/images/Teekwebsite/blog.jiaxiang.wang.webp",
    },    
  ],
  // autoScroll: true,
};

效果：

（3）footer

编辑

D:\vitepress-theme-teek-one-private\docs\.vitepress\ConfigHyde\FooterInfo.ts文件：

// 底部信息配置
import { version } from "vitepress-theme-teek/es/version"; // 导入版本号

export const FooterInfo = {
  topMessage: [
    `<span><img alt="VitePress" src="https://liuyuyang.net/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fanimals.65eaf6e3.webp&w=750&q=75"><span/>`,
  
    `<a target="_blank" href="https://vitepress.dev/" title="本站框架基于 VitePress_v1.6.3" ><img alt="VitePress" src="https://img.shields.io/badge/Frame-VitePress-4868C2?logo=vitepress&amp;logoColor=fff" ></a>

    <a target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="本站内容采用 CC BY-NC-SA 4.0 国际许可协议进行许可"><img alt="Copyright" src="https://img.shields.io/badge/Copyright-BY--NC--SA%204.0-d42328?logo=coursera&amp;logoColor=fff"></a>
    
    <a target="_blank" href="https://twikoo.js.org/" title="本站评论系统使用 Twikoo" ><img alt="Twikoo" src="https://img.shields.io/badge/Comments-Twikoo-0072F9"></a>
    
    <a target="_blank" href="https://www.algolia.com/" title="本站搜索服务使用 Algolia"><img alt="Algolia" src="https://img.shields.io/badge/Search-Algolia-3095FA?logo=Algolia"></a>

    <a target="_blank" href="https://www.ucloud.cn/" title="本站部署服务使用 ucloud"><img alt="ucloud" src="https://img.shields.io/badge/Ucloud-Server?logo=alibabacloud&label=Server&color=%23FF6A00"></a> 

    <a target="_blank" href="https://edgeone.ai/zh" title="本站部署服务使用 EdgeOne"><img alt="EdgeOne" src="https://img.shields.io/badge/EdgeOne-CDN?logo=alibabacloud&label=CDN&color=%23FF6A00"></a>
    
    <a target="_blank" href="https://51.la/" title="本站统计服务使用 51.LA"><img alt="51.LA" src="https://img.shields.io/badge/51.LA-000000?logo=51.LA&label=Count&color=%23FF6A00"></a>

    
    <a target="_blank" href="https://nginx.org/" title="本站Nginx反向代理服务 Nginx"><img alt="Nginx" src="https://img.shields.io/badge/Nginx-Proxy?logo=Nginx&label=Proxy"></a>`,
  ],
  theme: {
    name: `Theme By Teek@${version}-2025.8.24`,
  },
  bottomMessage: [
    `<script id="LA-DATA-WIDGET" crossorigin="anonymous" charset="UTF-8" src="https://v6-widget.51.la/v6/3LmZHLhDZIDpMaT0/quote.js?theme=#1690FF,#333333,#999999,#007BFF,#FFFFFF,#1690FF,12&f=12&display=0,0,1,1,1,1,1,1"></script>`,
    // `<span id="runtime"></span>(●'◡'●)`,
    "初闻不知曲中意，再听已是曲中人",
  ],
  copyright: {
    createYear: 2021,
    suffix: "One Blog",
  },
  icpRecord: {
    name: "陇ICP备2023002645号",
    link: "http://beian.miit.gov.cn/",
  },
  // 网络安全备案信息配置
  securityRecord: {
    name: "甘公网安备62102702000211号",
    link: "https://beian.mps.gov.cn/",
  },
  customHtml: ``, // 搭配 ./theme/composables/useRuntime.ts
};

效果：

4.壁纸配置

（1）首页壁纸配置

编辑docs\.vitepress\ConfigHyde\Wallaper.ts文件：

// 首页壁纸
export const Wallpaper = [
  "https://img.onedayxyy.cn/images/TeekBg/1.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/2.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/3.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/4.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/5.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/6.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/7.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/8.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/9.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/10.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/11.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/12.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/13.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/14.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/15.webp", 
  "https://img.onedayxyy.cn/images/TeekBg/16.webp",
  "https://img.onedayxyy.cn/images/TeekBg/17.webp",
  "https://img.onedayxyy.cn/images/TeekBg/18.webp",
  "https://img.onedayxyy.cn/images/TeekBg/19.webp",
];

效果：

把这里的图片替换为你自己图片地址，可以使用图床地址，或者把图片放本地路径：
例如：/img/bg/1.webp 这里相对目录指的是docs\public目录下。

（2）文章封面配置

编辑docs\.vitepress\ConfigHyde\Cover.ts文件：

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

效果：

把这里的图片替换为你自己图片地址，可以使用图床地址，或者把图片放本地路径：
例如：/img/bg/1.webp 这里相对目录指的是docs\public目录下。

5.文档风 or 博客风

默认我的Teek-one模板是博客风，如果你想切换到默认文档风格，请按如下配置。

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

注释博客风格，去掉docs风格注释

// import { teekDocConfig } from "../config/teekConfig";
import { teekBlogCardConfig } from "../config/teekConfig";

// 默认文档风
const currentStyle = ref("doc");
const teekConfig = ref(teekDocConfig);

// 博客 卡片风
// currentStyle = ref("blog-card");
// teekConfig = ref(teekBlogCardConfig);

6.导航栏

如果你想自定义自己的导航看，请看如下配置：

编辑docs\.vitepress\ConfigHyde\Nav.ts文件：

// nav导航栏配置
import { TeekIcon, VdoingIcon, SSLIcon, BlogIcon } from "./icon/NavIcon";
export const Nav = [
    { text: "🏡首页", link: "/" },
    {
      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-one',
    },




    // 笔记
    {
      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/博客.svg" alt="" style="width: 16px; height: 16px;">
              <span>博客搭建</span>
            </div>
            `,
          link: '/zhuanti/blog',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/前端demo.svg" alt="" style="width: 16px; height: 16px;">
              <span>前端demo</span>
            </div>
            `,
          link: '/zhuanti/qianduan-demo',
        },
        {
          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/mianshi',
        },
        {
          text: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/NAS.svg" alt="" style="width: 16px; height: 16px;">
              <span>NAS</span>
            </div>
            `,
          link: '/zhuanti/NAS',
        },
        {
          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: `
            <div style="display: flex; align-items: center; gap: 4px;">
              <img src="/img/nav/工具.svg" alt="" style="width: 16px; height: 16px;">
              <span>工具</span>
            </div>
            `,
          link: '/tools/tools',
        },
        {
          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/opensource',
        },        
      ],
    },  







    // 生活
    {
      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: '📃分类页', 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/websites' },          
        { text: "👂留言区", link: "/about/liuyanqu" },
        { text: "💡思考", link: "/about/thinking" },
        {
          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://one.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://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',
        },

      ],
    },       
  ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331

效果：

注意：

此时我的docs下目录数据结构如下

另外，需要注意的是：

docs下的每一个目录成为一级目录，每个一级目录下必须得有个md，后续nav里的对应链接就可以填这个Md的url：示例如下：

7.修改右上角gitee地址

编辑docs\.vitepress\ConfigHyde\SocialLinks.ts文件：

import { gitee, email, WhatsApp, telegram } from "../theme/icon/icons";

export const SocialLinks = [
  {
    icon: { svg: gitee },
    link: "https://cnb.cool/onedayxyy/vitepress-theme-teek-one-public",
  },
  // {
  //   icon: { svg: email },
  //   link: "mailto:2675263825@qq.com",
  // },
  // {
  //   icon: { svg: WhatsApp },
  //   link: "https://api.whatsapp.com/send/?phone=13527063419&text=Hello",
  // },
  // {
  //   icon: { svg: telegram },
  //   link: "https://t.me/seasir_Bot",
  // },
  // {
  //   icon: "github",
  //   link: "https://github.com/Kele-Bingtang/vitepress-theme-teek/tree/dev",
  // },
];

效果：

8.公告信息

修改公告信息：

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

// 公告内容
const noticeContent: NoticeContent = {
  title: '📢 重要公告',
  subtitle: '全网最美博客Teek🎉',
  content: 'Teek~一款简约、唯美、丝滑且强大的VitePress主题博客(知识库&博客二合一) ，正在持续迭代更新，欢迎交流学习！',
  operationButtonName: '查看详情',
  operationButtonPath: 'https://vp.teek.top/',
};

效果：

9.修改关于我、关于本站

编辑这2个文件就好：

3、扩展其它

1.命名规则

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

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

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

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

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

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

提示

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

如果不希望 URL 上带有序号，请给每一个 Markdown 指定一个永久链接 frontmatter.permalink。

说明

没有为什么，照着弄就行；（这里都是最佳实践，刚开始可能感觉有点怪，但是用着用着就会觉得极其丝滑）

2.迁移数据

此时，就可以把模板默认的数据删除，然后把你之前的个人笔记数据给放到Teek的docs目录下了，然后按上面提到的方式命名。

例如：

10.运维

20.前端

30.编程

……

再继续更新md数据，直到发布博客。

⚡我自己的目录站点如下：

3.发布方式

方式1：

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

方式2：

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

使用文档

Typora-one模板小白使用文档

目录

说明

前提条件

1、部署博客

2、配置博客

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

2.左上角网站名称、标签页名称、首页网站名称、网站logo

3.联系方式、友链、footer

4.壁纸配置

5.文档风 or 博客风

6.导航栏

7.修改右上角gitee地址

8.公告信息

9.修改关于我、关于本站

3、扩展其它

1.命名规则

2.迁移数据

3.发布方式

使用文档 ​

Typora-one模板小白使用文档 ​

目录 ​

说明 ​

前提条件 ​

1、部署博客 ​

2、配置博客 ​

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

2.左上角网站名称、标签页名称、首页网站名称、网站logo ​

3.联系方式、友链、footer ​

4.壁纸配置 ​

5.文档风 or 博客风 ​

6.导航栏 ​

7.修改右上角gitee地址 ​

8.公告信息 ​

9.修改关于我、关于本站 ​

3、扩展其它 ​

1.命名规则 ​

2.迁移数据 ​

3.发布方式 ​

使用文档

Typora-one模板小白使用文档

目录

说明

前提条件

1、部署博客

2、配置博客

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

2.左上角网站名称、标签页名称、首页网站名称、网站logo

3.联系方式、友链、footer

4.壁纸配置

5.文档风 or 博客风

6.导航栏

7.修改右上角gitee地址

8.公告信息

9.修改关于我、关于本站

3、扩展其它

1.命名规则

2.迁移数据

3.发布方式