Teek-one模板手把手使用教程

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,
};

效果：

编辑

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目录下。

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个文件就好：

更多……（待更新）

时光风格

Teek-one模板手把手使用教程

3.联系方式、友链、footer

1.联系方式

2.友链

3.footer

4.壁纸配置

6.导航栏

7.修改右上角gitee地址

8.公告信息

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

Teek-one模板手把手使用教程 ​

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

1.联系方式 ​

2.友链 ​

3.footer ​

4.壁纸配置 ​

6.导航栏 ​

7.修改右上角gitee地址 ​

8.公告信息 ​

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

Teek-one模板手把手使用教程

3.联系方式、友链、footer

1.联系方式

2.友链

3.footer

4.壁纸配置

6.导航栏

7.修改右上角gitee地址

8.公告信息

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