Hexo + Next 的优化

发表于 | 分类于 | 0 comments

本文是在建站的中途开始写的，记录一下自己修改的部分和使用的方法，仅供参考。

样式页面样式修改

整体修改思路

在记录以下内容之前，我已经借鉴其他博主的博文，对站点进行了一些修改(其中包括简单的动画，和对代码块的修改)

在进行代码块修改之后，总结了一个小套路：

  • 首先确定好自己想要修改的模块
  • 使用浏览器的检查元素，可以找到对应的模块的css样式
  • 然后先在检察元素模式下对css样式进行修改，调整出自己喜欢的样式
  • 最后把原先的css样式复制，用Sublime的Find in Files，找到对应文件(一般在自己使用的主题目录下,比如我是Next目录下的文件中)，对文件进行修改就可以了

这样就不需要想修改说明就去搜索啦 ~ (我的blockquote的样式修改就是这样完成的~)

修改 blockquote(引言) 样式

在Chrome下右键检查元素，我的组件显示在浏览器右侧，选中blockquote模块，则原有的css样式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
blockquote {
    padding: 0 15px;
    color: #666;
    border-left: 4px solid #ddd;
}
blockquote {
    margin: 0;
    padding: 0;
}
blockquote {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

在样式中color: #666定义了内部文字的颜色，border-left: 4px solid #ddd定义了左边的侧边栏的颜色。然后我们就可以对其进行修改啦 ~

  • 复制border-left: 4px solid #ddd;在Sublime里搜索，找到对应文件。

  • 注意自己在Find Results判断，哪个是原有的文件，哪个是后来生成的。

  • 我的搜索结果是\themes\next\source\css\_common\scaffolding\base.styl，因此开心地自己修改啦~

修改结果，嘛，就跟本文的第一句一样了。这里提供几种配色方案~（自己从图片上取色做的配色，慎用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//异色红绿
color: #108c89;
border: 1px solid #f1756d;
border-left: 5px solid #f14e49;
//棕色系
color: #8b7462;
border: 1px solid #8b7462;
border-left: 5px solid #bd3b45;
//蓝色系
color: #328daa;
border: 1px solid #8ed3f4;
border-left: 5px solid #8ed3f4;
//异色橙绿
color: #9ba646;
border: 1px solid #f29d4c;
border-left: 5px solid #f29d4c;

在网页中使用外部字体

在网页中定义外部字体大概有三种方式，可参考博文 如何在网页设计中使用个性化字体。

我选用的是利用css3的@font-face方式，先前我都是直接在源文件上修改的，其实为了避免自己修改的时候出差错难以恢复，可以在/theme/next/source/css/_custom/custom.styl中添加定义。这里我选择的字体是 15设计师常用英文字体 一文中提到的YeahPapa。步骤如下：

  • 下载对应字体的ttf文件（当然font-face支持的其他类型文件均可，可见“如何在网页设计中…”一文
  • 将ttf文件放在\theme\source\fonts\文件夹中

  • 在/theme/next/source/css/_custom/custom.styl中添加：

    1
    2
    3
    4
    @font-face {
        font-family: YeahPapa;
        src: url('/fonts/YeahPapa.ttf') format('truetype');
    }

  • 然后在自己想使用的地方使用font-family:'YeahPapa'即可

完成效果参考下一节的 在文章尾部添加End

修改超链接样式

依然在/theme/next/source/css/_custom/custom.styl中修改，添加如下代码：

—— 修改颜色

1
2
3
4
5
6
7
8
9
10
11
.post-body a {
    color: #6975a7;
    text-decoration: none;
    border-bottom: 1px dashed #6465a5;
    background-color: transparent;
    word-wrap: break-word;
}
.post-body a: hover{
    color:#f15838;
    border-bottom: 1px dashed #f28a31;
}

其中a定义了超链接的基本样式，a:hover定义了超链接在鼠标悬停时颜色的变化。.post-body使得改变的样式只作用与文章内部，否则你会发现文章标题下面的分类等等样式都会被改变。可以简单预览一下效果：

—— 菜单鼠标悬停后样式

增加如下内容（其中“\5B” & “\5D”是[ & ]符号在css中对应的编码 ）：

1
2
3
4
5
6
7
8
9
10
11
.menu a:hover{
    color: #0ABDA0;
}
.menu a:hover::before { 
    content: "\5B";
    left: -10px; 
}
.menu a:hover::after {
    content: "\5D";
    right:-10px; 
}

—— 增加font-awesome符号

在文章可以直接使用如下代码即可使用font-awesome符号

1
<i class="fa fa-paper-plane"></i>

则可以得到左边的图标，这里提供一个可以查阅所有font-awesome符号的页面

FontAwesome 4.7.0 中完整的675个图标样式CSS参考

上面的超链接在markdown文件中的内容是

1
[<i class="fa fa-book"></i> FontAwesome 4.7.0 中完整的675个图标样式CSS参考](https://9iphp.com/fa-icons)

不过，因为我配置的next主题下font-awesome的版本不是4.7.0，所以我直接下载了4.7.0版本的font-awesome的css文件，替换了\theme\next\source\lib\font-awesome\css\中的文件

修改侧边栏样式

类名 对应元素
.site-meta 原来模板里面黑色的，包含网站标题、介绍的部分
.header-inner 在没有下拉时包含site-meta和菜单的部分
.sidebar-inner 在没有下拉时的包含文章目录和站点概览的部分
.sidebar 在进行了下拉之后的包含文章目录和站点概览的部分
.headband 在piscal的scheme下上面有3px的黑色，这就是对应的类

我做的修改只是简单地添加了背景。我添加背景的要点是透明 + 固定宽度。

透明：将使用的png文件放在SAI里面（当然也可以用ps，博主是手残板绘党，所以经常用SAI）调低了透明度就可以了。
固定宽度：之所以使用固定宽度，是因为下拉阅读文章的时候会实时展开目录，如果使用其他格式，会导致图片随着阅读被奇怪的拉伸。所以使用固定宽度会比较好~

我的custom.styl里面的定义（这里我还修改了阴影）：

1
2
3
4
5
.sidebar{
    box-shadow: 0 2px 6px #dbdbdb;
    background: url("/img/0000/sidebar3.jpg");
    background-size:100% auto;
}

修改canvas-nest的颜色等

canvas-nest有几个配置项，可参考 官方文档。

我在文件夹中搜索带canvas-nest的项，发现next中并没有提供对其样式的修改的支持，canvas-nest只出现在canvas-nest.min.js和一个判断配置项中canvas-nest是否为真，为真则将对应js将入一个js插件列表中。

因此，我认为只能通过修改canvas-nest.min.js的默认值来达到修改目的。

其实，只要搜索便可以找到配置项在文件中对应的位置，比如c:o(v,"color","0,0,0")，此处0,0,0便是默认值，修改即可。

修改标签样式

文章布局修改

整体修改思路

在\themes\layout\_macro\post.swig中是文章的整体定义。利用Sublime将局部收起，我们可以很清晰地看到文章的整体架构，因此，在如果想在文章头部或者尾部增加一些元素，或者调整文章局部元素，都可以通过修改post.swig中的部分代码实现。

在文章尾部添加End

根据思路，可以看到post.swig中文章结束应该是在<div class="post-body.....</div>之后，后面是微信打赏部分'wechat-subscriber.swig'，在两者中间添加自己定义的样式的结束标志即可~

例如：

1
2
3
<div style="text-align:center;color:#73a2c0;font-size:25px;padding-top:40px;font-family:'YeahPapa';">
    ---------------- ♥ The End ♥ ----------------
</div>

熟悉html和css的同学可以自己定义字体，颜色，大小啦 ~ 也可以自己试着定义canvas动画。

修改文章的样式

我的文章样式修改很简单啦，只是将内容背景改成了半透明，加了周围的阴影w。

对custom.style的添加：

1
2
3
4
.content-wrap {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 6px #dbdbdb;
}

其他

首页只显示文章的部分

修改主题目录下的_config.yml

1
2
3
4
5
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
  enable: true
  length: 150

让谷歌和百度搜索到自己在GitHub上的博客

如何让谷歌和百度搜索到自己在GitHub上的博客

未完待续

---------------- ♥ The End ♥ ----------------