MaraPython

Appearance

Alowree Xu2025-04-09
1653
6.8m
Get...

本站-样式 ​

Teek 的官方文档 样式增强 提供了两组由作者事先创建、但需用户自行引入的样式增强文件，分别用途 VitePress 样式增强和 Teek 样式增强。这两组样式文件都由 Teek 主题作者创建并提供 SCSS 源文件，安装 Teek 之后，在 项目根目录/node_modules/vitepress-theme-teek/theme-chalk 编译生成一系列形如 tk-xxx.css 的 CSS 文件，用户可按需引入相应的样式文件即可。

样式增强 ​

方法一：直接引入 CSS 样式文件：

ts
// .vitepress/theme/index.ts
// 1.组件导入
import Teek from "vitepress-theme-teek";

// 2.样式导入
import "vitepress-theme-teek/index.css";

// 3.引入 VitePress 样式增强 和 Teek 样式增强
import "vitepress-theme-teek/theme-chalk/tk-sidebar.css"; // 侧边栏字体样式
import "vitepress-theme-teek/theme-chalk/tk-nav.css"; // 导航栏样式
import "vitepress-theme-teek/theme-chalk/tk-nav-blur.css"; // 导航栏毛玻璃样式
import "vitepress-theme-teek/theme-chalk/tk-aside.css"; // 文章目录样式
import "vitepress-theme-teek/theme-chalk/tk-doc-h1-gradient.css"; // 文档以及标题样式
import "vitepress-theme-teek/theme-chalk/tk-mark.css"; // 文章 mark 标签样式
// import "vitepress-theme-teek/theme-chalk/tk-index-rainbow.css";
// import "vitepress-theme-teek/theme-chalk/tk-doc-fade-in.css";
import "vitepress-theme-teek/theme-chalk/tk-banner-desc-gradient.css";

// 4.Import your own custom css files
import "./style/index.css";

export default {
  extends: Teek,
};

方法二：如果您的项目有 SCSS 依赖，可以直接引入源样式文件：

ts
// .vitepress/theme/index.ts
// 1.组件导入
import Teek from "vitepress-theme-teek";

// 2.样式导入
import "vitepress-theme-teek/index.css";

// 3.引入 VitePress 样式增强 和 Teek 样式增强
import "vitepress-theme-teek/theme-chalk/src/vp-plus/sidebar.scss"; // 侧边栏字体样式
import "vitepress-theme-teek/theme-chalk/src/vp-plus/nav.scss"; // 导航栏样式
import "vitepress-theme-teek/theme-chalk/src/vp-plus/nav-blur.scss"; // 导航栏毛玻璃样式
import "vitepress-theme-teek/theme-chalk/src/vp-plus/aside.scss"; // 文章目录样式
import "vitepress-theme-teek/theme-chalk/src/vp-plus/doc-h1-gradient.scss"; // 文档以及标题样式
import "vitepress-theme-teek/theme-chalk/src/vp-plus/mark.scss"; // 文章 mark 标签样式

// 4.Import your own custom css files
import "./style/index.css";

export default {
  extends: Teek,
};

自定义样式 ​

如果以上样式增强仍然不能满足需求，想要通过自定义的 CSS 来修改某些局部的样式，可以通过 VitePress 提供的入口，来创建和导入个人定制的 CSS 样式文件。具体可以参考 VitePress 官方文档 自定义样式 和 扩展默认主题 ，结合以下步骤进行配置。

文件结构 ​

1、在 .vitepress/theme/style/ 目录下创建 CSS 文件，并以 index.css 作为汇总，导入同级别的其他 CSS 文件，用作输出接口

sh
D:\Teek\docs\.vitepress\theme
├── index.ts
└── style
   ├── font.css    # 自定义站点的字体
   ├── html.css    # 自定义 HTML 各元素的样式
   ├── index.css   # 汇总导入同级别的其他 CSS 文件，用作输出接口
   ├── layout.css  # 自定义站点的布局
   └── style.css

2、将输出接口 ./style/index.css 在主入口文件 .vitepress/theme/index.ts 中进行导入即可

ts
// .vitepress/theme/index.ts
// 1.组件导入
import Teek from "vitepress-theme-teek";

// 2.样式导入
import "vitepress-theme-teek/index.css";

// 3.引入 VitePress 样式增强 和 Teek 样式增强
import "vitepress-theme-teek/theme-chalk/tk-sidebar.css"; // 侧边栏字体样式
import "vitepress-theme-teek/theme-chalk/tk-nav.css"; // 导航栏样式
import "vitepress-theme-teek/theme-chalk/tk-nav-blur.css"; // 导航栏毛玻璃样式
import "vitepress-theme-teek/theme-chalk/tk-aside.css"; // 文章目录样式
import "vitepress-theme-teek/theme-chalk/tk-doc-h1-gradient.css"; // 文档以及标题样式
import "vitepress-theme-teek/theme-chalk/tk-mark.css"; // 文章 mark 标签样式
// import "vitepress-theme-teek/theme-chalk/tk-index-rainbow.css";
// import "vitepress-theme-teek/theme-chalk/tk-doc-fade-in.css";
import "vitepress-theme-teek/theme-chalk/tk-banner-desc-gradient.css";

// 4.Import your own custom css files
import "./style/index.css";

export default {
  extends: Teek,
};

当前导入的个人定制化 CSS 文件，仅是通过 font.css 修改站点的字体。

配置字体 ​

为自己的网站选择几款合适的字体可以彰显独特的气质和风格。个人的审美当然会随着时间迁移，有时单纯就是因为审美疲劳、喜新厌旧，有时则是因为发现了更和谐融洽的新发现、新匹配。

曾经配置过的字体：

  • 中文字体：苹方
  • 英文字体：Source Sans Pro

现时使用的字体：中文名称 筑紫A丸，但是实际使用时建议更改成下面的英文名称，避免产生不必要的乱码。

  • 中文字体：TsukuARdGothic Std
  • 英文字体：TsukuARdGothic Std

接下来以「筑紫A丸」为例，简单介绍一下自定义字体的引入过程，自己备忘，也可给后人以指引。

1、下载 得到以下五个字体文件：

md
TsukuARdGothicStd-Bold.ttf
TsukuARdGothicStd-Light.ttf
TsukuARdGothicStd-Medium.ttf
TsukuARdGothicStd-Regular.ttf
TsukuARdGothicStd-Thin.ttf

2、安装字体到本地电脑，安装成功之后查看：

2.1 在 C:/Windows/Fonts/ 目录下找到并双击 TsukuARdGothic Std 进入，可以看到装有五个字体文件，「文件名称」分别显示为：

TsukuARdGothic Std 常规
TsukuARdGothic Std 粗体
TsukuARdGothic Std 细体
TsukuARdGothic Std 细体
TsukuARdGothic Std 中等

在已安装目录下 显示的 「文件名称」，我不知道它是如何生成，以及为何该「文件名称」跟「字体名称」（参照下面 2.2 所述内容）没有保持一致。

2.2 每个字体文件分别双击打开，可以看到每个字体的「字体名称」（注意都是英文名称），按照字重的从细到粗排序，分别是：

md
TsukuARdGothic Std Thin
TsukuARdGothic Std Light
TsukuARdGothic Std Regular
TsukuARdGothic Std Medium
TsukuARdGothic Std Bold

2.3 如果本地电脑有安装 Office 软件，例如 Word 或 Outlook，在软件内更换字体，通过下拉选择框也可以找到与 2.2 中同样的「字体名称」，并且可以检查五种字体的字重效果。可以看到，在 Office 软件内显示的是 2.2 所述的「字体名称」，而不是 2.1 所述的「文件名称」。换句话说，你在 2.1 中看到的「文件名称」除了让人困惑，基本没啥卵用。

3、于是，我们把第 1 步下载得到的五个字体文件，全部修改「文件名称」：

下载的原始文件名称修改后的文件名称
TsukuARdGothicStd-Bold.ttfTsukuARdGothic Std Bold.ttf
TsukuARdGothicStd-Light.ttfTsukuARdGothic Std Light.ttf
TsukuARdGothicStd-Medium.ttfTsukuARdGothic Std Medium.ttf
TsukuARdGothicStd-Regular.ttfTsukuARdGothic Std Regular.ttf
TsukuARdGothicStd-Thin.ttfTsukuARdGothic Std Thin.ttf

注意

修改字体文件名称这一步并不是必须的，但是为了保持「文件名称」和「字体名称」两者命名的统一，易于后期维护，故而改之。经过观察，大部分的字体命名习惯，要么使用驼峰法消除空格，要么使用连接号代替空格，很少在文件名称内使用空格。所以，在文件名称内使用空格或许会有其他意想不到的不良反应。

4、将修改完文件名称的五个字体文件粘贴到项目中的 /docs/public/fonts/筑紫A丸/ 文件夹下：

md
D:\Teek\docs\public
├── favicon
|  ├── android-chrome-192x192.png
|  ├── android-chrome-512x512.png
|  ├── avatar.jpg
|  ├── favicon-16x16.png
|  ├── favicon-32x32.png
|  ├── favicon.ico
|  ├── favicon.png
|  ├── ghost.gif
|  └── logo.png
├── fonts
|  ├── iconfont
|  |  ├── iconfont.woff
|  |  └── iconfont.woff2
|  └── 筑紫A丸
|     ├── TsukuARdGothic Std Bold.ttf
|     ├── TsukuARdGothic Std Light.ttf
|     ├── TsukuARdGothic Std Medium.ttf
|     ├── TsukuARdGothic Std Regular.ttf
|     └── TsukuARdGothic Std Thin.ttf
└── img
   ├── banner-bg1.jpg
   ├── banner-bg2.jpg
   ├── banner-bg3.jpg
   ├── blogger-avatar.jpg
   ├── favicon.ico
   └── ghost.png

5、在项目的 /.vitepress/theme/style/font.css 内进行字体的配置和引用：

/* import fonts from online resources, normally Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");

/* import fonts from your website, typically in the public folder */
@font-face {
  font-family: "TsukuARdGothic Std";
  src: url("/fonts/筑紫A丸/TsukuARdGothic Std Regular.ttf") format("truetype");
  /* font-weight: 400; */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "TsukuARdGothic Std";
  src: url("/fonts/筑紫A丸/TsukuARdGothic Std Bold.ttf") format("truetype");
  /* font-weight: 700; */
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --vp-font-family-base:
    -apple-system, BlinkMacSystemFont, "Source Sans 3", "PingFang SC", "TsukuARdGothic Std", "Inter", ui-sans-serif, system-ui,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

:root {
  --vp-font-family-mono:
    "JetBrainsMonoNL Nerd Font", "JetBrains Mono", "Consolas", ui-monospace, "Menlo", "Monaco", "Liberation Mono", "Courier New",
    "YouYuan", monospace;
}

:root {
  --vp-code-font-size: 0.8rem;
}

/* import iconfont for color icons */
@font-face {
  font-family: "iconfont"; /* Project id 4324356 */
  src:
    url("//at.alicdn.com/t/c/font_4324356_g4ss22n1n8i.woff2?t=1748576187919") format("woff2"),
    url("//at.alicdn.com/t/c/font_4324356_g4ss22n1n8i.woff?t=1748576187919") format("woff"),
    url("//at.alicdn.com/t/c/font_4324356_g4ss22n1n8i.ttf?t=1748576187919") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-cengji:before {
  content: "\e67f";
}
.icon-conmulu:before {
  content: "\e6c5";
}
.icon-mulu:before {
  content: "\e60a";
}
.icon-icon_Contents:before {
  content: "\e652";
}
.icon-dianzan:before {
  content: "\e63f";
}
.icon-aixin:before {
  content: "\e640";
}

请注意，这里仅配置和使用了 同字体名 ——都以 "TsukuARdGothic Std" 为字体名称——的两个字体，即分别引入了 TsukuARdGothic Std Regular 和 TsukuARdGothic Std Bold 字体，分别对应 noral 和 bold 两种字重。而 Thin，Light，Medium 三个字体暂时没有配置，或许留待后用。如果确定自己的项目并不需要这三个字体，可以直接删除即可。

最近更新