Hexo 搬迁记（三）主题篇

在之前挖坑的 Hexo 搬迁记系列一安装篇 Hexo 搬迁记系列二插件篇中，我分别介绍了本博客所使用的平台和插件。这次的系列三就介绍本博客的主题。

本博客的主题基于 Hexo 默认主题 LandScape，在原主题的基础上做了一些修改，并增加了一些插件。

修改大致分为：布局（layout）、样式（styl）、插件（widget）三部分，插件部分已在前面的插件篇进行过介绍。本文介绍 布局 和 样式 部分。

2017-12-26：今天收到了私戳，被夸了一句“博客好漂亮”，内心还是有点小开心的，虽然只是一点微小的工作。

布局（layout）

在 layout 上面，我改的东东大概有点多，并且我也不记得改了哪些了，所以先把能回忆起来的写出来。

文章目录

在 article.ejs 中，Hexo 提供了一个生成文章分级目录的 toc 函数，使用 <%- toc(post.content) %> 即可调用它。

<div class="article-catalogue">   <strong class="article-catalogue">文章目录</strong>   <%- toc(post.content, {list_number: false}) %> </div>

文末版权声明

在 article.ejs 中引入一个 if (post.excerpt && !index) 的判断，满足条件就插入指定段。

<footer class="article-footer">  <% if (post.excerpt && !index){ %>    <strong class="article-outdate">本文可能过时失效，若需更新，请留言</strong>   <br/>    <strong class="article-copyright">本博客文章均为原创，转载请注明来源</strong>  <% } %>  <%- partial('post/tag') %> </footer>

底部版权信息

在 footer.ejs 中引入以下：

<footer id="footer">   <% if (theme.sidebar === 'bottom'){ %>     <%- partial('_partial/sidebar') %>   <% } %>   <div class="outer">     <div id="footer-info" class="inner" align="left">       © 2017 - <a href="https://sometimesnaive.org/">南琴浪博客</a> - 京 ICP 备 15046286 号     </div>   </div> </footer>

样式（styl）

布局定下来了，接下来就是页面样式（css）的问题了。

Follow Me

在前面的插件篇中，我提到过，我使用了 FontAwesome 来引入图标。在那篇文章中，我介绍了 layout 部分。这里继续介绍 css 的部分。

首先在 _variables.styl 中定义字体 FontAwesome：

// FontAwesome font-icon = FontAwesome font-icon-path = "FontAwesome/fontawesome-webfont" font-icon-version = "4.0.3"

然后在 style.styl 中定义字体的相关属性：

@font-face   font-family: FontAwesome   font-style: normal   font-weight: normal   src: url(font-icon-path + ".eot?v=#" + font-icon-version)   src: url(font-icon-path + ".eot?#iefix&v=#" + font-icon-version) format("embedded-opentype"),        url(font-icon-path + ".woff?v=#" + font-icon-version) format("woff"),        url(font-icon-path + ".ttf?v=#" + font-icon-version) format("truetype"),        url(font-icon-path + ".svg#fontawesomeregular?v=#" + font-icon-version) format("svg")

再在 widget.styl 中定义 Follow Me 插件的样式，就完成了：

.social     text-align: center !important     font-size: 2.2em !important     line-height:1em !important     margin: auto    //块的大小      a      color:#50504f !important      text-decoration: none !important     .telegram:before         content: "/f2c6" !important         @extend $social-block     .telegram:hover         color:#333         cursor: pointer         background-color: color-background     .twitter:before         content: "/f081" !important         @extend $social-block     .twitter:hover         color:#333         cursor: pointer         background-color: color-background     .gplus:before         content: "/f0d4" !important         @extend $social-block     .gplus:hover         color:#333         cursor: pointer         background-color: color-background     .github:before         content: "/f092" !important         @extend $social-block     .github:hover         color:#333         cursor: pointer         background-color: color-background

分类目录

在 widget.styl 中定义分类目录插件的样式：

.category     font-size: 15px     margin: auto    //块的大小     text-align: left

友情链接

在 widget.styl 中定义友情链接插件的样式：

.friendlink     font-size: 15px     margin: auto    //块的大小     text-align: left

评论系统

在前面的插件篇中，我提到过，本博客采用 gitment 作为评论系统。我对 gitment 的样式做了一些修改。

我修改了 gitment 默认的 default.css 样式，对以下部分进行了修改，然后将整个文件单独定义为一个 gitment.styl：

// 这是 gitment 整体边框的效果 .gitment-render {   background: #fff;   margin: auto;    box-shadow: 1px 2px 3px #ddd;   border: 1px solid color-border;   border-radius: 5px; }  // 这是 gitment 内的默认字体 .gitment-container {   font-family: font-sans;   font-size: 15px;   line-height: 1.5em;   color: color-default;   word-wrap: break-word; }  // 引用块的颜色 .gitment-markdown blockquote {   padding: 0 1em;   color: #6a737d;   border-left: 0.25em solid #ffe4e1; }  // 其中 background-color 定义了 highlight 背景色 .gitment-markdown code {   padding: 0;   padding-top: 0.2em;   padding-bottom: 0.2em;   margin: 0;   font-size: 95%;   background-color: #ffe4e1;   border-radius: 0; }

然后，将 gitment.styl 引入到 style.styl 中：

if sidebar   @import "_partial/sidebar"    @import "_partial/widget"    //我添加的 widget 样式   @import "_partial/gitment"  //我添加的 gitment 样式

字体

在 _variables.styl 中找到字体的设定：

// Font // font-sans = "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans CN", "WenQuanYi Micro Hei", Arial, sans-serif font-sans = sans-serif font-arial = Arial // font-serif = Georgia, "Times New Roman", serif font-serif = serif // font-mono = Menlo, "Source Code Pro", Monaco, Consolas, Consolas, monospace font-mono = Menlo  // Font Dimension font-size = 15px    // 字体大小 line-height = 1.5em line-height-title = 1.0em

然后在 article.styl 中定义字体属性：

//字数计数插件 .article-wordcount   font-size: 15px   font-weight: bold   color: color-grey  //文章目录 .article-catalogue   font-size: 15px   //font-weight: bold   color: color-grey  //版权声明 .article-copyright   font-size: 15px   font-weight: bold   color: color-grey  //过时声明 .article-outdate   font-size: 15px   font-weight: bold   color: color-grey  .article-entry   //文章的标题样式   h1     font-size: 2em   h2     font-size: 1.6em    //标题大小     border-bottom: 1.5px #bbb solid;    //标题下划线   h3     font-size: 1.2em     //border-bottom: 1.4px #ccc solid;   ...   blockquote    //修改引用块样式     font-family: font-arial    //font-sans  //引用部分采用和正文（sans）不同的字体（arial）     font-size: 15px     margin: line-height 10px    //引用块的偏移量     text-align: left // 左对齐  // 文章下面的 Next/Previous 按钮 #article-nav   clearfix()   position: relative   @media mq-normal     margin: block-margin 0     &:before       absolute-center(8px)       content: ""       border-radius: 50%       background: color-grey //“下一篇/上一篇”功能的“圆点”的颜色       //box-shadow: 0 1px 2px #fff  .article-nav-link-wrap   text-decoration: none   text-shadow: 0 1px #fff   color: color-grey //“下一篇/上一篇”功能的“文章标题”的颜色   box-sizing: border-box   margin-top: block-margin   text-align: center   display: block   &:hover     color: color-default   @media mq-normal     width: 50%     margin-top: 0  .article-nav-caption   text-transform: uppercase   letter-spacing: 2px   color: color-grey //“下一篇/上一篇”功能的“Next/Previous”的颜色   line-height: 1em   //font-weight: bold    //字体加粗   #article-nav-newer &     margin-right: -2px

代码高亮

在 highlight.styl 中修改了以下属性：

highlight-background = #ffe4e1    //代码高亮块的背景色 highlight-foreground = color-default    //代码块的字体颜色  $code-block   background: highlight-background   margin: auto    //代码块不左右顶格，而是与两侧保持一定间距  $line-numbers   color: highlight-foreground   font-size: 0em    //行号大小   letter-spacing: 0px    //字符或字母之间的间隔

页面颜色

在 _variables.styl 中修改了以下属性：

// Colors color-default = #555 color-grey = #999 color-border = #ddd    //更改边框的颜色 color-link = #258fb8    //更改连接的颜色 color-background = #ffe4e1    //页面的背景颜色 color-sidebar-text = #777    //貌似当时修改的这个吧 //更改侧边栏链接的颜色 color-widget-background = #fff    //边栏插件的背景颜色 color-widget-border = #ddd    //边栏插件的边框颜色 color-footer-background = #ffe4e1    //页面底部的背景颜色 color-mobile-nav-background = #191919 color-twitter = #00aced color-facebook = #3b5998 color-pinterest = #cb2027 color-google = #dd4b39

页面间距