博客搭建实战

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

目录

配置主题

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

theme: hexo-theme-next

配置风格

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

scheme: Mist

配置语言

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

language: zh-CN

配置描述

修改博客工程根目录下的_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:
  GitHub: https://github.com/jaydenh215 || github

配置打赏

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

reward_settings:
  enable: true
  comment: “如果觉得还不错,请我喝杯咖啡吧~”

reward:
  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 idapp key

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

增加评论区之后,右下角会有Power by 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,
    visitor: {{ theme.valine.visitor }},
    lang: '{{ theme.valine.language }}' || 'zh-cn'
});
</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 }},
    lang: '{{ theme.valine.language }}' || 'zh-cn'
});
//新增
var infoEle= document.querySelector('#comments .info');
if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
    infoEle.childNodes.forEach(function(item) {
    item.parentNode.removeChild(item);
    });
}
</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文件

creative_commons:
  post: true

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

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

配置脚注

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

footer:
  powered:
    enable: false

  theme:
    enable: false

配置统计

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

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

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

20190514:总是有问题,所以现在先把leancloud_visitors安全设置为false。

配置搜索

next主题推荐使用Local Search

博文置顶

参考这里

博文插图

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

post_asset_folder: 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;
}
“如果觉得还不错,请我喝杯咖啡吧~”