Icarus用戶指南 - 主題美化
Icarus的主題樣式編碼文件為themes/icarus/layout/layout.jsx。
此文件定義了站點全局的樣式設置。本文詳細介紹了本主題針對文章分類的詳細配置說明。
自定義 Icarus 主題
主題默認是三列排列，第一列是個人信息，第二列是文章的簡介或者內容，第三列是標簽雲等組件。
在首頁的時候閱讀體驗也很好，但是在文章頁面查看全文的時候就感覺文章內容顯示有些太少。於是打算在文章頁面隱藏掉右邊的側邊欄。
我想應該是我用的icarus主題版本是3+，網上都是2+版本的教程，沒有找到對應教程。
於是就自己閱讀源碼自己解決了問題。默認配置也基本能用了，但是有一個痛點就是，閱讀模式文章寬度太短了，還是根據個人習慣做下配置。
解決方案
1. 首先找到了控制側邊欄的代碼文件在../themes/icarus/layout/layout.jsx
源碼為(版本差別，大同小異)：
const { Component } = require('inferno');
const classname = require('hexo-component-inferno/lib/util/classname');
const Head = require('./common/head');
const Navbar = require('./common/navbar');
const Widgets = require('./common/widgets');
const Footer = require('./common/footer');
const Scripts = require('./common/scripts');
const Search = require('./common/search');
module.exports = class extends Component {
render() {
const { env, site, config, page, helper, body } = this.props;
const language = page.lang || page.language || config.language;
const columnCount = Widgets.getColumnCount(config.widgets);
return <html lang={language ? language.substr(0, 2) : ''}>
<Head env={env} site={site} config={config} helper={helper} page={page} />
<body class={`is-${columnCount}-column`}>
<Navbar config={config} helper={helper} page={page} />
<section class="section">
<div class="container">
<div class="columns">
<div class={classname({
column: true,
'order-2': true,
'column-main': true,
'is-12': columnCount === 1,
'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
})} dangerouslySetInnerHTML={{ __html: body }}></div>
<Widgets site={site} config={config}
helper={helper} page={page} position={'left'} />
<Widgets site={site} config={config}
helper={helper} page={page} position={'right'} />
</div>
</div>
</section>
<Footer config={config} helper={helper} />
<Scripts site={site} config={config} helper={helper} page={page} />
<Search config={config} helper={helper} />
</body>
</html>;
}
};
三欄分別為：（從第24行開始）
-
<div class={classname({ column: true, 'order-2': true, 'column-main': true, 'is-12': columnCount === 1, 'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2, 'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3 })} dangerouslySetInnerHTML={{ __html: body }}></div> // 中 -
<Widgets site={site} config={config} helper={helper} page={page} position={'left'} /> // 左 -
<Widgets site={site} config={config} helper={helper} page={page} position={'right'} /> //右
我從源碼中分析到，函數返回return的就是樣式頁面。
既然找到了這3欄，我可以通過改變返回值，就可以達到控制主體樣式的目的。
所以加一個判斷語句即可：
if(page.path==='index.html'){ // index.html即主頁面
// 返回3欄
return '...';
}
else{
// 返回2欄，改變寬度即可
return '...';
}
上面代碼只會在主頁面顯示3欄，后續博主我在使用的過程中發現有且只有主頁面是3欄；換頁、分類頁等頁面就會變成2欄！ 因為我們的代碼只為主頁面返回3欄！
后來在讀源碼后，找到了解決方法：
在 ../themes/icarus/layout/layout.jsx 文件中第16行添加如下代碼：
console.log("Page", page);
console.log("Page.path: ", page.path);
這樣就可以查看頁面具體信息；
控制台執行hexo g -d后，會出現以下信息；
由於每個page信息可能會很多，尤其是博客文章內容過多，就會使page包含的信息過多，會使控制台信息溢出；所以我只選擇其中一個較短的信息展示如下：
2.1 page信息
Page: { base: 'tags/Hexo/',
total: 1,
current: 1,
current_url: 'tags/Hexo/',
posts: _Query { data: [ [_Document], [_Document] ], length: 2 },
prev: 0,
prev_link: '',
next: 0,
next_link: '',
tag: 'Hexo',
path: 'tags/Hexo/index.html',
lang: 'en',
canonical_path: 'tags/Hexo/index.html' }
2.2 page.path信息
ubuntu~/github/mysticalguest.github.io$ hexo g -d
Inferno is in development mode.
INFO =======================================
██╗ ██████╗ █████╗ ██████╗ ██╗ ██╗███████╗
██║██╔════╝██╔══██╗██╔══██╗██║ ██║██╔════╝
██║██║ ███████║██████╔╝██║ ██║███████╗
██║██║ ██╔══██║██╔══██╗██║ ██║╚════██║
██║╚██████╗██║ ██║██║ ██║╚██████╔╝███████║
╚═╝ ╚═════╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚══════╝
=============================================
INFO === Checking package dependencies ===
INFO === Checking the configuration file ===
INFO === Registering Hexo extensions ===
INFO Start processing
INFO Files loaded in 6.76 s
Page.path: 2020/06/18/ICARUS主題美化/
Page.path: 2020/06/17/數據結構進階實訓八/
Page.path: 2020/06/17/數據結構進階實訓五/
Page.path: 2020/06/17/數據結構進階實訓二/
Page.path: 2020/06/17/數據結構進階實訓一/
Page.path: 2020/06/17/數據結構進階實訓六/
Page.path: 2020/06/17/數據結構進階實訓七/
Page.path: 2020/06/16/Java筆記文檔2/
Page.path: 2020/06/16/Java筆記文檔1/
Page.path: 2020/06/15/數據結構進階實訓三/
Page.path: 2020/06/15/數據結構進階實訓四/
Page.path: 2020/06/14/hello-world/
Page.path: archives/index.html
Page.path: archives/page/2/index.html
Page.path: archives/2020/index.html
Page.path: archives/2020/page/2/index.html
Page.path: archives/2020/06/index.html
Page.path: archives/2020/06/page/2/index.html
Page.path: categories/配置/index.html
Page.path: categories/Document-Compile/index.html
Page.path: categories/主題/index.html
Page.path: categories/算法/index.html
Page.path: index.html
Page.path: page/2/index.html
Page.path: tags/Hexo/index.html
Page.path: tags/Java/index.html
Page.path: tags/C/index.html
Page.path: categories/index.html
Page.path: tags/index.html
INFO 0 files generated in 3.37 s
INFO Deploying: git
INFO Clearing .deploy_git folder...
INFO Copying files from public folder...
INFO Copying files from extend dirs...
位於分支 master
無文件要提交，干凈的工作區
分支 'master' 設置為跟蹤來自 'git@github.com:*/*.git' 的遠程分支 'master'。
Everything up-to-date
INFO Deploy done: git
從控制台打印出的信息，可以明顯看出每個頁面的詳細路徑信息；
所以我們想要那些頁面3欄都可以；
var path = /\Sindex.html/;
if(page.path==='index.html' || path.test(page.path)){
// 返回3欄
return '...';
}
else{
// 返回2欄，改變寬度即可
return '...';
}
這里我利用正則表達式，將非博客文章頁面都設為3欄顯示，大家可根據自己喜好自行對想要的頁面設置指定欄數。
3. 其他修改邏輯
+表示添加代碼，沒有標記表示代碼不做修改
// 從16行開始修改代碼
+ if(page.path==='index.html'){
return <html lang={language ? language.substr(0, 2) : ''}>
<Head env={env} site={site} config={config} helper={helper} page={page} />
<body class={`is-${columnCount}-column`}>
<Navbar config={config} helper={helper} page={page} />
<section class="section">
<div class="container">
<div class="columns">
<div class={classname({
column: true,
'order-2': true,
'column-main': true,
'is-12': columnCount === 1,
'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
})} dangerouslySetInnerHTML={{ __html: body }}></div>
<Widgets site={site} config={config}
helper={helper} page={page} position={'left'} />
<Widgets site={site} config={config}
helper={helper} page={page} position={'right'} />
</div>
</div>
</section>
<Footer config={config} helper={helper} />
<Scripts site={site} config={config} helper={helper} page={page} />
<Search config={config} helper={helper} />
</body>
</html>;
+ }
+ else{
+ return <html lang={language ? language.substr(0, 2) : ''}>
+ <Head env={env} site={site} config={config} helper={helper} page={page} />
+ <body class={`is-${columnCount}-column`}>
+ <Navbar config={config} helper={helper} page={page} />
+ <section class="section">
+ <div class="container">
+ <div class="columns">
+ <div class={classname({
+ column: true,
+ 'order-2': true,
+ 'column-main': true,
+ 'is-12': columnCount === 1,
+ 'is-8-tablet is-8-desktop is-10-widescreen': columnCount === 2
+ })} dangerouslySetInnerHTML={{ __html: body }}></div>
+ <Widgets site={site} config={config}
helper={helper} page={page} position={'left'}/>
+ </div>
+ </div>
+ </section>
+ <Footer config={config} helper={helper} />
+ <Scripts site={site} config={config} helper={helper} page={page} />
+ <Search config={config} helper={helper} />
+ </body>
+ </html>;
+ }
好啦，大工告成！
其中只有兩處代碼改動較大，讓我們來看看吧！
我們只是修改了欄數，但每一欄的寬度沒有改變，這里更關注的是文章欄的寬度。
具體修改代碼下：
// 渲染相應欄的標簽，只添加‘中’和‘左’
// 根據自己的喜好可以選擇任意組合，‘中’和‘右’也可以
// 第45行
'is-8-tablet is-8-desktop is-10-widescreen': columnCount === 2
即將原來的 is-8-widescreen修改為is-10-widescreen。
4. 下面詳細解釋一下代碼
icarus 可以設置資料、toc、歸檔等等插件在文章的左側或者右側。也就是說，包括插件和文章在內，列數在1~3列不等：
無插件的時候，為1列；
插件統一在左側或右側時，為2列；
插件左、右側都有時，為3列。
Bulma 引擎將屏幕橫向分為12份，所有元素按照自己的需求使用即可。
通過 layout或widget.jsx 文件，我們可以看到，對於插件而言：
如果屏幕分為2列，則插件的寬度為 is-4-widescreen，也即是4/12=33.33%的寬度；
如果屏幕分為3列，則插件的寬度為 is-3-widescreen，也即是3/12=25%的寬度，兩列插件占了50%寬。
同樣的，layout.jsx 文件針對文章也做了寬度限制：