drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-24 20:56:42 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

docs(blog): prepare for v0.10 release post (#746)

Browse Source 
* docs(blog): prepare for v0.10 release post

* Update v0.10.md

* Update v0.10.md to refine upgrade instructions and enhance blog features. Added synchronized tab switching and pagination controls, while improving the search experience and table of contents navigation.

* Enhance v0.10 release documentation with detailed upgrade instructions and migration guide. Added Tailwind theme variable customization section and clarified breaking changes. Improved clarity on CSS class prefix changes for better user experience.

* Update v0.10.md to enhance upgrade instructions, clarify breaking changes, and improve overall readability. Adjusted formatting for consistency and added details on asset management and user experience improvements.

* Add notable new features to v0.10.md, including dropdown menu support, enhanced search experience, and blog list pagination. Updated FlexSearch upgrade details for clarity and improved migration guide by removing redundant breaking change notes.

* chore: update zh-cn translation

* chore: update ja translation

* chore: update fa and ja translations

* chore: prepare release
This commit is contained in:
Xin
2025-08-14 23:49:06 +08:00
committed by GitHub
parent eca7665571
commit ec007d73c0
85 changed files with 4172 additions and 1545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
exampleSite/content/docs/advanced/customization.zh-cn.md
View File

@@ -3,18 +3,18 @@ title: 自定义 Hextra
linkTitle: 自定义
---
Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，用于配置主题。
本页描述了可用的选项以及如何进一步自定义主题。
Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项来配置主题。
本页描述了可用选项以及如何进一步自定义主题。
<!--more-->
## 自定义 CSS
要添加自定义 CSS，我们需要在站点中创建一个文件 `assets/css/custom.css`。Hextra 会自动加载此文件。
要添加自定义 CSS，我们需要在站点中创建 `assets/css/custom.css` 文件。Hextra 会自动加载此文件。
### 字体
### 字体家族
内容的字体可以通过以下方式自定义：
可以使用以下方式自定义内容的字体家族：
```css {filename="assets/css/custom.css"}
.content {
@@ -22,9 +22,9 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
}
```
### 内联代码元素
### 行内代码元素
与 `其他文本` 混合的文本颜色可以通过以下方式自定义：
与 `其他文本` 混合的代码文本颜色可以通过以下方式自定义：
```css {filename="assets/css/custom.css"}
.content code:not(.code-block code) {
@@ -34,7 +34,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
### 主色调
主题的主色调可以通过设置 `--primary-hue`、`--primary-saturation` 和 `--primary-lightness` 变量来自定义：
可以通过设置 `--primary-hue`、`--primary-saturation` 和 `--primary-lightness` 变量来自定义主题的主色调：
```css {filename="assets/css/custom.css"}
:root {
@@ -44,9 +44,42 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
}
```
### 进一步的主题自定义
### 组件布局变量
可以通过覆盖暴露的 CSS 类来进一步自定义主题。以下是一个自定义页脚元素的示例：
Hextra 提供了 CSS 变量来自定义页面、导航栏和页脚的宽度：
```css {filename="assets/css/custom.css"}
:root {
/* 页面宽度 - 也可以通过 hugo.yaml 中的 params.page.width 配置 */
--hextra-max-page-width: 80rem; /* 默认值：80rem（普通），90rem（宽版），100%（全宽） */
/* 导航栏宽度 - 也可以通过 hugo.yaml 中的 params.navbar.width 配置 */
--hextra-max-navbar-width: 90rem; /* 独立的导航栏宽度 */
/* 页脚宽度 - 也可以通过 hugo.yaml 中的 params.footer.width 配置 */
--hextra-max-footer-width: 80rem; /* 独立的页脚宽度 */
}
```
### Tailwind 主题变量
从基于 Tailwind CSS v4 的 Hextra v0.10.0 开始，您可以通过在 `@layer theme` 块中覆盖 CSS 变量来自定义主题。
这样可以在不修改每个单独类的情况下自定义全局外观。
```css {filename="assets/css/custom.css"}
@layer theme {
:root {
--hx-default-mono-font-family: "JetBrains Mono", monospace;
}
}
```
详情请参阅 [Tailwind 主题变量文档](https://tailwindcss.com/docs/theme#default-theme-variable-reference)。
### 进一步主题自定义
可以通过覆盖暴露的 CSS 类来自定义主题的默认样式。以下是一个自定义页脚元素的示例：
```css {filename="assets/css/custom.css"}
.hextra-footer {
@@ -54,7 +87,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
}
.hextra-footer:is(html[class~="dark"] *) {
/* 样式将应用于暗模式下的页脚元素 */
/* 样式将应用于暗黑模式下的页脚元素 */
}
```
@@ -82,11 +115,11 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
- `hextra-cards` - 卡片网格容器
##### Jupyter Notebook
##### Jupyter 笔记本
- `hextra-jupyter-code-cell` - Jupyter 代码单元容器
- `hextra-jupyter-code-cell-outputs-container` - Jupyter 代码单元输出容器
- `hextra-jupyter-code-cell-outputs` - Jupyter 代码单元输出 div 元素
- `hextra-jupyter-code-cell` - Jupyter 代码单元格容器
- `hextra-jupyter-code-cell-outputs-container` - Jupyter 代码单元格输出容器
- `hextra-jupyter-code-cell-outputs` - Jupyter 代码单元格输出 div 元素
##### PDF
@@ -94,7 +127,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
##### 步骤
- `steps` - 步骤容器
- `hextra-steps` - 步骤容器
##### 标签页
@@ -111,9 +144,9 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
#### 导航栏
- `nav-container` - 导航栏容器
- `nav-container-blur` - 导航栏模糊元素
- `hamburger-menu` - 汉堡菜单按钮
- `hextra-nav-container` - 导航栏容器
- `hextra-nav-container-blur` - 导航栏模糊效果容器
- `hextra-hamburger-menu` - 汉堡菜单按钮
#### 页脚
@@ -122,9 +155,18 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
#### 搜索
- `search-wrapper` - 搜索包装容器
- `search-input` - 搜索输入元素
- `search-results` - 搜索结果列表容器
- `hextra-search-wrapper` - 搜索包装容器
- `hextra-search-input` - 搜索输入元素
- `hextra-search-results` - 搜索结果列表容器
搜索 UI 中使用的可选嵌套类：
- `hextra-search-title` - 结果标题元素
- `hextra-search-active` - 活动结果锚点
- `hextra-search-no-result` - 空状态元素
- `hextra-search-prefix` - 分组结果的面包屑/前缀标签
- `hextra-search-excerpt` - 结果片段文本
- `hextra-search-match` - 高亮查询范围
#### 目录
@@ -132,27 +174,29 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
#### 侧边栏
- `mobile-menu-overlay` - 移动菜单的覆盖元素
- `sidebar-container` - 侧边栏容器
- `sidebar-active-item` - 侧边栏中的活动项
- `hextra-sidebar-container` - 侧边栏容器
- `hextra-sidebar-active-item` - 侧边栏中的活动项
#### 语言切换器
- `language-switcher` - 语言切换按钮
- `language-options` - 语言选项容器
- `hextra-language-switcher` - 语言切换按钮
- `hextra-language-options` - 语言选项容器
#### 主题切换
- `theme-toggle` - 主题切换按钮
- `hextra-theme-toggle` - 主题切换按钮
#### 代码复制按钮
- `hextra-code-copy-btn-container` - 代码复制按钮容器
- `hextra-code-copy-btn` - 代码复制按钮
- `hextra-copy-icon` - 复制图标元素
- `hextra-success-icon` - 成功图标元素
#### 代码块
- `hextra-code-block` - 代码块容器
- `hextra-code-filename` - 代码块的文件名元素
#### 功能卡片
@@ -162,10 +206,6 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项，
- `hextra-feature-grid` - 功能网格容器
#### 面包屑导航
面包屑导航没有特定的类。
### 语法高亮
可用的语法高亮主题列表可在 [Chroma 样式库](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表：
@@ -178,7 +218,7 @@ hugo gen chromastyles --style=github
## 自定义脚本
你可以通过添加以下文件在每个页面的 head 末尾添加自定义脚本：
您可以通过添加以下文件在每个页面的 head 末尾添加自定义脚本：
```
layouts/partials/custom/head-end.html
@@ -186,26 +226,26 @@ layouts/partials/custom/head-end.html
## 自定义页脚额外部分
你可以通过在站点中创建文件 `layouts/partials/custom/footer.html` 来在页脚中添加额外部分。
您可以通过在站点中创建 `layouts/partials/custom/footer.html` 文件来添加页脚的额外部分。
```html {filename="layouts/partials/custom/footer.html"}
<!-- 你的页脚元素在这里 -->
<!-- 您的页脚元素放在这里 -->
```
添加的部分将出现在页脚的版权部分之前。
你可以使用 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 和 [Hugo 模板语法](https://gohugo.io/templates/) 来添加自己的内容。
您可以使用 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 和 [Hugo 模板语法](https://gohugo.io/templates/) 添加自己的内容。
页脚部分可用的 Hugo 变量有：`.switchesVisible` 和 `.copyrightVisible`。
页脚部分可用的 Hugo 变量有：`.switchesVisible` 和 `.displayCopyright`。
## 自定义布局
可以通过在站点的 `layouts` 目录中创建同名文件来覆盖主题的布局。
例如，要覆盖文档的 `single.html` 布局，可以在站点中创建文件 `layouts/docs/single.html`。
例如，要覆盖文档的 `single.html` 布局，可以在站点中创建 `layouts/docs/single.html` 文件。
更多信息，请参阅 [Hugo 模板文档][hugo-template-docs]。
## 进一步自定义
没有找到你想要的？欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献！
没有找到您需要的内容？欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献！
[hugo-template-docs]: https://gohugo.io/templates/