Hexo + Coding 折腾记录

本文最后更新于:4 年前

本来在 CSDN 上写博客做记录, 后来想想还是自己搭建博客比较爽, 所以就有了这几天的折腾.

说在前面

  • 花费时间: 1 天.
  • 系统: Win10x64.
  • 文本编辑器: sublime text3.
  • 托管: Coding.
  • 准备好耐心: 当你遇到困难, 别放弃, 仔细看文档或资料, 或者到留言板和我交流.

那我们开始吧

配置 Coding

  • Coding 官网 注册并登录.
  • 创建新项目
  • 在”基础选项”中, 把 “私有”换为 “公开”.
  • 项目名称和简介随意.
  • 勾选 “使用 README.md 初始化项目”.
  • 点击创建即可
  • Page 服务 中, 部署来源选用 master 分支, 并开启 强制 HTTPS 访问
  • 自定义域名后面再说, 这里先不管.

环境安装 (node + git)

安装 Hexo

  • 打开 git-bash,进入到一个合适的存放 hexo 博客的目录.
  • 输入 npm install -g hexo-cli
  • 这样 Hexo 就安装好了.
  • 初始化 Hexo(在博客目录下输入)
    • hexo init
    • npm install
    • 安装插件 npm install hexo-deployer-git --save
  • 本地测试
  • 配置文件
    • 我们需要到博客根目录的 _config.yml 中, 找到 deploy, urlroot, 改为如下
      1
      2
      3
      4
      5
      6
      url: http://www.(用户名).coding.me/
      root: /(项目名)
      ...
      deploy:
      type: git
      repo: (打开 Coding, 在项目的页面中, 右上角有 Https, 把它后面的网址填在这)
  • 在线测试
    • 还是在博客目录下, 输入
    • hexo clean
    • hexo g -d
      会弹出账号密码框, 输入即可
    • 访问 http://(用户名).coding.me/(项目名) 测试一下看看成功没

配置 Hexo

  • 在博客根目录的 _config.yml 中, 可以对主页进行配置
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
63
64
65
66
67
68
69
70
71
72
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: #标题
subtitle: #副标题
description: #站点描述,给搜索引擎看的
author: #作者
language: zh-Hans #语言
timezone: #时区

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: Tr0y.coding.me/Troy.wang
root: /
permalink: :year/:month/:day/:title/ #文章的链接格式
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: 主题

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: 刚才的地址
  • 特别提醒, 在每个参数的 : 后都要加一个空格
  • 到这里, Hexo 的基本搭建工作就做完了

自定义域名

  • 如果有注册域名的话, 可以绑定, 没有的话可以跳过
  • Coding 得先升级到银牌会员
  • 在 Pages 服务中, 输入域名进行绑定
  • 在域名解析中, 增加解析(参考 coding 给出的教程)
  • 修改博客根目录的 _config.yml, 找到 urlroot, 改为如下:
    1
    2
    url: http://www.域名
    root: /
  • 访问自己的域名试试成功没

安装主题

  • 作者已经写得非常详细了 Yelee 主题使用说明
  • 注意
    • 站内搜索, 用 Hexo serve 可以, 而用 Apache 不行, 原因未知. 已解决, 见博客日志
    • 注意站点小图标的路径

主题改进

修复 Md 的代码多出空行

  • 解决方法, 将 ..\themes\yelee\source\css\_partial\highlight.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
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    @require "customise/code-block"
    $code-block
    background: highlight-background
    margin: auto
    padding: .35em 1.5em
    border-style: solid
    border-color: color-border
    border-width: 1px
    overflow: auto
    color: highlight-foreground
    line-height: 1.3rem
    $line-numbers
    color: lightgray
    font-size: .85rem
    .article-entry
    pre, code
    font-family: font-mono, monospace, font-chs
    font-size: 1em
    .line:after
    content: ''
    display: inline-block;
    pre
    @extend $code-block
    code
    text-shadow none
    padding 0
    background none
    color highlight-foreground
    box-shadow none
    .highlight
    @extend $code-block
    border-radius: 2px
    //max-height: 50em
    margin-top: .5em
    margin-bottom: 1em
    overflow: auto
    box-shadow: 1px 1px 1px rgba(0,0,0, .05)
    pre
    background: none
    border: none
    margin: 0
    padding: 0
    table
    margin: 0
    width: auto
    td
    border: none
    padding: 0
    figcaption
    clearfix()
    font-size: 0.85em
    color: highlight-comment
    line-height: 1em
    margin-bottom: 1em
    a
    float: right
    .gutter pre
    @extend $line-numbers
    text-align: right
    padding-right: 1em
    .line
    line-height 1.3rem
    .gist
    margin: 0 article-padding * -1
    border-style: solid
    border-color: color-border
    border-width: 1px 0
    background: highlight-background
    padding: 15px article-padding 15px 0
    .gist-file
    border: none
    font-family: font-mono monospace
    margin: 0
    .gist-data
    background: none
    border: none
    .line-numbers
    @extend $line-numbers
    background: none
    border: none
    padding: 0 20px 0 0
    .line-data
    padding: 0 !important
    .highlight
    margin: 0
    padding: 0
    border: none
    .gist-meta
    background: highlight-background
    color: highlight-comment
    font: 0.85em font-sans
    text-shadow: 0 0
    padding: 0
    margin-top: 1em
    margin-left: article-padding
    a
    color: color-link
    font-weight: normal
    &:hover
    text-decoration: underline
    @require "customise/inline-code.styl"
    pre
    .comment
    .title
    color: highlight-comment
    .variable
    .attribute
    .tag
    .regexp
    .ruby .constant
    .xml .tag .title
    .xml .pi
    .xml .doctype
    .html .doctype
    .css .id
    .css .class
    .css .pseudo
    color: highlight-red
    .number
    .preprocessor
    .built_in
    .literal
    .params
    .constant
    color: highlight-orange
    .class
    .ruby .class .title
    .css .rules .attribute
    color: highlight-green
    .string
    .value
    .inheritance
    .header
    .ruby .symbol
    .xml .cdata
    color: highlight-green
    .css .hexcolor
    color: highlight-aqua
    .function
    .python .decorator
    .python .title
    .ruby .function .title
    .ruby .title .keyword
    .perl .sub
    .javascript .title
    .coffeescript .title
    color: highlight-blue
    .keyword
    .javascript .function
    color: highlight-purple

标签球

  • 官网在这: TagCanvas. 我用的是tagcanvas.js 代码
  • 下载上述 tagcanvas.js, 放到 ..\themes\yelee\source\js 里, 修改主题布局文件 ../layout/_partial/tag-cloud-page.ejs, 如下
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<br>
<%- list_categories() %>
<script src="/js/tagcanvas.js" type="text/javascript"></script>
<div class="tags" id="myTags">
<canvas width="350" height="350" id="my3DTags">
<p>Anything in here will be replaced on browsers that support the canvas element</p>
</canvas>
</div>
<div class="tags" id="tags">
<ul>
<%- tagcloud({
min_font: 16,
max_font: 35,
amount: 999,
color: true,
start_color: 'blue',
end_color: 'red',
}) %>
</ul>
</div>
<style type="text/css">
.category-list li, .tags li{
display: none;
font-size: 1.2em;
margin-right: 1em;
line-height: 60px;
border: 1px solid lightgray;
padding: 6px;
}
.category-list a {
color: gray;
}
.category-list:hover a {
color: gray;
text-decoration: none;
font-weight: bold;
}
.category-list-count {
margin-left: 2px;
font-size: .9em;
}
.article-entry ul li:before{
display: none;
}
.article-inner {
text-align: center;
}
.article-meta {
display: none;
}
.article-header {
padding-right: 35px;
}
#container .article .article-title {
padding-right: 0;
}
.tags {
max-width: 40em;
margin: 2em auto;
margin-top: 0em;
}
.tags a {
margin-right: 1em;
line-height: 65px;
border-bottom: 1px solid gray;
}
.tags a:hover {
font-weight: bold;
text-decoration: none;
}
.category-list-child {
display: none;
}
</style>
<script type="text/javascript">
document.getElementById("tags").display='inline';
window.onload = function() {
try {
TagCanvas.Start('my3DTags','tags',{
textFont: 'Georgia,Optima',
textColour: null,
outlineColour: '#ff00ff',
weight: true,
reverse: true,
depth: 0.8,
maxSpeed: 0.05,
bgRadius: 1,
freezeDecel: true
});
} catch(e) {
// something went wrong, hide the canvas container
document.getElementById('myTags').style.display = 'none';
}
};
</script>
  • TagCanvas.Start('my3DTags','tags',{ 这里可以修改标签球的参数, 具体参数见TagCanvas Options.
  • 到博客根目录下, 找到 ../node_modules/hexo/lib/plugins/helper, 修改 tagcloud.js, 找到如下代码
    1
    2
    3
    4
    5
    result.push(
    '<a href="' + self.url_for(tag.path) + '" style="' + style + '">' +
    (transform ? transform(tag.name) : tag.name) +
    '</a>'
    );
    改为
    1
    2
    3
    4
    5
     result.push(
    '<li><a href="' + self.url_for(tag.path) + '" style="' + style + '">' +
    (transform ? transform(tag.name) : tag.name) +
    '</a></li>'
    );
    Ok

打赏功能

  • 支付宝与微信二维码, 放在 ..\themes\yelee\source\img 下.

  • 点赞特效图片在 百度云盘 密码: undj. 也放在 ..\themes\yelee\source\img 下.

  • ..\themes\yelee\source\css\style.styl 中插入 @import "_partial/button"

  • \themes\yelee\source\css\_partial 下新建一个 button.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
    .heart{
    background:url(../img/web_heart_animation.png);
    background-position:left;
    background-repeat:no-repeat;
    height:90px;
    width:90px;
    cursor:pointer;
    border:none;
    outline:none;
    background-size:2900%;
    }
    .heart:hover, .heart:focus{
    background-position:right;
    }
    @-webkit-keyframes heartBlast {
    0% {
    background-position:left;
    }
    100% {
    background-position:right;
    }
    }
    .heartAnimation {
    display:inline-block;
    -webkit-animation-name:heartBlast;
    animation-name:heartBlast;
    -webkit-animation-duration:.8s;
    animation-duration:.8s;
    -webkit-animation-iteration-count:1;
    animation-iteration-count:1;
    -webkit-animation-timing-function:steps(28);
    animation-timing-function:steps(28);
    background-position:right;
    }
  • ..\themes\yelee\layout\_partial\post\nav.ejs 中找到 <% if (post.prev || post.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
    <br>
    <div>文为知己者书</div>
    <div align="center"><button class="heart" rel= "like" id="rewardButton" disable="enable" onclick='var qr=document.getElementById("QR");"none"===qr.style.display?qr.style.display="block":qr.style.display="none"'></button></div>
    <div id="QR" style="display: none;">
    <div id="wechat" style="display:inline-block">
    <img id="wechat_qr" src="<%- theme.root_url %>/img/wechat.png" alt="WeChat Pay" width="100px" height="100px">
    <p>微信打赏</p>
    </div>
    <div id="alipay" style="display:inline-block">
    <img id="alipay_qr" src="<%- theme.root_url %>/img/alipay.png" alt="Alipay" width="100px" height="100px">
    <p>支付宝打赏</p>
    </div>
    </div>
    </div>
    <script type="text/javascript">
    $(document).ready(function(){
    $('body').on("click",'.heart',function(){
    $(this).css("background-position","")
    var D=$(this).attr("rel");
    if(D === 'like') {
    $(this).addClass("heartAnimation").attr("rel","unlike");
    }
    else{
    $(this).removeClass("heartAnimation").attr("rel","like");
    $(this).css("background-position","left");
    }
    });
    });
    </script>
  • ..\themes\yelee\layout\_partial\head.ejs 中, 插入代码

    1
    2
    3
    <style>
    div {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
    </style>

    Ok


字数统计

  • 在博客根目录下, 输入命令 npm i --save hexo-wordcount 安装 wordcount.

  • node_modules\hexo-wordcount\README.md 中可以看到具体代码调用 wordcount 的语句, 由于 Yelee 使用的是 .ejs, 所以调用的是

    1
    2
    3
    4
    5
    6
    Post Count:
    <span class="post-count"><%= wordcount(post.content) %></span>
    Post Minutes to Read:
    <span class="post-count"><%= min2read(post.content) %></span>
    Total Count:
    <span class="post-count"><%= totalcount(site) %></span>

    这三个

  • 具体改法: 在 ..\themes\yelee\layout\_partial\post\nav.ejs 中找到 <% if (post.prev || post.next){ %>, 在它上面插入

    1
    2
    3
    4
    5
    6
    7
    <div style="padding:10px 0;margin:20px auto;width:90%;text-align:center">
    <div class="post-wordcount">
    <span class="post-meta-item-icon">
    <i class="fa fa-edit"></i>
    </span>
    <span class="post-count">共 <%= wordcount(post.content) %> 字</span>
    </div>

    或者在适当的地方插入
    全站字数统计用法一样, 就不说了.


CNZZ 访问统计

  • 注册, 登录,获得代码, 插入到 ..\themes\yelee\layout\_partial\footer.ejs 即可.
  • 要是觉得丑, 可以加入 style="display: none;" 不会显示, 但是能统计.

留言板

  • 我用的是来必力, 注册, 登录, 获取代码.
  • 输入 hexo new page comments, 会自动在 ..\source` 中新建文件夹.
  • 在主题的 _config.yml 中, 增加一条 menu: 下的记录 留言板: /comments/
  • 进入 comments 文件夹, 里面的 index.md 删除, 新建 index.html. 内容参考如下
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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<style type="text/css">

.title{
color: #696969;
text-align:center;
font-size : 1.7em;
border-top:thick double #FFFFFF;
border-top-width:30px;
}

</style>

<div class='title'>留言</div>
<br>

<div id="lv-container" data-id="city" data-uid="(这里填你自己的 ID)">

<script type="text/javascript">
(function(d, s) {
var j, e = d.getElementsByTagName(s)[0];

if (typeof LivereTower === 'function') { return; }

j = d.createElement(s);
j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
j.async = true;

e.parentNode.insertBefore(j, e);
})(document, 'script');
</script>


</div>
</body
</html>
  • Ok

博客关键字

  • head.ejs 插入 <meta name="keywords" content="<%= config.keywords %>">
  • 在 Hexo 的 _config.yml 中, timezone: 下一行加上 keywords: 即可. 要关键字直接在这写, 逗号隔开

碎语

  • 标签球未适配手机, 在移动端标签会运动到屏幕外
  • 打赏的爱心特效在手机端点击有时候会有黑框闪过
  • 使用 Firefox 浏览时, 滚动条没有美化. 360 急速模式与移动端均有美化.
  • 鸟屋下面的文字位置在 ..\themes\yelee\source\css\_partial\main.styl 中第 155 行 max-height 修改.
  • 鸟屋下面的图标位置在 ..\themes\yelee\source\css\_partial\customise\social-icon 中第 2 行 margin-top 修改.
  • 如果有问题或者建议, 欢迎在留言板中交流~

    来呀快活呀


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!