next主题杂项配置

发表于 2025-03-13

预连接

NexT 支持添加预连接资源提示，以便尽早与字体和插件的来源建立连接。

您可以通过在 NexT 配置文件中设置 preconnect: true 来启用它。

NexT 配置文件

preconnect: true
```  
### 文本对齐  
  
NexT 允许自定义文章/页面中的文本对齐方式。text-align   CSS 属性设置块元素或表格单元格框的水平对齐方式。  
<table><thead><tr><th style="font-weight: 700;color: rgb(0, 0, 0);border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">值</span></section></th><th style="font-weight: 700;color: rgb(0, 0, 0);border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">效果</span></section></th></tr></thead><tbody><tr><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">start</span></code></td><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">如果方向是从左到右，则等同于 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">left</span></code><span leaf="">；如果方向是从右到左，则等同于 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">right</span></code><span leaf="">。</span></section></td></tr><tr><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">end</span></code></td><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">如果方向是从左到右，则等同于 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">right</span></code><span leaf="">；如果方向是从右到左，则等同于 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">left</span></code><span leaf="">。</span></section></td></tr><tr><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">left</span></code></td><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">行内内容对齐到行框的左边缘。</span></section></td></tr><tr><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">right</span></code></td><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">行内内容对齐到行框的右边缘。</span></section></td></tr><tr><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">center</span></code></td><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">行内内容在行框内居中。</span></section></td></tr><tr><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">justify</span></code></td><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">行内内容被对齐。文本应该被间距调整，使其左边缘和右边缘与行框的左边缘和右边缘对齐，但最后一行除外。</span></section></td></tr><tr><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">justify-all</span></code></td><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">与 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">justify</span></code><span leaf=""> 相同，但也会强制最后一行对齐。</span></section></td></tr><tr><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">match-parent</span></code></td><td style="border: 1px solid rgb(214, 214, 214);padding: 6px 13px;"><section><span leaf="">类似于 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">inherit</span></code><span leaf="">，但 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">start</span></code><span leaf=""> 和 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">end</span></code><span leaf=""> 的值会根据父元素的方向计算，并被替换为相应的 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">left</span></code><span leaf=""> 或 </span><code style="font-family: Menlo, Monaco, Consolas, &#34;Courier New&#34;, monospace;font-size: 0.85em;color: rgb(0, 0, 0);background-color: rgb(240, 240, 240);border-radius: 3px;padding: 0.2em 0px;"><span leaf="">right</span></code><span leaf=""> 值。</span></section></td></tr></tbody></table>  

**NexT 配置文件**

text_align: desktop: justify mobile: justify

### 移动设备适配  
  
如果您想减少在窄屏设备上的内边距/外边距缩进，可以通过在 NexT 配置文件中将 mobile_layout_economy   的值设置为 true   来启用。  
  
**NexT 配置文件**

mobile_layout_economy: true

### 主题颜色  
  
默认情况下，NexT 使用深黑色 (#222  ) 作为浏览器头部面板的颜色（Safari 15 和 Android Chrome 支持此功能）。您可以通过编辑 NexT 配置文件中 theme_color   部分的十六进制颜色值来配置它。  
  
**NexT 配置文件**

theme_color: light: “#222” dark: “#222”

1
2
3

### 页面滚动条  
  
**NexT 配置文件**

body_scrollbar: overlay: false stable: false

### 代码块样式  
- theme  
- copy_button  
NexT 使用 Highlight.js 和 Prism 包来支持代码高亮。  
  
请先阅读 Hexo 的语法高亮文档，并在 Hexo 配置文件中进行设置。  
  
您可以在 NexT 高亮主题预览页面预览所有可用的代码高亮主题。通过更改 theme   和 prism   的值来选择您喜欢的高亮样式。  
  
**NexT 配置文件**

codeblock:
theme:
light: default
dark: stackoverflow-dark
prism:
light: prism
dark: prism-dark

  
如果启用了深色模式，将提供深色代码高亮主题。  
  
NexT 支持代码块的复制功能。  
- enable  
- style  
您可以通过在 NexT 配置文件中将 copy_button.enable   的值设置为 true   来启用它。默认情况下，NexT 会显示代码块复制功能的复制结果。  
  
**NexT 配置文件**

codeblock:
copy_button:
enable: true

  
通过 style   选项，您可以更改复制按钮的样式。  
  
目前有三种样式可供选择：default  （保持为空）、flat   和 mac  。  
  
**NexT 配置文件**

codeblock:
copy_button:
style: flat

### 返回顶部  
- enable  
- sidebar  
- scrollpercent  
**NexT 配置文件**

back2top: enable: true

  
将 back2top.enable   的值设置为 true   以显示“返回顶部”按钮。  
  
**NexT 配置文件**

back2top:
sidebar: true

  
将 back2top.sidebar   的值设置为 true   以将按钮放置在侧边栏中。  
  
**NexT 配置文件**

back2top:
scrollpercent: true

  
将 back2top.scrollpercent   的值设置为 true   以在“返回顶部”按钮中显示滚动百分比标签。  
### 阅读进度  
  
NexT 支持页面滚动阅读进度指示器。  
  
您可以通过在 NexT 配置文件中将 reading_progress.enable   的值设置为 true   来启用它。  
  
**NexT 配置文件**

reading_progress:
enable:true
start_at: left
position: top
reversed:false
color:“#37c6c0”
height: 2px

### 书签  
  
书签是一个插件，允许用户保存他们的阅读进度。用户只需点击页面左上角的书签图标（如 🔖）即可保存滚动位置。当他们下次访问您的博客时，可以自动恢复每个页面的最后滚动位置。  
  
您可以通过在 NexT 配置文件中将 bookmark.enable   的值设置为 true   来启用它。  
  
**NexT 配置文件**

bookmark:
  enable: false
  color: “#222”
  save: auto

  
NexT 提供了一个“在 GitHub 上关注我”的横幅，位于右上角。  
  
**NexT 配置文件**

github_banner:
enable: true
permalink: https://github.com/yourname

  
您可以将 enable   设置为 true   并添加您自己的 GitHub 链接。  
### 字体自定义  
  
NexT 提供了 5 种特定的字体设置，分别是：  
- 全局字体：在整个网站中使用的字体。  
  
- 标题字体：网站标题中使用的字体。  
  
- 标题字体：文章中标题（h1、h2、h3、h4、h5、h6）使用的字体。  
  
- 文章字体：文章中使用的字体。  
  
- 代码字体：文章中代码块使用的字体。  
  
每种字体将作为此类别的第一种字体使用，如果它们不可用，NexT 将回退到内部字体设置。  
- 非代码字体：回退到 "PingFang SC", "Microsoft YaHei", sans-serif  
  
- 代码字体：回退到 consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace  
  
此外，每个部分都有一个 external   属性，用于控制是否使用字体库 CDN。  
  
使用此功能可以帮助您使用系统中已安装的字体，并减少不必要的请求。  
  
为了解决某些国家/地区 Google Fonts API 的不稳定问题，NexT 支持通过设置 font.host   来自定义字体库的 URL。  
  
此外，我们注意到对于某些网站的请求，Google Fonts 会返回 403 错误。此时，需要使用 font.host   来设置镜像站点。  
  
相关问题：#613、#1333  
  
**NexT 配置文件**

font:
enable:true
host:
global:
  external:true
  family: Monda
  size:1.125
title:
  external:true
  family: Lobster Two
  size:
headings:
  external:true
  family: Amita
  size:
posts:
  external:true
  family: Montserrat
codes:
  external:true
  family: PT Mono

  
您还可以为每个选项应用多种字体族。这对于经常书写中英文的用户特别有用。  
  
**NexT 配置文件**

font:
  …
  title:
  external: true
  family: Roboto Slab, Noto Serif SC
  size:

  
根据 CSS 字体模块 3 级规范：  
> 除了通用字体族外，字体族名称必须要么被引号括起来作为字符串，要么不加引号作为由一个或多个标识符组成的序列。  
  
  
为了避免转义错误，如有必要，请引用字体族名称。  
  
如果您需要更多的自定义功能，以下更改将涵盖字体自定义功能。编辑网站根目录下的 source/_data/variables.styl   文件，并添加以下两个变量：  
  
**hexo/source/_data/variables.styl**

$font-family-headings = Georgia, sans
$font-family-base=“Microsoft YaHei”, Verdana, sans-serif
$code-font-family=“Input Mono”,“PT Mono”, Consolas, Monaco, Menlo, monospace
$font-size-base=16px
$table-font-size=13px

  
然后在 NexT 配置文件的 custom_file_path   部分下取消注释 variable  。  

![江达小记](/images/wechatmpscan.png)