[Hexo] Icarus 主題 - 程式碼區塊標題、文字大小與圖片置中對齊

以下是設定程式碼區塊標題,修改 Icarus 主題文章區塊文字大小、圖片置中對齊的方法

一、撰寫環境

  • hexo 5.2.0
  • hexo-cli 4.2.0
  • icarus 4.0.1

二、程式碼區塊標題

不限 Hexo 主題皆適用

使用標籤外掛,加入以下程式碼,可設定程式碼區塊標題:

1
2
3
4
{% codeblock Array.map lang:javascript %}
import Loading from 'vue-loading-overlay';
console.log('hello');
{% endcodeblock %}

顯示如下:

Array.map
1
2
import Loading from 'vue-loading-overlay';
console.log('hello');

三、圖片置中對齊

在 Icarus 主題,圖片並非預設置中,若要設定圖片置中有以下兩種方法:

Icarus 主題圖片預設靠左對齊

方法一: 單一圖片置中對齊

不限 Hexo 主題皆適用

若只要一張圖片置中對齊,可在需使用區塊加上以下程式碼

1
2
3
<div style="text-align: center">
<img src="圖片網址"/>
</div>

範例:
(因已在根目錄 _config.yml 設置 post_asset_folder: true,可直接使用同名資料夾中的圖片檔)

1
2
3
<div style="text-align: center">
<img src="toc-number.png"/>
</div>

效果如下圖:

方法二:所有圖片置中對齊

若要在 Icarus 主題中,使所有圖片都置中對齊,可在 themes/icarus/include/style/article.styl 添加以下程式碼:

1
2
3
4
a
img
margin: auto
display: block

放置位置如下:

themes/icarus/include/style/article.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
article
...中間省略...
&.article
...中間省略...
.content
word-wrap: break-word
font-size: $article-font-size
...中間省略...

--- 在 .content 最後加入 ---
a
img
margin: auto
display: block

效果如下圖:

四、修改文字大小

若要修改 Icarus 主題文章區塊的文字大小,在 themes/icarus/include/style/article.styl 檔案中可看到,Icarus 主題把文章內容 (.content) 的預設字大小設定為 $article-font-size ?= 1.1rem (rem - 子元素透過倍數乘以根元素 px 值),而 h1~h5、pre,則是利用 em (em - 子元素透過倍數乘以父元素 px 值),設定文字大小。

themes/icarus/include/style/article.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$article-font-size ?= 1.1rem
...中間省略...
.content
word-wrap: break-word
font-size: $article-font-size

h1
font-size: 1.75em

h2
font-size: 1.5em

h3
font-size: 1.25em

h4
font-size: 1.125em

h5
font-size: 1em

pre
font-size: .85em

這裡只修改 $article-font-size 變數,使全部文章區塊的文字變大,你也可以另外再修改 h1~h5、pre 各自的 font-size

themes/icarus/include/style/article.styl
1
$article-font-size ?= 1.2rem

Icarus 主題預設文章區塊的文字大小 - $article-font-size ?= 1.1rem

修改後文章區塊的文字大小 - $article-font-size ?= 1.2rem

五、參考:

標籤外掛 - Code Block
请问如何实现文章中图片居中显示? #386

評論