Icarus用户指南 - 主题美化

Icarus的主题样式编码文件为themes/icarus/layout/layout.jsx。

此文件定义了站点全局的样式设置。本文详细介绍了本主题针对文章分类的详细配置说明。

自定义 Icarus 主题

主题默认是三列排列，第一列是个人信息，第二列是文章的简介或者内容，第三列是标签云等组件。

在首页的时候阅读体验也很好，但是在文章页面查看全文的时候就感觉文章内容显示有些太少。

于是打算在文章页面隐藏掉右边的侧边栏。

我想应该是我用的icarus主题版本是3+，网上都是2+版本的教程，没有找到对应教程。

于是就自己阅读源码自己解决了问题。

默认配置也基本能用了，但是有一个痛点就是，阅读模式文章宽度太短了，还是根据个人习惯做下配置。

解决方案


1. 首先找到了控制侧边栏的代码文件在

../themes/icarus/layout/layout.jsx

源码为(版本差别，大同小异)：

  1. const { Component } = require('inferno');
  2. const classname = require('hexo-component-inferno/lib/util/classname');
  3. const Head = require('./common/head');
  4. const Navbar = require('./common/navbar');
  5. const Widgets = require('./common/widgets');
  6. const Footer = require('./common/footer');
  7. const Scripts = require('./common/scripts');
  8. const Search = require('./common/search');
  10. module.exports = class extends Component {
  11.     render() {
  12.         const { env, site, config, page, helper, body } = this.props;
  14.         const language = page.lang || page.language || config.language;
  15.         const columnCount = Widgets.getColumnCount(config.widgets);
  17.         return <html lang={language ? language.substr(0, 2) : ''}>
  18.             <Head env={env} site={site} config={config} helper={helper} page={page} />
  19.             <body class={`is-${columnCount}-column`}>
  20.                 <Navbar config={config} helper={helper} page={page} />
  21.                 <section class="section">
  22.                     <div class="container">
  23.                         <div class="columns">
  24.                             <div class={classname({
  25.                                 column: true,
  26.                                 'order-2': true,
  27.                                 'column-main': true,
  28.                                 'is-12': columnCount === 1,
  29.                                 'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
  30.                                 'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
  31.                             })} dangerouslySetInnerHTML={{ __html: body }}></div>
  32.                             <Widgets site={site} config={config}
  33.                              helper={helper} page={page} position={'left'} />
  34.                             <Widgets site={site} config={config}
  35.                              helper={helper} page={page} position={'right'} />
  36.                         </div>
  37.                     </div>
  38.                 </section>
  39.                 <Footer config={config} helper={helper} />
  40.                 <Scripts site={site} config={config} helper={helper} page={page} />
  41.                 <Search config={config} helper={helper} />
  42.             </body>
  43.         </html>;
  44.     }
  45. };

三栏分别为：（从第24行开始）

    1. <div class={classname({
    2.       column: true,
    3.       'order-2': true,
    4.       'column-main': true,
    5.       'is-12': columnCount === 1,
    6.       'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
    7.       'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
    8.   })} dangerouslySetInnerHTML={{ __html: body }}></div>  // 中
    1. <Widgets site={site} config={config} helper={helper} page={page} position={'left'} />  // 左
    1. <Widgets site={site} config={config} helper={helper} page={page} position={'right'} />  //右


2. 那能不能逻辑改为只有主页才显示右边侧栏呢？

我从源码中分析到，函数返回return的就是样式页面。

既然找到了这3栏，我可以通过改变返回值，就可以达到控制主体样式的目的。

所以加一个判断语句即可：

  1. if(page.path==='index.html'){   // index.html即主页面
  2.   // 返回3栏
  3.   return '...';
  4. }
  5. else{
  6.   // 返回2栏，改变宽度即可
  7.   return '...';
  8. }

上面代码只会在主页面显示3栏，后续博主我在使用的过程中发现有且只有主页面是3栏；换页、分类页等页面就会变成2栏！
因为我们的代码只为主页面返回3栏！

后来在读源码后，找到了解决方法：

在 ../themes/icarus/layout/layout.jsx 文件中第16行添加如下代码：

  1.   console.log("Page", page);
  2.   console.log("Page.path: ", page.path);

这样就可以查看页面具体信息；

控制台执行hexo g -d后，会出现以下信息；

由于每个page信息可能会很多，尤其是博客文章内容过多，就会使page包含的信息过多，会使控制台信息溢出；所以我只选择其中一个较短的信息展示如下：

2.1 page信息

  1. Page:  { base: 'tags/Hexo/',
  2.   total: 1,
  3.   current: 1,
  4.   current_url: 'tags/Hexo/',
  5.   posts: _Query { data: [ [_Document], [_Document] ], length: 2 },
  6.   prev: 0,
  7.   prev_link: '',
  8.   next: 0,
  9.   next_link: '',
  10.   tag: 'Hexo',
  11.   path: 'tags/Hexo/index.html',
  12.   lang: 'en',
  13.   canonical_path: 'tags/Hexo/index.html' }

2.2 page.path信息

  1. ubuntu~/github/mysticalguest.github.io$ hexo g -d
  2. Inferno is in development mode.
  3. INFO  =======================================
  4.  ██╗ ██████╗ █████╗ ██████╗ ██╗   ██╗███████╗
  5.  ██║██╔════╝██╔══██╗██╔══██╗██║   ██║██╔════╝
  6.  ██║██║     ███████║██████╔╝██║   ██║███████╗
  7.  ██║██║     ██╔══██║██╔══██╗██║   ██║╚════██║
  8.  ██║╚██████╗██║  ██║██║  ██║╚██████╔╝███████║
  9.  ╚═╝ ╚═════╝╚═╝  ╚═╝╚═╝  ╚═╝ ╚═════╝ ╚══════╝
  10. =============================================
  11. INFO  === Checking package dependencies ===
  12. INFO  === Checking the configuration file ===
  13. INFO  === Registering Hexo extensions ===
  14. INFO  Start processing
  15. INFO  Files loaded in 6.76 s
  16. Page.path:  2020/06/18/ICARUS主题美化/
  17. Page.path:  2020/06/17/数据结构进阶实训八/
  18. Page.path:  2020/06/17/数据结构进阶实训五/
  19. Page.path:  2020/06/17/数据结构进阶实训二/
  20. Page.path:  2020/06/17/数据结构进阶实训一/
  21. Page.path:  2020/06/17/数据结构进阶实训六/
  22. Page.path:  2020/06/17/数据结构进阶实训七/
  23. Page.path:  2020/06/16/Java笔记文档2/
  24. Page.path:  2020/06/16/Java笔记文档1/
  25. Page.path:  2020/06/15/数据结构进阶实训三/
  26. Page.path:  2020/06/15/数据结构进阶实训四/
  27. Page.path:  2020/06/14/hello-world/
  28. Page.path:  archives/index.html
  29. Page.path:  archives/page/2/index.html
  30. Page.path:  archives/2020/index.html
  31. Page.path:  archives/2020/page/2/index.html
  32. Page.path:  archives/2020/06/index.html
  33. Page.path:  archives/2020/06/page/2/index.html
  34. Page.path:  categories/配置/index.html
  35. Page.path:  categories/Document-Compile/index.html
  36. Page.path:  categories/主题/index.html
  37. Page.path:  categories/算法/index.html
  38. Page.path:  index.html
  39. Page.path:  page/2/index.html
  40. Page.path:  tags/Hexo/index.html
  41. Page.path:  tags/Java/index.html
  42. Page.path:  tags/C/index.html
  43. Page.path:  categories/index.html
  44. Page.path:  tags/index.html
  45. INFO  0 files generated in 3.37 s
  46. INFO  Deploying: git
  47. INFO  Clearing .deploy_git folder...
  48. INFO  Copying files from public folder...
  49. INFO  Copying files from extend dirs...
  50. 位于分支 master
  51. 无文件要提交，干净的工作区
  52. 分支 'master' 设置为跟踪来自 'git@github.com:*/*.git' 的远程分支 'master'。
  53. Everything up-to-date
  54. INFO  Deploy done: git

从控制台打印出的信息，可以明显看出每个页面的详细路径信息；

所以我们想要那些页面3栏都可以；

  1.   var path = /\Sindex.html/;
  3.   if(page.path==='index.html' || path.test(page.path)){
  4.   	// 返回3栏
  5.     return '...';
  6.   }
  7.   else{
  8.     // 返回2栏，改变宽度即可
  9.     return '...';
  10.   }

这里我利用正则表达式，将非博客文章页面都设为3栏显示，大家可根据自己喜好自行对想要的页面设置指定栏数。


3. 其他修改逻辑

+表示添加代码，没有标记表示代码不做修改

  1. // 从16行开始修改代码
  2. + if(page.path==='index.html'){
  4.   return <html lang={language ? language.substr(0, 2) : ''}>
  5.       <Head env={env} site={site} config={config} helper={helper} page={page} />
  6.       <body class={`is-${columnCount}-column`}>
  7.           <Navbar config={config} helper={helper} page={page} />
  8.           <section class="section">
  9.               <div class="container">
  10.                   <div class="columns">
  11.                       <div class={classname({
  12.                           column: true,
  13.                           'order-2': true,
  14.                           'column-main': true,
  15.                           'is-12': columnCount === 1,
  16.                           'is-8-tablet is-8-desktop is-8-widescreen': columnCount === 2,
  17.                           'is-8-tablet is-8-desktop is-6-widescreen': columnCount === 3
  18.                       })} dangerouslySetInnerHTML={{ __html: body }}></div>
  19.                       <Widgets site={site} config={config}
  20.                        helper={helper} page={page} position={'left'} />
  21.                       <Widgets site={site} config={config}
  22.                        helper={helper} page={page} position={'right'} />
  23.                   </div>
  24.               </div>
  25.           </section>
  26.           <Footer config={config} helper={helper} />
  27.           <Scripts site={site} config={config} helper={helper} page={page} />
  28.           <Search config={config} helper={helper} />
  29.       </body>
  30.   </html>;
  31. + }
  32. + else{
  33. + return <html lang={language ? language.substr(0, 2) : ''}>
  34. +     <Head env={env} site={site} config={config} helper={helper} page={page} />
  35. +     <body class={`is-${columnCount}-column`}>
  36. +         <Navbar config={config} helper={helper} page={page} />
  37. +         <section class="section">
  38. +             <div class="container">
  39. +                 <div class="columns">
  40. +                     <div class={classname({
  41. +                         column: true,
  42. +                         'order-2': true,
  43. +                         'column-main': true,
  44. +                         'is-12': columnCount === 1,
  45. +                         'is-8-tablet is-8-desktop is-10-widescreen': columnCount === 2
  46. +                     })} dangerouslySetInnerHTML={{ __html: body }}></div>
  47. +                     <Widgets site={site} config={config}
  48. helper={helper} page={page} position={'left'}/>
  49. +                 </div>
  50. +             </div>
  51. +         </section>
  52. +         <Footer config={config} helper={helper} />
  53. +         <Scripts site={site} config={config} helper={helper} page={page} />
  54. +         <Search config={config} helper={helper} />
  55. +     </body>
  56. + </html>;
  57. + }

好啦，大工告成！

其中只有两处代码改动较大，让我们来看看吧！

我们只是修改了栏数，但每一栏的宽度没有改变，这里更关注的是文章栏的宽度。

具体修改代码下：

  1. // 渲染相应栏的标签，只添加‘中’和‘左’
  2. // 根据自己的喜好可以选择任意组合，‘中’和‘右’也可以
  3. // 第45行
  4. '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 文件针对文章也做了宽度限制：

如果屏幕分为1列，则文章的宽度为 is-12，也即是12/12=100%的宽度；

如果屏幕分为2列，则文章的宽度为 is-8-widescreen，也即是8/12=66.66%的宽度；

如果屏幕分为3列，则文章的宽度为 is-6-widescreen，也即是6/12=50%的宽度。

那么调整插件宽度的方法也就差不多想出来啦！

ICARUS主题美化的更多相关文章

  1. ubuntu16.04主题美化和软件推荐

    前几天把ubuntu从15.10更新到了16.10,在网上看到有很多直接更新出问题的,正好赶上换SSD,于是采用全新安装,之前用ubuntu的时候装软件最让人头疼了,这回又得头疼一次了!! 索性把他记 ...

  2. Android源码浅析（二）——Ubuntu Root,Git,VMware Tools，安装输入法，主题美化，Dock，安装JDK和配置环境

    Android源码浅析(二)--Ubuntu Root,Git,VMware Tools,安装输入法,主题美化,Dock,安装JDK和配置环境 接着上篇,上片主要是介绍了一些安装工具的小知识点Andr ...

  3. Hexo博客搭建以及Next主题美化的经验之谈

    这并不是一篇博客搭建教程.内容主要包含个人对于Hexo博客搭建的心得,Next6.0主题美化的部分建议,以及摘录一些各种用于博客搭建的link. 在博客园3年6个月,确实也学到了很多,博客园也是目前为 ...

  4. Ubuntu 16.04 主题美化及常用软件安装

    一.主题美化 系统清理 系统更新: 安装完系统之后,需要更新一些补丁.Ctrl+Alt+T调出终端,执行一下代码: sudo apt-get update sudo apt-get upgrade 卸 ...

  5. 安装配置hexo icarus主题配置

    安装部分配置hexo icarus主题配置 安装icarus 直接下载主题模块放到blog项目 ,blog项目根目录执行 git clone https://github.com/ppoffice/h ...

  6. Ubuntu主题美化篇

    主题美化篇 Ubuntu自带的主题简直不敢恭维,这里博主将它美化了一番,心情瞬间都好了一大截,码代码也会飞起!!先放一张我美化后的效果. 桌面和终端效果如下: unity-tweak-tool 调整 ...

  7. Ubuntu主题美化--使用WPS风格

    五一就这么过去了,我也没有出去玩,一个人闲的蛋疼,无聊就把ubuntu美化一下. 闲话不多说,先看效果: 壁纸是我自己制作的的,如果喜欢另存一下下面这张图设置成背景就可以了,分辨率是1366x768. ...

  8. CodeBlocks的汉化、主题美化及其调试功能的实现

    破事水 最近由于Cfree5经常崩溃+调试语句运行速度比较慢,想尝试一下另一个听说很好用的IDE Code::Blocks. 先上官网的安装包(自带mingw,安装完可以直接用,适用于windows系 ...

  9. ubuntu 16.04 主题美化及终端美化

    如果你使用的是图形界面,你会发现ubuntu默认的界面真是丑的一批,所以简单美化一下: 1.安装unity-tweak-tool: sudo apt-get install unity-tweak-t ...

随机推荐

  1. 【模式识别与机器学习】——PCA主成分分析

    基本思想 其基本思想就是设法提取数据的主成分(或者说是主要信息),然后摒弃冗余信息(或次要信息),从而达到压缩的目的.本文将从更深的层次上讨论PCA的原理,以及Kernel化的PCA. 引子 首先我们 ...

  2. java BigInteger与BigDecimal

    一 BigInteger java中long型为最大整数类型,对于超过long型的数据如何去表示呢.在Java的世界中,超过long型 的整数已经不能被称为整数了,它们被封装成BigInteger对象 ...

  3. Mybatis-06-Lombok

    偷懒神器Lombok 1. 什么是Lombok? java library plugs build tools 2.使用步骤: 在IDEA中安装Lombok插件 在项目中导入lombok的jar包   ...

  4. 第二章 Kuberbetes实践指南

    kubernetes安装与配置 网络,安全,服务启动配置 参考: kubernetes权威指南第二版 kubectl命令行工具用法详解 kubectl [command] [type] [name] ...

  5. Gulp的安装及用法

    1.安装淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org cnpm -v 2.生成项目描述文件 package.j ...

  6. echarts 导出为word文档

    https://www.jianshu.com/p/5bd47ab59bbe 主要思路:前台echarts生成图片后,获取base64码,传给后台解析,然后写入freemarker模板,进行下载. 图 ...

  7. 3 Spark 集群安装

    第3章 Spark集群安装 3.1 Spark安装地址 1．官网地址 http://spark.apache.org/ 2．文档查看地址 https://spark.apache.org/docs/2 ...

  8. k8s 辨析 port、NodePort、targetPort、containerPort 区别

    刚接触 k8s 涉及到端口到内容较多,容易混淆,这里整理如下: 目录 nodePort port targetPort containerPort 参考文章 nodePort nodePort 提供了 ...

  9. 面试28k职位，老乡面试官从HashCode到HashMap给我讲了一下午！「回家赶忙整理出1.6万字的面试材料」

    作者:小傅哥 博客:https://bugstack.cn 目录 一.前言 二.HashCode为什么使用31作为乘数 1. 固定乘积31在这用到了 2. 来自stackoverflow的回答 3. ...

  10. 团队作业1——团队展示&选题（银河超级无敌舰队）

    一.团队展示 1.队名: 银河超级无敌舰队 2.队员学号: 姓名 学号 郭奕材(组长) 3118004959 刘婉儿(PM) 3218004994 辜仰淦 3118004957 王煜墉 3118004 ...