在开始前先做一个简单科普，很多朋友在使用评论功能的时候可能留意到了 Valine 这个插件，它是一个很好用的评论插件，但是可能有一部分人并不知道这个插件实现评论的原理，其实它的评论存储服务是依赖于 LeanClound 的，这个 LeanClound 实际上是一个云服务器提供商，只不过它比较人道的是提供了一个开发版环境（虽然资源很小，云引擎只有 0.5CPU 256MB，但是数据库却是够用的），我们实际上是使用了它提供的数据存储服务，而且 LeanClound 为我们提供了一套 JavaScript SDK 来操作数据库，也就是我们要引入的一个 js 文件：
<script src="//cdn.jsdelivr.net/npm/leancloud-storage@3.15.0/dist/av-min.js"></script>
实际上 Valine 就是基于这套 api 来实现数据的插入和查询，然后展现到我们的博客，这样我们就很透彻的理解了它们之间的关系了，接下来进入我们今天的正题。
最近无意间留意到一个比较符合我口味的主题，也许是因为Next主题被我看腻了，于是就换了icarus然后接下来当然是各种折腾，总算是告一段落可以安心的做别的事情了。
主题地址：https://github.com/ppoffice/hexo-theme-icarus
这个主题可以完全替代Next主题，比较让我喜欢的是简洁大气的界面风格，另外还有细致的侧边栏以及订制功能，总结一下特点如下：
最近一段时间把我的博客重新美化了一番，今天就对这些工作做一个总结，并把方法归纳出来分享给大家，希望大家也能把自己的博客做成自己想要的样子，大概工作如下：
这些美化功能大部分只需要你花费半个小时左右就可以搞定了，我们马上开始吧！
最近因GitLab的国内访问速度问题将本站静态化到了七牛云存储，但是带来的问题也是很明显的。之前在GitLab使用Page来发布工程只需要提交代码即可，会自动静态化并部署项目，于是乎我就想让静态化并同步到七牛对象存储自动化一些，这也是这篇文章的初衷。
其实在用Python做自动同步之前，我使用的官方提供的一个Window上面的同步工具QSunSync,但是使用起来也不是很方便，最主要的原因是不太符合我整站同步的需求，而且速度极慢。
官网为我们提供了基础的对象存储操作SDK, 点击查看
安装Python SDK
pip install qiniu
整个同步过程如下：
最近抽空学习了一下前端的基础知识，在之前我也抽空看了相关知识，但是发现没有实践而且不够系统，所以索性这次借着hexo博客搭建来巩固和实践一下所学。
虽然我们是开发hexo的博客主题，但是为了方便我们开发中调试和预览，所以我们还是首先得安装hexo到我们本地目录。
hexo init 搭建hexo主题
注意，上面的“搭建hexo主题”是我本地的一个目录。
然后发布，http://localhost:4000 查看
cd 搭建hexo主题
hexo server
就在昨天，我的新域名备案成功并正式上线了，于是就想到了去七牛做一个图片图床来加速网站访问速度。
令人欣喜的是七牛有10GB的免费存储和20GB下载流量,而且还享有20元/月配额的音视频处理。
所以我果断从七牛和又拍云之间选择了七牛来做图床。
搜了一下关于七牛图床相关的文章，结果发现都不是自己想要的效果，我想要达到的效果有：
基于上面这些想法，我就有了一个基本思路，首先复制备份，然后通过qshell来实现批量上传和同步图片，接着批量替换文章中的<img src=” 字符串后面追加七牛存储的自定义域名。
以下是关于模板逻辑的语法。
用 - 开始一段不直接进行输出的代码。
- for (var x = 0; x < 3; x++)
li item
生成后
<li>item</li>
<li>item</li>
<li>item</li>
用=开始一段带有输出的代码，它应该是可以被求值的一个 JavaScript 表达式。为安全起见，它将被 HTML 转义。
p
= '这个代码被 <转义> 了！'
p= '这个代码被 <转义> 了！'
生成后
<p>这个代码被 <转义> 了！
</p>
<p>这个代码被 <转义> 了！</p>
用 != 开始一段不转义的，带有输出的代码。这将不会做任何转义，所以用于执行用户的输入将会不安全。
p
!= '这段文字<strong>没有</strong>被转义！'
p!= '这段文字' + '<strong>没有</strong>被转义!'
生成后
```xml
这段文字没有被转义！
这段文字没有被转义！
sudo npm install pug
但命令行提示 pug 命令未找到，接下来安装 pug-cli,注意一定要全局安装，否则无法正常编译。
sudo npm install pug-cli -g
查看版本
>>> $ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6
新建文件命名为index.pug
html
head
title dp2px
body
在命令行输入
>>> $ pug index.pug
rendered index.html
你会发现在同目录生成了一个 index.html 文件，内容如下
<html><head><title>dp2px</title></head><body></body></html>
接下来我们使用pug -w实现自动编译。
>>> $ pug index.pug -w
我使用的 VS Code,你可以让你的编辑器左右两边显示，方便实时查看。
最近本站要更换域名，所以我就想做一个首页和文章内通知，于是就有了这篇文章。
首先打开 theme/next/layout/_layout.swig 文件找到如下代码中的 content-wrap 节点。
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
{% block content %}{% endblock %}
</div>
{% include '_third-party/duoshuo-hot-articles.swig' %}
{% include '_partials/comments.swig' %}
</div>
{% if theme.sidebar.display !== 'remove' %}
{% block sidebar %}{% endblock %}
{% endif %}
</div>
</main>
在 content-wrap 节点中添加下面代码
{% if theme.main_notify.enable%}
{% if theme.main_notify.pageshow %}
{% if page.notify === '' %}
<p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
{% else %}
<p class="content-notify marquee">{{ page.notify }}</p>
{% endif %}
{% elseif page.notify !== '' %}
<p class="content-notify marquee">{{ page.notify }}</p>
{% elseif page.title === ''%}
<p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
{% endif %}
{% endif %}
上面这段代码的逻辑是判断是否要显示通知，我们实际的通知布局只就是 <p> 标签。
<p class="content-notify marquee">通知的内容</p>
在Gitlab上面搭建的博客，最近又买了域名给搭建了起来，文章有了，但是发现百度和Google的索引量比较少，乘着国庆假期抽空又折腾了一番，添加了百度和google收录，更换了静态资源cdn地址，对静态资源进行了压缩。
在搜索引擎中输入site:<域名>， 如果没有被收录可以点击“网址提交”来提交网站。百度链接提交
我们需要使用npm自动生成网站的sitemap，然后将生成的sitemap提交到百度和其他搜索引擎。
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
参考：asdfv1929’s Home - Hexo NexT主题内添加相册功能
要展示自己拍摄的一些照片，可以给博客添加一个瀑布流的相册页面。
首先新建相册页面 hexo new page photos，这样会在 /source/ 下创建 photos/index.md，在其中添加 type: picture。
之后在主题配置文件中对应位置 menu 里添加 photos: /photos || camera-retro ，这样生成后就有导航栏菜单了。
在博客根目录的 /scripts/ 文件夹下新建一个 phototool.js 文件，内容如下。主要功能是访问照片文件夹，获取每张照片的大小和文件名，并生成对应的 json 文件：