天天看點

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

  在hexo搭建完成後,使用next主題,發現有些字型過大,比如标題下面提示文章發表時間、分類、标簽等字型。以下提出我的修改方式(版本hexo:3.9.0、next:7.4.1)。

  預設建好之後,如下圖所示,我對框中的字型大小不滿意。

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

  首先想到要去主題配置檔案

_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;
           

  結果如下:

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

  在頁尾處的字型大小由

$font-size-small

控制,修改後結果如下:

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

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

繼續閱讀