Hexo + Coding 折腾记录

本来在 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
  • 本地测试
    • 输入 hexo serve 启动博客
    • 打开浏览器输入 http://localhost:4000/ 即可访问.
  • 配置文件
    • 我们需要到博客根目录的 _config.yml 中, 找到 deploy, url 与 root, 改为如下
      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, 找到 url 与 root, 改为如下:
    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, 会自动在..` 中新建文件夹.
  • 在主题的 _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 修改.
  • 如果有问题或者建议, 欢迎在留言板中交流~

    来呀快活呀

过程记录
#Hexo
Hexo + Coding 折腾记录
https://www.tr0y.wang/2017/05/27/Hexo_Coding/
作者
Tr0y
发布于
2017年5月27日
更新于
2024年6月3日
许可协议