hexo使用问题积累

Github+hexo

第一次接触Github Pages 采用的是jekyll, 用的时候感觉定制化太高不适合我这个新手,后来发现了hexo,感觉确实好用,简单粗暴,上来就用,而且一个简单的框架,可以集成各种有用的插件,用起来极其舒爽。

好工具也要不断的学习才能用起来顺手,这里记录下问题及解决方法。

hexo的安装

hexo说明

hexo目录说明

使用hexo之前让我们先了解下hexo的文件结构,方便以后进一步的挖掘。

1
2
3
4
5
6
7
8
9
10
11
.
├── .deploy_git : 执行hexo deploy命令部署到GitHub上的内容目录
├── public : 执行hexo generate命令,输出的静态网页内容目录
├── scaffolds : layout模板文件目录,其中的md文件可以添加编辑
├── scripts : 扩展脚本目录,这里可以自定义一些javascript脚本
├── source :文章源码目录
| ├── _drafts : 草稿文章
| └── _posts : 发布文章
├── themes : 主题文件目录
├── _config.yml : 全局配置文件,大多数的设置都在这里
└── package.json : 应用程序数据,指明hexo的版本等信息,类似于一般软件中的关于按钮

其中source目录下的markdown和html文件均会被hexo处理。该页面对应仓库的根目录,404文件/favicon.ico文件/CNAME文件等都应该放这里,该目录下可新建页面目录。

themes目录说明

以next主题为例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
├── .github : 主题仓库信息
├── languages : 语言目录
| ├── default.yml : 默认语言
| └── zh-Hans.yml : 简体中文
| └── zh-tw.yml : 繁体中文
├── layout : 布局,根目录下的*.ejs文件是对主页,分页,存档等的控制
| ├── _custom : 可以自己修改的模板,覆盖原有模板
| | ├── _header.swig : 头部样式
| | ├── _sidebar.swig : 侧边栏样式
| ├── _macro : 可以自己修改的模板,覆盖原有模板
| | ├── post.swig : 文章模板
| | ├── reward.swig : 打赏模板
| | ├── sidebar.swig : 侧边栏模板
| ├── _partial : 局部的布局
| | ├── head : 头部模板
| | ├── search : 搜索模板
| | ├── share : 分享模板
| ├── _script : 局部的布局
| ├── _third-party : 第三方模板
| ├── _layout.swig : 主页面模板
| ├── index.swig : 主页面模板
| ├── page : 页面模板
| └── tag.swig : tag模板
├── scripts : script源码
| ├── tags : tags的script源码
| ├── marge.js : 页面模板
├── source : 源码
| ├── css : css源码
| | ├── _common : *.styl基础css
| | ├── _custom : *.styl局部css
| | └── _mixins : mixins的css
| ├── fonts : 字体
| ├── images : 图片
| ├── uploads : 添加的文件
| └── js : javascript源代码
├── _config.yml : 主题配置文件
└── README.md : Github README

next使用说明

导航栏创建新的标签

变量+内容位置

1
2
3
menu:
#变量名: /目录位置
books: /books

加入字体图标

1
2
3
menu_icons:
#变量名: 字体图标名称
books: book

具体图标名称可以从这里查找:字体图标

更改标签变量的显示名

修改theme/languages/zh-Hans.yml文件,加入新的变量显示名

1
2
3
menu:
#变量名: 显示名
books: 我的书籍

创建标签页面显示的内容

到hexo根目录下的source目录中创建与目录位置对应的目录,并在其中添加md文件即可。

注意

  1. 变量名最好全是小写,大写好像有问题。

hexo使用细节

hexo server自动刷新网页

用gitbook时体验了一下自动刷新网页,感觉很好用,这里感觉也需要。

hexo-browsersync插件可以完成这个任务。

插件地址:Github地址npm地址

安装:

1
npm install hexo-browsersync --save

安装遇到ECONNRESET问题

1
2
3
4
5
6
npm ERR! Linux 4.4.0-74-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "install" "hexo-browsersync" "--save"
npm ERR! node v4.2.6
npm ERR! npm v3.5.2
npm ERR! code ECONNRESET
...

解决方法

1
npm config set registry http://registry.npmjs.org/

类似博客需要整合

1. Markdown使用问题及解决办法
2. 本网站建设中所遇到到的问题及解决方法

HEXO中的变量

链接

NEXT主题美化

鼠标点击小红心的设置

love.js文件添加到/themes/next/source/js/src文件目录下。
找到/themes/next/layout/_layout.swing文件,在文件的后面,标签之前添加以下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

修改文章内链接文本样式

将链接文本设置为蓝色,鼠标划过时文字颜色加深,并显示下划线。
找到文件themes/next/source/css/_custom/custom.styl,添加如下css样式:

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

设置圆形动态头像

修改source/css/_common/components/sidebar/sidebar-author.styl文件中的.site-author-image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
-webkit-animation: play 2s ease-out 1s 1;
-moz-animation: play 2s ease-out 1s 1;
animation: play 2s ease-out 1s 1;
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.5s ease-out;
-moz-transition: -moz-transform 1.5s ease-out;
transition: transform 1.5s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

首页文章分隔优化

采用框分隔每篇文章,修改source/css/_custom/custom.styl中的.post

1
2
3
4
5
6
7
.post {
margin-top: 0px;
margin-bottom: 20px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

去除分割线:修改source/css/_custom/custom.styl中的.posts-expand

1
2
3
4
5
6
7
8
9
10
11
.posts-expand {
margin: 0 auto;
.post-eof {
display: block;
margin: $post-eof-margin-top auto $post-eof-margin-bottom;
width: 100%;
height: 0px; // 分割线消失
background: $grey-light;
text-align: center;
}
}

调整阅读全文与框的距离,修改post-eof-margin-toppost-eof-margin-bottom两个变量。
在文件source/css/_variables/base.styl

1
2
$post-eof-margin-top = 20px // 80px // or 160px for more white space
$post-eof-margin-bottom = 20px // 60px // or 120px for less white space

加入版权信息[默认具有]

layout/_macro/post.swig的最后加入下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div>
{# 表示如果不在索引列表中加入后续的HTML代码 #}
{% if not is_index %}
<ul class="post-copyright">
<li class="post-copyright-author">
<strong>本文作者:</strong>{{ theme.author }}
</li>
<li class="post-copyright-link">
<strong>本文链接:</strong>
<a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.path }}</a>
</li>
<li class="post-copyright-license">
<strong>版权声明: </strong>
本博客所有文章除特别声明外,均采用 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0 CN</a> 许可协议。转载请注明出处!
</li>
</ul>
{% endif %}
</div>

source/css/_custom/custom.styl中添加.post-copyright以修改显示格式

1
2
3
4
5
6
7
.post-copyright {
margin: 2em 0 0;
padding: 0.5em 1em;
border-left: 3px solid #ff1700;
background-color: #f9f9f9;
list-style: none;
}

添加热度

这里的热度也就是网页的访问量,next主题已经集成了leancloud,可以注册下直接打开。

leancloud使用教程

这里将访问量修改为热度,并添加单位“°C”。

打开/themes/next/layout/_macro/post.swig,在<span class="leancloud-visitors-count"></span>后面添加一行代码:

1
<span>°C</span>

然后打开,/themes/next/languages/zh-Hans.yml,将visitors内容改为热度即可。

注意:这里必须是添加一行代码,将°C直接写在<span class="leancloud-visitors-count">标签后面不行
注意:在leancloud的安全设置里加入你的域名信息,调试时加入:http://localhost:4000

添加阅读榜单

上面已经根据leancloud统计的阅读次数,下面就可以对其进行排序,整理出一个榜单。

  1. 添加page页面:langyalist
  2. 在langyalist page目录的index.md中添加如下代码:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    <blockquote class="blockquote-center">琅琊榜首,江左梅郎</blockquote>
    <p id="contentTitle"><font size="0"></font></p>
    <script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.1.js"></script>
    <script>AV.initialize("0P36N5efKynTbojOFDqTrM4C-gzGzoHsz", "MQdwxUOADSsDq8G5ytXSORtN");</script>
    <script type="text/javascript">
    var num=30 // 最终只返回20条结果
    var time=0
    var title=""
    var url=""
    var query = new AV.Query('Counter'); // 表名
    query.notEqualTo('id',0); // id不为0的结果
    query.descending('time'); // 结果按阅读次数降序排序
    query.limit(num); // 最终只返回10条结果
    query.find().then(function (todo) {
    for (var i=0;i<num;i++){
    // console.log(todo[i]);
    var result=todo[i].attributes;
    time=result.time; // 阅读次数
    title=result.title; // 文章标题
    url=result.url; // 文章url
    // console.log(title);
    // console.log(url);
    // console.log(time);
    var content="<p>"+"<font color='#0477ab'>"+"【战力值:"+time+"】"+"<a href='"+"http://labrick.cc"+url+"'>"+title+"</font>"+"</a>"+"</p>";
    // document.write("<a href='"+"http://labrick.cc/"+url+"'>"+title+"</a>"+" Readtimes:"+time+"<br>");
    document.getElementById("contentTitle").innerHTML+=content
    }
    }, function (error) {
    console.log("error");
    });
    </script>

注意第三行的id="contentTile"构建了一个空标签,已备后面添加内容。

参考链接

hexo配置

添加搜索功能

安装 hexo-generator-searchdb,在站点的根目录下执行以下命令:

1
npm install hexo-generator-searchdb --save

编辑站点配置文件,新增以下内容到任意位置:

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

注意:去除主题中搜索开关。

给hexo添加后台

安装 hexo-admin-plugin,在站点的根目录下执行以下命令:

1
2
npm install hexo-admin --save
hexo server -d

打开http://localhost:4000/admin/即可看到后台界面。

从这里写/修改文章都比较方便,+上GITHUB无密码操作,可以和wordpress相媲美了!

GITHUB无密码操作

HTTPS路线

1
2
3
vim ~/.git-credentials
https://{username}:{password}@github.com
git config --global credential.helper store

SSH路线

公私钥处理!

Brick wechat
扫一扫,用手机看更方便(^ ◕ᴥ◕ ^)