Icarus的主题样式编码文件为themes/icarus/layout/layout.jsx。 此文件定义了站点全局的样式设置。本文详细介绍了本主题针对文章分类的详细配置说明。
../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'} /> //右 2. 那能不能逻辑改为只有主页才显示右边侧栏呢？我从源码中分析到，函数返回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栏显示，大家可根据自己喜好自行对想要的页面设置指定栏数。
+表示添加代码，没有标记表示代码不做修改
// 从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。
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 文件针对文章也做了宽度限制：
如果屏幕分为1列，则文章的宽度为 is-12，也即是12/12=100%的宽度；
如果屏幕分为2列，则文章的宽度为 is-8-widescreen，也即是8/12=66.66%的宽度；
如果屏幕分为3列，则文章的宽度为 is-6-widescreen，也即是6/12=50%的宽度。
那么调整插件宽度的方法也就差不多想出来啦！
GitHub博客 Gitee博客
