Hexo Next博客优化

发表于   |   分类于   |     |   浏览 次

进一步打造自己的Blog。

一、搜索服务

安装 hexo-generator-searchdb

在站点的根目录下执行以下命令：

1
$ npm install hexo-generator-searchdb --save

编辑主题配置文件_config.yml，新增以下内容到任意位置：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

二、开启打赏功能

主题的_config.yml:

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /img/archives/ss.png
alipay: /img/archives/ss.png

三、字体

全局字体：编辑 next/source/css/_variables/custom.styl,

1
$font-size-base = 16px;

四、背景图片

next/source/css/_custom/custom.styl文件:

1
body { background:url(/images/backGround.jpg);}

五、背景颜色

定义颜色变量：themes/next/source/css/_variables/custom.styl

1
2
3
4
// 背景颜色
$body-bg-color = #f5f5d5;
$header-bg-color = #f5f5d5;
$footer-bg-color = #f5f5d5;

定义完后，其实body的背景已经换了。

头部背景色：

themes/next/source/css/_schemes/Mist/sidebar/_header.styl：

1
.header { background: $header-bg-color; }

footer背景色：

1
2
3
4
5
6
.footer {
  margin-top: 80px;
  padding: 10px 0;
  background: $footer-bg-color;
  color: $grey-dim;
}

六、代码风格

主题_config.yml:

1
highlight_theme: night blue

七、内容宽度

themes/next/source/css/_variables/custom.styl

1
2
3
4
// 修改成你期望的宽度
$content-desktop = 900px
// 当视窗超过 1600px 后的宽度
$content-desktop-large = 1100px

八、文章目录序号关闭

主题_config.yml:

1
2
3
4
5
6
#Table Of Contents in the Sidebar
toc:
  enable: true
  # Automatically add list number to toc.
  number: false

九、无序列表

不喜欢空心的，我们换成实心的列表：

文章列表：
source/css/_common/components/post/post-expand.styl:

1
ul li { list-style: disc; }

页面列表：
next/source/css/_custom/custom.styl:

1
2
3
ul {
list-style-type: disc;  // 空心圆，实心圆为 disc
}

参考：https://github.com/iissnan/hexo-theme-next/issues/559

十、文章访问次数

主题_config.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>访问人数
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>浏览
  page_pv_footer: 次

十一、表格样式

这个背景色下面表格边界不太明显，我们修改为：

next/source/css/_variables/base.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
// Table
// --------------------------------------------------
$table-width                    = 100%
$table-border-color             = $grey-dark
$table-font-size                = 14px
$table-content-alignment        = left
$table-content-vertical         = middle
$table-th-font-weight           = 700
$table-cell-padding             = 8px
$table-cell-border-right-color  = $grey-dark
$table-cell-border-bottom-color = $grey-dark
$table-row-odd-bg-color         = #f9f9f9
$table-row-hover-bg-color       = $whitesmoke

十二、修改文章内链接文本样式

将链接文本设置为蓝色，鼠标划过时文字颜色加深，并显示下划线。
修改文件themes\next\source\css_common\components\post\post.styl，添加如下css样式：

1
2
3
4
5
6
7
8
9
.post-body a{
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

选择.post-body是为了不影响标题，选择p是为了不影响首页“阅读全文”的显示样式。

十三、修改Pages链接文本样式

修改文件themes\next\source\css_common\components\post\post-expand.styl，添加如下css样式，：

1
2
3
4
5
6
7
8
9
.posts-expand a{
  color: #0593d3;
  border-bottom: none;
  &:hover {
    color: #0477ab;
    text-decoration: underline;
  }
}

坚持原创技术分享，您的支持将鼓励我继续创作！