hexo(Next主题)修改文字大小

最新推荐文章于 2023-04-07 10:28:13 发布

dpdpdppp

最新推荐文章于 2023-04-07 10:28:13 发布

阅读量7.8k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：博客搭建问题文章标签： Hexo 字体修改

本文链接：https://blog.youkuaiyun.com/dpdpdppp/article/details/102387532

博客搭建问题专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Hexo使用Next主题时调整特定部分的字体大小，包括标题下方的文章时间、分类和标签等信息，适用于Hexo 3.9.0及Next 7.4.1版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在hexo搭建完成后，使用next主题，发现有些字体过大，比如标题下面提示文章发表时间、分类、标签等字体。以下提出我的修改方式（版本hexo：3.9.0、next：7.4.1）。

默认建好之后，如下图所示，我对框中的字体大小不满意。

首先想到要去主题配置文件_config.yml查找Font以便于修改字体大小。通过搜寻，可以看到以下的结果：

font:
  # Use custom fonts families or not.
  # Depended options: `external` and `family`.
  enable: false

  # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
  host:

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)

  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Lato
    size:

  # Font settings for site title (.site-title).
  title:
    external: true
    family:
    size: 

  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family:
    size: 

  # Font settings for posts (.post-body).
  posts:
    external: true
    family:

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

可以看出只有全局、题目、多级标题、文章、代码的字体设置，并没有细致到我们需要的位置，于是我思考一定有一个地方设置了多种不同情况下所用到字体的大小。通过各方面的搜索，发现在themes\next\source\css\_variables下的base.styl中有这么一块：

// Font size
$font-size-base           = 1em;
$font-size-base           = unit(hexo-config('font.global.size'), em) if hexo-config('font.global.size') is a 'unit';
$font-size-smallest       = .75em;
$font-size-smaller        = .8125em;
$font-size-small          = .875em;
$font-size-medium         = 1em;
$font-size-large          = 1.125em;
$font-size-larger         = 1.25em;
$font-size-largest        = 1.375em;

看到了和我猜想一样的设置了不同情况下的字体的大小，其中font-size-smallest控制的就是红框中的字体大小，我进行了如下修改：

$font-size-smallest       = .65em;
$font-size-smaller        = .75em;
$font-size-small          = .8em;

结果如下：

在页尾处的字体大小由$font-size-small控制，修改后结果如下：

至此就完成了文字大小的修改。