南琴浪博客

Hexo 搬迁记(三) 主题篇

12/27/2017

在之前挖坑的 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

页面间距

_variables.styl 中修改了以下属性:

// Layout
block-margin = 60px    //模块之间的间距
article-padding = 20px    // 文章内缩进
mobile-nav-width = 280px
main-column = 12    //文章的宽度
sidebar-column = 4    //边栏插件的空行