博客搭建实战

Hexo 是一个快速、简洁且高效的博客框架,支持个性化的配置。这篇博文记录了搭建过程。

目录

配置主题

修改博客工程根目录下的_config.yml文件

theme: hexo-theme-next

配置风格

修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

scheme: Mist

配置语言

修改博客工程根目录下的_config.yml文件

language: zh-Hans

配置描述

修改博客工程根目录下的_config.yml文件

description: "Stay hungry, Stay foolish."

配置目录

修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

toc:
  enable: true
  number: false

配置头像

将头像图片文件123.jpg放进/source/images中,修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

avatar: 
  url: /images/123.jpg

配置拉条

none

配置社交

修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

social:
  E-Mail: mailto:jaydenhuanggz@gmail.com || envelope

配置打赏

将打赏图片文件wechatpay.jpg放进/source/images中,修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

reward_comment: “如果觉得还不错,请我喝杯咖啡吧~”
wechatpay: /images/wechatpay.jpg

配置菜单

修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

menu:
  home: / || home
  tags: /tags/ || tags
  categories: /categories/ || th

配置标签

增加一个页面(page)用来汇总标签

hexo new page tags

修改生成的页面文件内容(/source/tags/index.md)

---
title: tags
date: 2019-05-10 13:49:39
type: "tags"
---

给文章添加标签属性

---
title: 博客个性化配置
date: 2019-05-10 10:00:00
tags: 
- 博客
- 搭建
- 环境
- 配置
---

配置分类

增加一个页面(page)用来汇总类别

hexo new page categories

修改生成的页面文件内容(/source/categories/index.md)

---
title: categories
date: 2019-05-10 13:44:06
type: "categories" 
---

给文章添加类别属性

---
title: 博客个性化配置
date: 2019-05-10 10:00:00
categories:
- 社交
---

配置评论

next主题集成了许多第三方厂家的评论功能插件,选择比较精简的Valine

修改主题目录(/themes/hexo-theme-next)下的_config.yml文件,主要是app id, app keyvisitor

valine:
  enable: true 
  appid: xxxxxxxxxx
  appkey: xxxxxxxxxx
  guest_info: nick,mail
  notify: true
  placeholder: Comment here ...
  visitor: true

增加评论区之后,根据valine的文章阅读量统计方法增加统计数据

找到/themes/hexo-theme-next/layout/_third-party/comments/valine.swig文件并修改代码

修改前:

<script>
var GUEST = ['nick', 'mail', 'link'];
var guest = '{{ theme.valine.guest_info }}';
guest = guest.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
});
new Valine({
    el: '#comments',
    verify: {{ theme.valine.verify }},
    notify: {{ theme.valine.notify }},
    appId: '{{ theme.valine.appid }}',
    appKey: '{{ theme.valine.appkey }}',
    placeholder: '{{ theme.valine.placeholder }}',
    avatar: '{{ theme.valine.avatar }}',
    meta: guest,
    pageSize: '{{ theme.valine.pageSize }}' || 10,
});
</script>

修改后:

<script>
var GUEST = ['nick', 'mail', 'link'];
var guest = '{{ theme.valine.guest_info }}';
guest = guest.split(',').filter(function(item) {
    return GUEST.indexOf(item) > -1;
});
new Valine({
    el: '#comments',
    verify: {{ theme.valine.verify }},
    notify: {{ theme.valine.notify }},
    appId: '{{ theme.valine.appid }}',
    appKey: '{{ theme.valine.appkey }}',
    placeholder: '{{ theme.valine.placeholder }}',
    avatar: '{{ theme.valine.avatar }}',
    meta: guest,
    pageSize: '{{ theme.valine.pageSize }}' || 10,
    visitor: {{ theme.valine.visitor }},
});
</script>

配置分享

修改博客工程根目录下的_config.yml文件

baidushare: true
    

修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

baidushare: 
  type: button

按照链接中的方法,将static放进/themes/hexo-theme-next/source目录下。

修改baidushare.swig文件中的代码。

修改前:

.src='//bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];

修改后:

.src='/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)]; 

配置版权

修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

post_copyright:
enable: true

修改博客工程根目录下的_config.yml文件

url: https://jaydenh215.github.io/

配置脚注

修改主题目录(/themes/hexo-theme-next)下的_config.yml文件

footer:
  powered:
    enable: false
    
  theme:
    enable: false

配置统计

next主题集成了许多第三方厂家的统计功能插件,选择LeanCloud

完成上述步骤之后,会发现阅读次数后面没有数字,那是因为LeanCloudnext主题还没有联系起来,
需要按照该博主的方法来实现。

部署云引擎以保证访客数量不被随意篡改

配置搜索

TBD

博文置顶

参考这里

最新的next貌似不需要下载新的插件,直接改hexo-theme-next/layout/_macro/post.swig就可以了

博文插图

修改博客工程根目录下的_config.yml文件

post_asset_folder: true

marked:
    prependRoot: true
    postAsset: true

这样每次hexo new XX,都会同时生成一个XX文件夹用来放图片。

为了去掉插图的边框,找到/themes/hexo-theme-next/source/css/_common/components/post/post-expand.styl文件并修改代码。

img {
    box-sizing: border-box;
    margin: auto;
    padding: 0px;
    border: 0px;
}

侧栏微信

参考这个

修复错误

“如果觉得还不错,请我喝杯咖啡吧~”