Hexo博客NexT主题设置之使用HarmonyOS字体

发表于 分类于 评论数： 阅读次数： 本文字数： 5.5k 阅读时长 ≈ 5 分钟

Hexo的NexT主题优化配置，主要的特性与功能包括：

  • 无损的样式自定义方法
    • 自定义字体
    • 使用HarmonyOS字体
    • 自定义翻译
    • 通用的样式修改方法

版本信息

本文基于的环境与版本信息如下，版本不同可能会导致本文的配置达不到预期效果。

在进行优化配置前，请先阅读NexT主题的官方配置手册。
一般来说，稳妥起见，有自定义需求也建议先在官方手册中查找方法。

无损的样式自定义方法

这里的 “无损” 指的是不修改主题的源文件，这样做的好处是不影响主题的源代码以及后续的版本升级。但这要求主题在设计上具备模块化、可扩展等特性，NexT主题在这些方面做的不错，源代码可读性也很好。预留的自定义入口可以满足常用的样式修改要求。

NexT 一共有三个不同的仓库，更新说明及常见问题参考issues：

版本 年份 仓库
v5.1.4 或更低 2014 ~ 2017 https://github.com/iissnan/hexo-theme-next
v6.0.0 ~ v7.8.0 2018 ~ 2019 https://github.com/theme-next/hexo-theme-next
v8.0.0 或更高 2020 https://github.com/next-theme/hexo-theme-next

在NexT主题的8.11.1版本中自定义样式主要通过自定义文件覆盖主题样式的方式实现，主题提供以下自定义文件，覆盖了几乎所有页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  head: source/_data/head.njk
  header: source/_data/header.njk
  sidebar: source/_data/sidebar.njk
  postMeta: source/_data/post-meta.njk
  postBodyEnd: source/_data/post-body-end.njk
  footer: source/_data/footer.njk
  bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl
  mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

操作方法：

  1. 在hexo博客根目录下使用命令mkdir source/_data在source目录下创建_data文件夹
  2. 创建对应的自定义文件，如：在hexo博客根目录下使用命令touch source/_data/styles.styl创建styles.styl用于覆盖main.css文件中的样式
  3. 编辑第二步创建的自定义文件修改样式
  4. 在主题配置文件_config.next.yml中，取消对应文件的注释，然后使用运行hexo cl & hexo g & hexo s查看效果

自定义字体

在NexT的说明文档中详细介绍了自定义字体的方法，如果主题配置文件中提供的字体配置，可以对全局、站名、标题、文章以及代码字体进行配置：

  • global: 全局字体
  • title: 站点名称字体
  • headlines: 作用于文章标题和目录，注意：文章标题属于一级标题，文章内部的最高目录为二级标题，markdown写法上使用##
  • posts: 文章正文字体
  • code: 代码字体

如果上述部分的external参数设置为true，则会在访问的使用，从font.host参数设置的地址在线获取字体，一般设置为谷歌字体的地址，其国内访问地址为 https://fonts.font.im

NexT的字体策略

如果主题配置文件中提供的配置项无法满足要求，还可以通过source/_data/variables.styl文件进行深度定制。在这之前需要先了解NexT的字体设置策略，打开文件hexo-theme-next/source/css/_variables/base.styl，可以看到字体设置的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Font families.
$font-family-chinese      = 'PingFang SC', 'Microsoft YaHei';

$font-family-base         = $font-family-chinese, sans-serif;
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global');

$font-family-logo         = $font-family-base;
$font-family-logo         = get_font_family('title'), $font-family-base if get_font_family('title');

$font-family-headings     = $font-family-base;
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings');

$font-family-posts        = $font-family-base;
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts');

$font-family-monospace    = consolas, Menlo, monospace, $font-family-chinese;
$font-family-monospace    = get_font_family('codes'), consolas, Menlo, monospace, $font-family-chinese if get_font_family('codes');

其中$font-family-monospace用于设置代码块的显示字体。

可以看出，只有$font-family-chinese无法在配置文件中设置，其他的部分如在主题配置文件中设置，会优先使用配置文件中的字体，此时即使设置了$font-family-chinese也不会生效。

但是如果非要修改的话，可以在source/_data/variables.styl文件中设置，如：

1
$font-family-chinese      = 'Helvetica'

字体自定义方法

从上面可以看出，NexT自定义字体只需要在_config.next.yml文件中的font部分设置即可，建议设置各处字体的external的属性值为true，这样就无需在下载字体保存在本地，直接在线获取就可以，获取字体的地址的设置方式上面已经提到。

  • 如果要使用本地字体，最好转换为woff2格式，woff2格式是W3C推荐的WEB字体标准，有两个特点：
    1. 利用压缩技术有效减小文件大小
    2. 不加密、不受DRM（数字著作权）限制
  • 不要设置太多种类的字体，会影响网站的访问速度

使用HarmonyOS Sans字体

HarmonyOS 字体是华为发布的可免费商用的字体。其设计上聚焦于功能性、普适性，是一款多语言的无级可变字体，支持简体中文、繁体中文、拉丁、西里尔、希腊、阿拉伯等5大书写系统，105种语言全球化覆盖。

下载 HarmonyOS Sans

我尝试了一下，在展示效果上，HarmonyOS 字体看上去确实要舒服很多，索性把它设置为了博客的基础字体。

引入外部字体资源

设置的过程中发现Google字体上面找不到HarmonyOS字体，只能自己引入了。可通过CSS引入：

1
2
3
4
@font-face {
  font-family: 'Font Name';
  src: url('source path');
}

为了不影响访问效率，不建议使用src: url('../fonts/yaheiconsolashybrid.ttf')引入ttf、otf等字体格式，而要使用woff2格式。

为了进一步节省带宽，提升访问速度，还可以使用unicode-rangeCSS描述符对@font-face范围内的字体进行分割，如果页面没有使用此unicode编码范围内的字符，则不会下载字体，可以做到按需加载。所以推荐的设置方式为：

1
2
3
4
5
6
7
8
@font-face {
  font-family: 'HarmonyOS_Regular';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('//s1.hdslb.com/bfs/static/jinkela/long/font/HarmonyOS_Regular.a.woff2') format('woff2');
  unicode-range: U+9aa2-ffe5;
}

于是，有了一个新的问题，这unicode-range要怎么分割，而且还需要写一堆的CSS代码，头痛！要是有分割好CSS的直接拿来用就好了。我们可以创建source/_data/head.njk文件，使用下面的代码引入B站的字体文件，访问速度嗖嗖的。

1
2
3
<link rel="preconnect" href="https://s1.hdslb.com/" />
<link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" media="all" onload="this.media='all'" />
<link rel="stylesheet" href="//s1.hdslb.com/bfs/static/jinkela/long/font/medium.css" media="all" onload="this.media='all'" />

上面的代码会引入regular和medium两种字重，其显示效果如下图，我使用的是regular。
HarmonyOS 字体

修改字体设置

引入字体后，只需要修改NexT主题配置文件中的字体设置即可，修改后的内容如下：

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
font:
  enable: true

  host: https://fonts.font.im

  global:
    external: true
    family: HarmonyOS_Regular
    size:

  title:
    external: true
    family: HarmonyOS_Regular
    size:

  headings:
    external: true
    family: HarmonyOS_Regular
    size:

  posts:
    external: true
    family: HarmonyOS_Regular

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: JetBrains Mono

通用的样式修改办法

我们还可以通过浏览器的开发者工具来精准的修改样式

查看样式

以Chrome浏览器为例，在想要修改样式的元素上右键-->检查在开发者工具栏找到元素Tab页，选中对应的html标签,在右侧展示区的样式tab中查找对应的样式，复制代码。

也可以选中html标签后右键-->复制-->复制样式就得到了待修改元素的样式代码。

例如，我想修改文章页面底部标签的字体大小，找到的post-tag a即文章页面标签链接的样式为：

1
2
3
.post-tags a {
  font-size: 0.625em;
}

修改前的样式

修改样式

将上述步骤复制得到的样式代码，贴进source/_data/styles.styl文件中，改成需要的样式就可以。

1
2
3
4
5
6
// 页面底部标签加大显示
.post-tags a {
  font-size: 0.875em;
  //还可以设置加粗
  font-weight: bold;
}

修改后的样式

当然啦，使用上面的方式修改样式，需要有了解一些前端的基础知识，至少要了解HTML、CSS。我前端不行，随便弄弄，难免有错漏之处后面再慢慢改正。

本文参考了以下内容
免费商用字体HarmonyOS Sans
Hexo Next 主题详细配置之二