Hexo + Coding 折腾记录

Author Avatar
Tr0y 5月 27, 2017 23:31:51 本文共 3k 字
  • 文为知己者书
  • 在其它设备中阅读本文章

本来在 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, 改为如下
      url: http://www.(用户名).coding.me/
      root: /(项目名)
      ...
      deploy:
       type: git
       repo: (打开 Coding, 在项目的页面中, 右上角有 Https, 把它后面的网址填在这)
      
      • 在线测试
      • 还是在博客目录下, 输入
      • hexo clean
      • hexo g -d
        会弹出账号密码框, 输入即可
      • 访问 http://(用户名).coding.me/(项目名) 测试一下看看成功没

配置 Hexo

  • 在博客根目录的 _config.yml 中, 可以对主页进行配置
# 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, 改为如下:
    url: http://www.域名
    root: /
    
  • 访问自己的域名试试成功没

安装主题

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

主题改进

修复 Md 的代码多出空行

  • 解决方法, 将 ..\themes\yelee\source\css\_partial\highlight.styl 中的内容替换为
    @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, 如下
<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, 找到如下代码
      result.push(
      '<a href="' + self.url_for(tag.path) + '" style="' + style + '">' +
      (transform ? transform(tag.name) : tag.name) +
      '</a>'
      );
    
    改为
       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, 写入

    .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){ %>, 在它上面插入

    <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 中, 插入代码
    <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, 所以调用的是

    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){ %>, 在它上面插入

    <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. 内容参考如下

<!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 修改.
  • 如果有问题或者建议, 欢迎在留言板中交流~

End

What do you think?

本文标题: Hexo + Coding 折腾记录
原始链接: http://www.tr0y.wang/2017/05/27/Hexo_Coding/
发布时间: 2017.05.27-23:31
最后更新: 2018.11.03-20:44
版权声明: 本站文章均采用CC BY-NC-SA 4.0协议进行许可。转载请注明出处!