hexo折腾笔记

前言

好久不更新博客（金鱼脑子）导致hexo的配置操作遗忘了很多，所以写一篇笔记记录一下折腾的配置与过程。

Here we go

安装环境

node.js
git
hexo

node.js与git官网下载即可，hexo安装只需要使用命令行安装。

1	npm install -g hexo-cli

如果在命令行中输入 hexo 出现版本信息则表明安装成功

本地搭建hexo

新建一个搭建博客使用的文件夹
使用git bash，进入博客目录，运行 hexo init 初始化hexo
npm isntall 配置依赖包
运行hexo s ,如显示在localhost:4000运行着表明博客搭建成功

关联github

创建名为 githubID.github.io 的仓库

在本地的博客配置文件_config.yml中设置

deploy:
    type: git 
    repo: https://github.com/githubID/githubID.github.io.git
    branch: master

生成静态文件 hexo g
部署博客 hexo d
访问 githubID.github.io

更新博客

1.添加文章

命令行输入 hexo new [layout] <title> 新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

front-matter 设置

layout	布局
title	标题
date	建立时间
update	更新时间
comments	开启文章评论功能
tags	标签
categories	分类
password	密码

2.插入图片

由于觉得使用七牛云过于繁琐，干脆直接将图片存在github上，直接在文章中引用。

在hexo配置文件_config.yml中，将post_asset_folder的值设为true，在使用hexo new创建文章时会创建一个与文章名相同的文件夹，用于存放文章中引用的素材，需要引用的图片可以放在该文件夹中。
引用格式与Markdown格式不同。

1	{% asset_img slug [title] %}

3.设置文章模板

在博客根目录下的/scaffolds/post.md文件中保存的是post文章的模板样式，修改其中的front-matter即可在每次生成新文章时生成front-matter.

title: {{ title }}
date: {{ date }}
tags:
categories:
password: 
comments: true
update: 
copyright: true //是否开启底部版权提示

个性化设置

1.主题

这里以本博客使用的主题为例，使用的是next主题，项目地址为 next
在博客根目录下执行git clone https://github.com/iissnan/hexo-theme-next themes/next然后在博客配置文件中找到theme，将其值更改为theme: next，重新生成静态页面即可

2.文章访问密码

在主题目录下的layout/_partials/head.swig文件中meta标签后面插入一段js代码

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script> //

在文章的front-matter中的password标签后设置密码

3.文章底部的版权信息

1.在主题根目录下的layout/_macro/下添加 my-copyright.swig文件：

{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '复制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}

2.在主题根目录下/source/css/_common/components/post/下添加my-post-copyright.styl：

.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

3.修改主题根目录下的/layout/_macro/post.swig，在wechat的代码前

{% if theme.wechat_subscriber.enabled and not is_index %}
  <div>
    {% include 'wechat-subscriber.swig' %}
  </div>
{% endif %}

添加如下代码

{% if not is_index %}
  <div>  
    {% include 'my-copyright.swig' %}
  </div>
{% endif %}

4.修改主题根目录下的source/css/_common/components/post/post.styl文件中加入上面主题文件的应用

1	@import "my-post-copyright";

5.将文章中的copyright设为true

前言