风格切换

环境

注意

此配置适用于Teek@1.0.0-alpha.9-2025.4.6版本（其它版本可自行测试）。

Teek.Layout 注册

• 在docs\.vitepress\theme\components\TeekLayoutProvider.vue配置以下代码

<template>
  <Teek.Layout>
    <template #nav-bar-content-after> 省略... </template>
    <!-- 不添加下面影响公告样式 -->
    <template v-for="(_, name) in $slots" :key="name" #[name]>
      <slot :name="name" />
    </template>
    <!-- 不添加上面面影响公告样式 -->
  </Teek.Layout>
</template>

主题入口文件

• 在docs\.vitepress\theme\index.ts配置以下代码

import TeekLayoutProvider from "./components/TeekLayoutProvider.vue"; 
export default {
  Layout: defineComponent({
    setup() {
      return () =>
        h(Teek.Layout, props, { 
        h(TeekLayoutProvider, null, { 
        });
  }),
};

BannerImgArrow 组件

• 在docs\.vitepress\theme\components\BannerImgArrow.vue 添加以下代码

<div v-if="theme.banner.bgStyle === 'fullImg' && !isMobile" :class="`${namespace}-arrow tk-wallpaper-outside`">
<div v-if="theme.banner?.bgStyle === 'fullImg' && !isMobile" :class="`${namespace}-arrow tk-wallpaper-outside`">

配置文件

teekConfig.ts

// docs\.vitepress\theme\config\teekConfig.ts
import type { TeekConfig } from "vitepress-theme-teek/config";
import { Features } from "../../ConfigHyde/Features"; // 导入Features模块
import { FriendLink } from "../../ConfigHyde/FriendLink"; // 导入FriendLink模块
import { HitokotoDate } from "../../ConfigHyde/HitokotoDate"; // 导入HitokotoData模块
import { SocialDate } from "../../ConfigHyde/SocialDate"; // 导入SocialDate社交信息模块
import { Wallpaper } from "../../ConfigHyde/Wallaper"; // 导入Wallaper模块

// 文档配置
export const teekDocConfig: TeekConfig = {};

// 博客配置
export const teekBlogConfig: TeekConfig = {
  teekHome: true,
  vpHome: false,

  blogger: {
    // 博主信息，显示在首页侧边栏
    avatar: "/avatar/avatar.webp",
    shape: "square", // 头像风格：square 为方形头像，circle 为圆形头像，circle-rotate 可支持鼠标悬停旋转
    name: "Hyde",
    slogan: "人心中的成见是一座大山~",
  },
  banner: {
    features: Features, //用于在首页展示一些功能介绍,也就是首页三个功能块
    enabled: true, // Banner 标题，默认读取 vitepress 的 title 属性
    name: "Hyde Blog 🎉", // Banner 标题，默认读取 vitepress 的 title 属性
    bgStyle: "fullImg", // Banner 背景风格：pure 为纯色背景，partImg 为局部图片背景，fullImg 为全屏图片背景
    imgInterval: 8000, // 轮播时间
    imgShuffle: true, // 当多张大图时（imgSrc 为数组），设置切换时间，单位：毫秒
    imgSrc: Wallpaper, // Banner 大图
    descStyle: "types", //打字机效果；types 为文字打印风格，switch 为文字切换风格
    maskBg: "rgba(0, 0, 0, 0.4)", // Banner 大图遮罩颜色，如果为数字，则是 rgba(0, 0, 0, ${maskBg})，如果为字符串，则作为背景色
    textColor: "#ffffff", // Banner 字体颜色，bgStyle 为 default 时为 '#000000'，其他为 '#ffffff'
    titleFontSize: "3.2rem", // 标题字体大小
    descFontSize: "1.4rem", // 描述字体大小
    // descStyle: "types", // 描述信息风格：default 为纯文字渲染风格（如果 description 为数组，则取第一个），types 为文字打印风格，switch 为文字切换风格
    description: HitokotoDate, // 打字机描述信息
    switchTime: 4000, // 描述信息切换间隔时间，单位：毫秒。descStyle 为 switch 时生效
    switchShuffle: false, // 描述信息是否随机切换，为 false 时按顺序切换。descStyle 为 switch 时生效
    typesInTime: 200, // 输出一个文字的时间，单位：毫秒。descStyle 为 types 时生效
    typesOutTime: 100, // 删除一个文字的时间，单位：毫秒。descStyle 为 types 时生效
    typesNextTime: 800, // 打字与删字的间隔时间，单位：毫秒。descStyle 为 types 时生效
    typesShuffle: false, // 描述信息是否随机打字，为 false 时按顺序打字，descStyle 为 types 时生效
  },
  // 首页顶部按 F11 开启壁纸模式
  wallpaper: {
    enabled: true, // 是否启用壁纸模式
    hideBanner: false, // 开启壁纸模式后，全屏是否显示打字机文案，
    hideMask: true, // 开启壁纸模式后，是否隐藏 Banner 或 bodyBgImage 的遮罩层，则确保 banner.mask 和 bodyBgImage.mask 为 true 才生效
    hideWaves: false, // 开启壁纸模式后，是否隐藏 Banner 波浪组件，仅 banner.bgStyle = 'fullImg' 生效
  },

  friendLink: FriendLink, // 友链配置
  social: SocialDate, //社交信息配置
};

config.mts

// docs\.vitepress\config.mts
import { defineConfig } from "vitepress";
import { defineTeekConfig } from "vitepress-theme-teek/config";
// import "vitepress-theme-teek/index.css";
import {
  groupIconMdPlugin,
  groupIconVitePlugin,
} from "vitepress-plugin-group-icons"; // 导入代码组图标插件
import timeline from "vitepress-markdown-timeline"; // 导入时间线插件
import { Nav } from "./ConfigHyde/Nav"; // 导入Nav模块
import type { HeadConfig } from "vitepress"; // 在文件顶部添加类型导入
import { HeadData } from "./ConfigHyde/Head"; // 导入 HeadData 导入和类型断言
import { SocialLinks } from "./ConfigHyde/SocialLinks"; //导入社交链接配置
import { FooterInfo } from "./ConfigHyde/FooterInfo"; //导入底部信息配置
import { CommentData } from "./ConfigHyde/Comment"; //导入底部信息配置
import { footerGroup } from "./ConfigHyde/footerGroup"; //导入页脚信息组配置
import { visualizer } from "rollup-plugin-visualizer"; // 导入可视化分析插件
import viteImagemin from "vite-plugin-imagemin"; // 导入图片压缩插件

const description = ["Hd Security 使用文档", "认证框架"].toString();

const teekConfig = defineTeekConfig({
  // teekHome: true, // 是否使用tk主题，teekHome 和 teekTheme 默认都是 true，可以注释
  // teekTheme: true, // 是否使用tk主题，teekHome 和 teekTheme 默认都是 true，可以注释
  // vpHome: true, // 是否使用vp主题，是否启用 VitePress 首页风格，支持 teekHome 和 vpHome 同时存在。
  backTopDone: (TkMessage) => TkMessage.success("已回到顶部"),
  toCommentDone: (TkMessage) => TkMessage.success("已抵达评论区"),
  // 新版代码块配置
  codeBlock: {
    disabled: false, // 是否禁用新版代码块
    collapseHeight: 700, // 超出高度后自动折叠，设置 true 则默认折叠，false 则默认不折叠
    copiedDone: (TkMessage) => TkMessage.success("代码已复制 🎉"),
  },
  bgColor: [
    "#e74c3c",
    "#409EFF",
    "#DAA96E",
    "#0C819F",
    "#27ae60",
    "#ff5c93",
    "#fd726d",
    "#f39c12",
    "#9b59b6",
  ], // 主题背景颜色
  page: {
    pageSize: 16, // 每页显示的文章数量
  },
  post: {
    coverImgMode: "full", // 封面大图
    imageViewer: { hideOnClickModal: true }, // 图片预览是否点击遮罩层关闭
  },
  author: { name: "Hyde", link: "https://gitee.com/SeasirHyde/teek-hyde" }, // 作者信息
  article: {
    imageViewer: { hideOnClickModal: true }, // 图片预览是否点击遮罩层关闭}
    showIcon: true, // 作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息的图标是否显示
    dateFormat: "yyyy-MM-dd hh:mm:ss", // 文章日期格式，首页和文章页解析日期时使用
    showInfo: true, // 是否展示作者、日期、分类、标签、字数、阅读时长、浏览量等文章信息，分别作用于首页和文章页
    showAuthor: true, // 是否展示作者
    showCreateDate: true, // 是否展示创建日期
    showUpdateDate: true, // 是否展示更新日期，是否展示更新时间，仅在文章页显示
    showCategory: true, // 是否展示分类
    showTag: true, // 是否展示标签
    topTip: (frontmatter) => {
      const tip: Record<string, string> = {
        type: "warning",
        title: "注意",
        text: "文章发布较早，内容可能过时，阅读注意甄别。",
      };

      // frontmatter.long 为 true，则添加提示
      if (frontmatter.long) return tip;

      // frontmatter.date 大于半年，则添加提示
      const longTime = 6 * 30 * 24 * 60 * 60 * 1000;
      if (
        frontmatter.date &&
        Date.now() - new Date(frontmatter.date).getTime() > longTime
      )
        return tip;
    },
  },
  footerInfo: FooterInfo, // 底部信息配置,
  // 评论配置
  comment: {
    provider: "twikoo",
    options: CommentData,
  },
  // 公告
  notice: {
    enabled: true, // 是否启用公告功能
    position: "center", // 公告弹框出现位置，可选值：top、center、bottom
  },
  vitePlugins: {
    sidebarOption: {
      initItems: false, //这条命令注释后，才会让文档和目录的样式保持一致
      collapsed: true, //打开侧边栏自动收缩功能
      ignoreList: ["nav"], //忽略的文件夹和文件
    },
    autoFrontmatter: true, // 自动生成 frontmatter
  },

  markdown: {
    config: (md) => {
      md.use(timeline); //时间线插件
      md.use(groupIconMdPlugin); // 代码组图标插件
    },
  },
  // 站点信息卡片配置
  docAnalysis: {
    enabled: true,
    createTime: "2021-10-19",
    wordCount: true,
    readingTime: true,
    statistics: {
      provider: "busuanzi", //是否开启首页的访问量和排名统计，仅当 provider 存在生效
      siteView: true, //是否开启文章页的浏览量统计，仅当 provider 存在生效
      pageView: true, //如果请求不蒜子接口失败，是否重试，类型 boolean
      tryRequest: true, //重试次数，仅当 tryRequest 为 true 时有效
      tryCount: 2000, //重试间隔时间，单位毫秒，仅当 tryRequest 为 true 时有效目录链接
    },
    overrideInfo: [
      {
        key: "lastActiveTime",
        label: "活跃时间",
        value: (_, currentValue) => (currentValue + "").replace("前", ""),
        show: true,
      },
    ],
    appendInfo: [{ key: "index", label: "序号", value: "Hyde" }],
  },
  // 站点分析
  siteAnalytics: [
    {
      provider: "google",
      options: {
        id: "G-YDTSLB09YH",
      },
    },
    // {
    //   provider: "baidu",
    //   options: {
    //     id: "******",
    //   },
    // },
    // {
    //   provider: "umami",
    //   options: {
    //     id: "******",
    //     src: "**",
    //   },
    // },
  ],
  // 文章页的样式风格
  // pageStyle: "segment-nav", //有bug左侧目录箭头样式就会偏移，暂时注释
  // 赞赏在文章下方
  appreciation: {
    position: "doc-after",
    options: {
      // buttonHtml: `<button>测试按钮</button>`,
      icon: "weChatPay", // 赞赏图标，内置 weChatPay 和 alipay
      expandTitle: "打赏支持", // 展开标题，支持 HTML
      collapseTitle: "下次一定", // 折叠标题，支持 HTML
      content: `<img src='/appreciation/WeChatPay.jpg'><img src='/appreciation/Alipay.jpg'>`, // 赞赏内容，支持 HTML
      expand: false, // 是否默认展开，默认 false
    },
  },
  // 赞赏在 文章导航栏下侧
  // appreciation: {
  //   position: "aside-bottom",
  //   options: {
  //     title: `<span style="color: var(--tk-theme-color)">欢迎打赏支持</span>`, // 赞赏标题，支持 HTML
  //     content: `<img src='/appreciation/WeChatPay.jpg'><img src='/appreciation/Alipay.jpg'>`, // 赞赏内容，支持 HTML
  //   },
  // },
  articleShare: { enabled: true }, // 文章分享
  footerGroup: footerGroup, // 页脚信息组配置
});

// https://vitepress.dev/reference/site-config
export default defineConfig({
  extends: teekConfig,
  base: "/",
  title: "Hyde Blog",
  description: description,
  cleanUrls: true,
  lastUpdated: true, // 显示最后更新时间
  lang: "zh-CN",
  head: HeadData as HeadConfig[],
  markdown: {
    // 开启行号
    lineNumbers: true,
    image: {
      // 默认禁用；设置为 true 可为所有图片启用懒加载。
      lazyLoading: true,
    },
    // 更改容器默认值标题
    container: {
      tipLabel: "提示",
      warningLabel: "警告",
      dangerLabel: "危险",
      infoLabel: "信息",
      detailsLabel: "详细信息",
    },
  },
  themeConfig: {
    // https://vitepress.dev/reference/default-theme-config
    logo: "/favicon.ico",
    darkModeSwitchLabel: "主题",
    sidebarMenuLabel: "菜单",
    returnToTopLabel: "返回顶部",
    lastUpdatedText: "上次更新时间",
    outline: {
      level: [2, 4],
      label: "本页导航",
    },
    docFooter: {
      prev: "上一页",
      next: "下一页",
    },
    nav: Nav, // 导航栏配置
    socialLinks: SocialLinks, // 社交链接配置
    search: {
      provider: "local",
    },
    editLink: {
      text: "在 GitHub 上编辑此页",
      pattern:
        "https://github.com/Kele-Bingtang/hd-security/edit/master/hd-security-docs/docs/:path",
    },
  },

  vite: {
    plugins: [
      groupIconVitePlugin(),
      viteImagemin({
        gifsicle: { optimizationLevel: 7 },
        mozjpeg: { quality: 70 },
        pngquant: { quality: [0.7, 0.8] },
        svgo: {
          plugins: [
            { name: "removeViewBox" },
            { name: "removeEmptyAttrs", active: false },
          ],
        },
      }),
    ],
    server: {
      // host: "127.0.0.1", // 指定服务器应该监听哪个 IP 地址
      // port: 5173, // 指定开发服务器端口
      strictPort: true, // 若端口已被占用则会直接退出
      open: true, // 运行后自动打开网页
    },
    build: {
      chunkSizeWarningLimit: 1500, // 限制警告的块大小
      assetsInlineLimit: 4096, // 小于 4KB 的字体转为 base64
      minify: "terser", // 使用 Terser 进行代码压缩
      rollupOptions: {
        plugins: [
          visualizer({
            filename: "../stats.html",
            open: false, // 打包后自动打开报告
            gzipSize: true, // 压缩大小
            brotliSize: true,
          }),
        ],
        output: {
          manualChunks: {
            theme: ["vitepress-theme-teek"],
          },
        },
      },
      terserOptions: {
        compress: {
          drop_console: true, // 移除所有 console.* 调用（生产环境建议开启）
          drop_debugger: true, // 移除 debugger 语句（生产环境必备）
          pure_funcs: ["console.info"], // 保留 console.info 调用（白名单机制）
          dead_code: true, // 移除不可达代码（消除死代码）
          arrows: true, // 将 function 转换为箭头函数（优化代码体积）
          unused: true, // 移除未使用的变量/函数（需确保不影响程序逻辑）
          join_vars: true, // 合并连续 var 声明（优化作用域）
          collapse_vars: true, // 内联单次使用的变量（体积优化）
        },
        format: {
          comments: false, // 移除所有注释（保留版权声明需使用正则表达式）
          beautify: false, // 禁用代码美化（进一步减小体积）
          preamble: "/* 项目版本 1.0.0 */", // 文件头部添加版权声明（需遵守 MIT 协议）
        },
        mangle: {
          toplevel: true, // 混淆顶级作用域变量名（保留 class/function 名称）
          properties: false, // 保留对象属性名（防止破坏 DOM 属性绑定）
        },
      },
    },
  },
});

index.md

<!-- docs\index.md -->

tk: #是否启用 Teek 的首页风格 #如果为 false，则还原到 Vitepress 的默认首页，其他功能不变。
teekHome:false