小占的技术日志

奋起直追

0%

hexo基于NexT主题订制自己的主题

Posted on Edited on In

前言

写了几天的博客之后发现，连我自己都没有兴趣查看自己的博客。

觉得只给予自己那浅薄的markdown语法，和NexT官方的默认配置。继续写作是不行了。

而自己没有一点前端的知识背景，最近时间也比较紧能解决目前的需求就行了，没有深究进去。

下面的一些配置和文章中的写法主要参照：打造个性超赞博客Hexo+NexT+GithubPages的超深度优化

上面一篇的配置及其详细，阅读起来时间成本比较高。下面总结出一些我认为我自己写博客的一些刚需，并给出相应的解决方案。

部署与使用见上一篇：hexo部署与使用入门

NexT 主题订制

默认的主题，存在下面一下我不喜欢的配置，

  1. 我使用Mist主题，其中首页中前十个网页是全量显示的其实我只想要显示简介就行了。
  2. 网页之间没有之前没有明显的边界线，区分度不大。
  3. 链接采用暗黑的风格，不明显。
  4. 首页只能按照date排序，我想要自定义一些排序。
  5. hexo new 产生自己需要的默认配置
  6. markdown在网页中子标题和文本的区别度不大。

解决方案：
问题2,3，6在 themes/next/source/css/_custom/custom.styl 中添加自己的配置。
配置如下：我自己的配置

问题1：

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

问题4：

1
2
3
# 卸载默认按照的插件，安装新的插件。
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

要排序文章只要在Front-matter 中 添加 top: num。
之后就可以按照num排序了。

问题5：
更改scaffolds/post.md 文件，如下 post.md

markdown 进阶

  1. 代办列表：

    1
    2
    - [ ] 不勾选
    - [x] 勾选

    显示如下：

    • 不勾选
    • 勾选

  2. 字体编辑：*， _， ~

    1
    2
    3
    斜体： *斜体*  _斜体_
    粗体： **粗体** __粗体__
    删除线：~~删除线~~

    显示如下：
    斜体： 斜体 斜体
    粗体： 粗体 粗体
    删除线：删除线

  3. 插入自定义大小和布局的图片：
    <div align="center"><img src="" width="" height=""></div>
    align 是怎么布局， height可以不加，给出width后根据原图自动计算。
    实例：

    图片和文字混排：

    1
    2
    3
    4
    5
    6
    7
    <img src="read.jpg" align="right">
    这是一个示例图片。
    图片显示在 N 段文字的右边。
    N 与图片高度有关。
    刷屏行。
    刷屏行。
    到这里应该不会受影响了，本行应该延伸到了图片的正下方，所以我要足够长才能确保不同的屏幕下都看到效果。

    显示如下：

    这是一个示例图片。 图片显示在 N 段文字的右边。 N 与图片高度有关。 刷屏行。 刷屏行。 到这里应该不会受影响了，本行应该延伸到了图片的正下方，所以我要足够长才能确保不同的屏幕下都看到效果。

有效的写作样式

主题自带样式 代码块高亮

先看效果：

文件位置：~/blog
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
-    log("Should not be called");
+    if (1 > 5) { // wtf!?
      return;
    }
  }
}
1
2
3
4
5
6
7
8
\`\`\` [language] [title] [url] [link-text]
代码
\`\`\`

* [language] 是代码语言的名称，用来设置代码块颜色高亮，非必须；
* [title] 是顶部左边的说明，非必须；
* [url] 是顶部右边的超链接地址，非必须；
* [link text] 如它的字面意思，超链接的名称，非必须。

在 ``` 后面可以添加diff，然后用-，+辨识代码的修改。

自定义自己的顶部文字样式：

文件位置：~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
10
11
// 文章```代码块顶部样式
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}

主题自带样式 文本居中引用

源码：

1
2
3
4
5
6
7
{% cq %}
人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！
{% endcq %}

效果：

人生乃是一面镜子，
从镜子里认识自己，
我要称之为头等大事，
也只是我们追求的目的！

更多 NexT 主题自带的标签样式，请点击：http://theme-next.iissnan.com/tag-plugins.html

主题自带样式 note标签

源码：

1
2
3
4
5
6
7
<div class="note default"><p>default</p></div>
<div class="note primary"><p>primary</p></div>
<div class="note success"><p>success</p></div>
<div class="note info"><p>info</p></div>
<div class="note warning"><p>warning</p></div>
<div class="note danger"><p>danger</p></div>
<div class="note danger no-icon"><p>danger no-icon</p></div>

效果：

default

  1. helloword
    2. this is a link : [link](http://theme-next.iissnan.com/tag-plugins.html) `hello` teset **hello**
  2. test
    3. I don't know what I want to say.

success

info

warning

danger

danger no-icon

增强显示效果，在config文件中配置：

文件位置：~/blog/themes/next/_config.yml
1
2
3
4
5
6
7
8
9
10
# Note tag (bs-callout).
note:
  # 风格
  style: flat
  # 要不要图标
  icons: true
  # 圆角矩形
  border_radius: 3
  light_bg_offset: 0

主题自带样式 label标签

源码：

1
2
3
4
5
6
{% label default@默认 %}
{% label primary@主要 颜色 %}
{% label success@成功%}
{% label info @ 消息%}
{%label warning@警告%}
{% label danger@danger %}

效果：

默认 主要 颜色 成功 消息 警告 danger

自定义样式 引用

在custom.styl中加入了

文件位置：~/blog/themes/next/source/css/_custom/custom.styl
1
2
3
4
5
6
7
8
9
// 自定义的引用样式
blockquote.question {
    color: #555;
    border-left: 4px solid rgb(16, 152, 173);
    background-color: rgb(227, 242, 253);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-bottom: 20px;
}

实现下面代码：

1
<blockquote class="question">内容</blockquote>

效果：

内容