搭建免费博客（下）

发表于 | 分类于 | 阅读次数:
字数统计: 1,682 字 | 阅读时长 ≈ 7 分钟

写在前面的话

很久之前一直想写博客，总是觉得博客页面的广告太多，页面风格不合自己心意，所以迟迟没有落实。偶然的机会看到hexo+github 搭建的静态博客，完全可以按照自己的想法定义，真的很开心。个人觉得静态博客虽然有许许多多的优点，但是也还是存在小缺点：更新相当于没有。像基础架构的底层架构的设计，起初的时候就要考虑特别完善，不然后面整改起来真的是要命，不可能三天两头的去变更它。所以博客的功能布局等，我在搭好的两天就尽可能的改成自己最终想要的样子，后面就是不断更新文章了。

  • _config.yml：全局配置文件，大多数的设置都在这里
  • node_modules: hexo安装插件模块的目录
  • package.json：应用程序数据，指明hexo的版本信息和依赖的模块及其版本
  • public：执行hexo generate命令，输出的静态网页内容目录。真正deploy到github的文件目录
  • scaffolds：layout模板文件目录，其中的md文件可以添加编辑
  • source：文章源码目录，目录下的markdown和html文件均会被hexo处理
  • themes：主题安装目录

版权信息的增加

修改全局配置文件

shanguanyunya.github.io/_config.yml

1
url: https://shanguanyunya.github.io

修改主题配置文件

shanguanyunya.github.io/themes/next/_config.yml
enable value 改为true

1
2
3
post_copyright:
 enable: true
 license: CC BY-NC-SA 3.0

访客信息统计

修改主题配置文件

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: false
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer

本地搜索

插件安装

1
npm install --save hexo-generator-search

修改主题配置文件

1
2
local_search:
  enable: true

字数统计和预计阅读时长

插件安装

1
npm install hexo-wordcount@2 --save

修改主题配置文件

1
2
3
4
5
6
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

增加单位（字、分钟）

修改文件themes\next\layout_macro\post.swig

1
2
3
4
5
6
7
 <span title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }} 字
   </span>
<span title="{{ __('post.min2read') }}">
  {{ min2read(post.content) }} 分钟
</span>

页底字数总统计由英文改成中文

修改文件themes\next\languages/zh-Hans.yml
注意我的主配置文件就是语言就是使用的zh-Hans

1
totalcount: 本站总字数统计

主页每篇博文显示阅读全文，而不是每篇都显示所有内容

修改主题配置文件

1
2
3
auto_excerpt:
enable: true
length: 150

社交信息

修改主题配置文件

1
2
3
4
5
6
social:
GitHub: https://github.com/shanguanyunya || github
E-Mail: mailto:zhaoqianzhang@yeah.net || envelope
social_icons:
enable: true

配套修改主题信息和侧边栏在右边一直显示

1
2
3
4
5
6
7
  sidebar:
  
  position: right
    display: always
	
# Scheme Settings
scheme: Pisces

友情链接

修改主题配置文件

1
2
3
4
5
6
 # Blog rolls
links_title: 友情链接
#links_layout: block
#links_layout: inline
links:
   我的新浪博客: http://blog.sina.com.cn/shangguanyunya/

博文文末自动加结束语

\themes\next\layout_macro 中新建 passage-end-tag.swig 文件

passage-end-tag.swig 文件内容

1
2
3
4
5
 <div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;heart:32px;">----纸上得来终觉浅<i class="fa fa-heart"></i>绝知此事要躬行----</div>
    {% endif %}
</div>

\themes\next\layout_macro\post.swig,END POST BODY后增加

1
2
3
4
5
6
7
8
    {#####################}
    {### END POST BODY ###}
    {#####################}
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

主题配置文件末尾增加

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

标签和分类

新建标签页面

hexo new page “tags” 把对应的shanguanyunya.github.io/source/tags/index.md

1
2
3
4
5
---
title: 标签
date: 2017-10-18 22:11:43
type: "tags"
---

新建分类页面

hexo new page “categories” 把对应的shanguanyunya.github.io/source/categories/index.md

1
2
3
4
5
6
---
---
title: 分类
date: 2017-10-18 19:08:14
type: "categories"
---

要发布的博文加具体标签字段和分类字段

建议一篇博客可以有多个标签，但是只属于一个分类

1
2
3
4
5
6
---
title: Hello World
tags: [测试]
categories: 
- 博客
---

页头进度条加载进度动画

修改主题配置文件

1
2
# Progress bar in the top during page loading.
pace: true

标签# 修改成图标

图标网址http://fontawesome.io/icons/

修改修改模板/themes/next/layout/_macro/post.swig

1
搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

右侧向上小箭头显示阅读百分比

修改主题配置文件

1
2
# Scroll percent label in b2t button.
scrollpercent: true

光标滑到作者头像转动

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
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
.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为循环播放) ]*/
 
  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s 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);
  }
}

修改文章内链接文本样式

修改文件 themes\next\source\css_common\components\post\post.styl

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

博文中图片发布

注册七牛云账号、上传图片、获取永久外链

每月1G 免费空间及流量
https://www.qiniu.com

###博文图片设置
其中80p表示图片缩放至原来80%大小

1
2
3
##文章图片测试
云南崇圣寺
![](http://oy2fglccv.bkt.clouddn.com/chunshengshi_ta.jpg?imageMogr2/thumbnail/!80p)

文章输入正确密码才能访问

修改themes->next->layout->_partials->head.swig文件

增加//add后面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
      {% set pace_css_uri = theme.vendors.pace_css %}
    {% endif %}
//add		
  <script src="{{ pace_js_uri }}"></script>
  <link href="{{ pace_css_uri }}" rel="stylesheet">
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

每篇博文文件中自定义访问密码index.md文件

1
2
password: xxxxxxx

常用命令及解释

1
2
3
4
5
6
7
8
hexo g == hexo generate  ==生成
hexo d == hexo deploy    ==发布
hexo s == hexo server    ==运行
hexo n == hexo new       ==新建
组合
hexo s -p 8080   本地运行测试并指定端口
hexo clean && hexo g && hexo d  清理后重新生成再发布
----纸上得来终觉浅绝知此事要躬行----
最好的赞赏是您的阅读！
0%