Hexo 美化优化配置（持续更新）

添加网站运行时间

一个比较好的小功能，可以看见自己的博客运行多久了，时间一天天的增加，成就感也会一天天增加的
在 \themes\hexo-theme-spfk\layout_partial\footer.ejs 文件下添加以下代码：`

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("08/10/2018 17:38:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
setInterval("createtime()",250);
</script>

最后效果

添加文章边框阴影效果

1.打开themes/next/source/css/_custom/custom.styl文件

2.在custom.styl文件中添加如下配置

.post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

在Hexo博客中插入图片

在写文章时，常常有配图说明的需求，Hexo 有多种图片插入方式，可以将图片存放在本地引用或者将图片放在 CDN 上引用，通过此文总接一下在 Hexo 搭建的博客中，插入图片的常用方式，你也可以理解为在 Markdown 中插入图片。

src 链接

如果你要插入的图片，是一个外部的 src 链接地址，比如该图片存放在 CDN 上，或某某图床上面，那就使用 Markdown 默认的插入图片的方式，方法和插入链接很像，只是前面多了一个感叹号，如下：

![alt](https://ws3.sinaimg.cn/large/005BYqpgly1g29eohl7qhj31c00u0dkz.jpg)

本地绝对路径

当 Hexo 项目中只用到少量图片时，可以将图片统一放在 source/images 文件夹中，通过 Markdown 语法访问它们。

![alt](/images/test.jpg)

本地相对路径

图片除了可以放在统一的 images 文件夹中，还可以放在文章自己的目录中，文章的目录可以通过配置 _config.yml 来生成。配置如下：

post_asset_folder: true

将 _config.yml 文件中的配置项 post_asset_folder 设为 true 后，执行命令 $ hexo new post_name，在 source/_posts 中会生成文章 post_name.md 和同名文件夹 post_name 。将图片资源放在 post_name 中，文章就可以使用相对路径引用图片资源了。

![alt](test.jpg)

Base64 格式

最后补充一种在 Markdown 中插入Base64 格式图片的方法，和第一种插入外链的方式类似，注意是圆括号 ()，而不是方括号 [] 。

![alt](data:image/jpeg;base64,/9...)

参考链接和工具

用Base64编码插入Markdown图片
Base64在线转换
小贱贱图床

相册

由于平时没事也拍点东西，于是就想也有个展示的页面。探索了一下，可以利用 next 的插件 group picture 来实现，他的原理很简单，就是利用 next 主题的 Tag Plugin 这种语法提供了一种展示图片的布局。

需要以下几步：

首先 hexo new page photos 新建一个名为 photos 的标签页，并且在 themes/next/languages/zh-CN.yml 中的 menu 一项下面添加 photos: 相册，这样在首页菜单栏才会显示中文相册。
其次，可以直接在 source/photos/index.md 写文章，并在需要插入图片的时候用以下方式来组织你的图片列表：

某某地方玩

## 某某地方玩
{% gp 6-3 %}
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
{% endgp %}

其中 ‘6-3’ 的意思是改组一共有六张图片，每行排最多三张。除了图片之外其他的文字和章节标题都可以像往常一样加。

广告

这里主要针对谷歌广告来说。

开通账号
众所周知，谷歌是全球最大的广告中间商，让你可以出卖流量来换小钱钱。具体做法是将你有流量的位置告诉谷歌，他会根据浏览你网站的用户行为来动态给他们推广告。

你可以在这里：https://www.google.com/adsense 开通，将你的网站提交，然后谷歌会给你审核，这篇文章 有讲一些申请需要注意的事项，总的来说就是得让谷歌判定你的网站是有价值的，而不是垃圾网站，至于他怎么定义垃圾，上面文章有涉及。

嵌入代码
审核一般几天内会有结果，如果通过了就可以愉快地在你的博客里做广告了。但这是有个问题，如何兼顾页面美观性和广告数量、大小和位置间的平衡呢？这是个见仁见智的事情，我的做法主要有两点：

1.只做展示广告。如下图，谷歌广告类型提供了三种。我只选择展示广告，因为位置、大小可以受我们严格控制。

1.限制广告尺寸。在定义广告的时候，在右侧边栏可以定义广告尺寸，如果是自适应的不好控制其页面上的呈现方式。我限制到很小：280px * 100px，并且只放一个。
2.挑选放置位置。我选在侧边栏最下面，并且用分割线隔开，这里需要自定义一些样式。定义css 可以新建一个自己的样式集：themes/next/source/css/_my/mycss.styl ，然后在 themes/next/source/css/main.styl 中引用即可: @import “_my/mycss”;

我只增加了一个样式：

.sidebar-ads {
	border-top: 1px dotted #ccc;
	width: 100%;
	height: 100px;
	padding-top: 15px;
	margin-bottom: 5px;
}

这个样式具体可以丰俭由人，我 css 只是略知皮毛，就只能做成这样了，一个比较好的办法是可以在 Chrome 中调好审查元素，定好样式后再抄到样式集中即可。

新建文章时，在相同目录下创建同名文件夹（便于图片管理）

打开站点配置文件_config.yml，搜索post_asset_folder字段，设置其值为true
安装hexo-asset-image：npm install hexo-asset-image --save
此时hexo new "fileName"会在/source/_posts目录下创建同名的文件夹
只需在 md 文件里使用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GzH3VEU1-1584082441025)(图片名.jpg)] ，无需路径名就可以插入图片。

评论系统

效果图：

Valine 诞生于2017年8月7日，是一款基于Leancloud的快速、简洁且高效的无后端评论系统。

教程：
1.登录 Leancloud 官网，注册之后创建一个应用，选择【设置】->【应用Key】记下你的APP ID和APP Key，如下：

2.编辑 主题配置文件，搜索 Valine，填入appid 和 appkey，如下：

valine:
  enable: true # When enable is set to be true, leancloud_visitors is recommended to be closed for the re-initialization problem within different leancloud adk version.
  appid: # your app id
  appkey: # your app key
  notify: true # 评论回复邮件提醒, See: https://github.com/xCss/Valine/wiki
  verify: false # 验证码服务
  placeholder: 留言区 # 评论框占位提示符
  avatar: mm # 头像配置
  guest_info: nick,mail,link # 回复要填写的信息
  pageSize: 10 # 评论列表分页，每页条数
  visitor: false # 文章访问量统计 
  comment_count: true # if false, comment count will only be displayed in post page, not in home page

可选操作： 在【Leancloud】 -> 【设置】 -> 【安全中心】 -> 【Web 安全域名】把你的域名加进去，可防止数据被篡改。