来做个自己的hexo博客吧(2)

发表于 | 分类于 | 热度 ℃
| 共计 1,018 字 | 阅读时长≈ 5分钟

github decoration

  1. GitHub Ribbons
  2. http://tholman.com/github-corners/

挑选一个喜欢的样式，然后把对应的代码复制下来

打开文件：themes/next/layout/_layout.swig,搜索<div class="headband"></div>。然后把你刚刚复制的代码，粘贴到此处下面，并修改href为你的github的对应地址

头像变成圆形，鼠标停放在上面时可以旋转

找到文件themes/next/source/css/_common/components/sidebar/sidebar-author.styl，在其中加入下面注释中间的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.site-author-image {
  display: block;
  margin: 0 auto;
  max-width: 96px;
  height: auto;
  border: 2px solid #333;
  padding: 2px;
  /* start*/
  border-radius: 50%
  webkit-transition: 1.4s all;
  moz-transition: 1.4s all;
  ms-transition: 1.4s all;
  transition: 1.4s all;
  /* end */
}
/* start */
.site-author-image:hover {
  background-color: #55DAE1;
  webkit-transform: rotate(360deg) scale(1.1);
  moz-transform: rotate(360deg) scale(1.1);
  ms-transform: rotate(360deg) scale(1.1);
  transform: rotate(360deg) scale(1.1);
}
/* end */

给文章添加阴影效果

打开文件themes/next/source/css/_custom/custom.styl，输入以下代码，保存后退出。

1
2
3
4
5
6
7
8
// 主页文章 添加阴影效果
.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

在文章中插入图片

在站点配置文件中将post_asset_folder改为true，重新generate，然后通过命令hexo new “title” 生成新的文章，同时也会自动生成文件夹/source/_post/title，在文件夹中放入图片，然后在md文档中需要插入图片的地方输入

1
{% asset_img pic_name pic_description %}

阅读全文

在md文档中插入<!-- more -->即可

搜索功能

在站点配置文件中添加

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

在主题配置文件中找到local_search，将enable改为true即可

不蒜子总访客量与总访问量统计，LeanCloud文章热度

然后在主题配置文件中找到busuanzi_count，将enable改为true ，为了避免与文章热度重合，将page_pv 改为false ，然后需要配置leancloud，步骤如下：

  1. 进入LeanCloud官网 进行注册
  2. 选择创建应用(开发版)->创建Class(限制写入)
  3. 点击左侧设置->点击应用Key
  4. 在主题配置文件中找到leancloud_visitors，填入并修改对应值

至此，文章中已经可以显示文章阅读次数了，同时页面底部会有总访客量和总访问量。

修改阅读次数的icon和文字的方法是：

  1. 找到themes/next/languages下对应的语言文件，找到post下的visitors，修改为热度。
  2. 找到themes/next/layout/_macro/post.swig，修改部分如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{# LeanCould PageView #}
{% if theme.leancloud_visitors.enable %}
<span id="{{ url_for(post.path) }}" class="leancloud_visitors" data-flag-title="{{ post.title }}">
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-thermometer"></i>
</span>
{% if theme.post_meta.item_text %}
<span class="post-meta-item-text">{{__('post.visitors')}} </span>
{% endif %}
<span class="leancloud-visitors-count"></span>
<span>℃</span>
</span>
{% endif %}

统计文章字数，阅读时长

在gitbash中输入

1
npm i --save hexo-wordcount

修改主题配置文件，将post_wordcount下的值都改为true

添加公式

在主题配置文件中找到mathjax，将enable改为true，然后在每篇文档的开头添加mathjax: true，修改完后可以通过一个美元符号包围文字，在行内添加公式，例如$a=\sum_{i=0}^{100}i$，也可以通过两个美元符号包围文字形成行间的公式，如：

mathjax在某些情况下可能会出现公式渲染的问题，可以通过以下步骤解决：

在根目录下输入命令

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

然后修改根目录下文件node_modules\kramed\lib\rules\inline.js，修改代码

1
2
3
4
5
6
//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/
...
...
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

最后执行hexo clean、hexo g -d重新生成博客

文章模板

修改/scaffolds/post.md文件，便于每次创建文章时使用

1
2
3
4
5
6
7
8
9
10
title: {{ title }}
date: {{ date }}
top:
tags:
categories:
description:
copyright: true
comments: true
mathjax: true
<!-- more -->
0%