Fork me on GitHub

hexo优化之路-基础篇

   说实话我已经停止更新hexo 博客很长时间了,最近突然有更新博客的想法,所以就开始了博客更新之路,既然重新开始写博客,那就要换个主题换个心境把,下面的故事由此展开
  

1
2
前言:  hexo theme 主题五花八门,基本上种类有很多,我这次选择更新的主题为 NexT。
NexT主题是在GitHub有着10k+star的高人气Hexo主题,可方便切换多种方案(Scheme),内置标签分类、代码高亮、载入动画等功能,支持评论系统、站内搜索、数据统计与分析等第三方服务。算是比较省事的代名词吧。

hexo 博客搭建

关于hexo 博客的搭建,请大家移步我的这篇文章如何使用hexo+github搭建个人博客

hexo 博客使用 github和 coding

更新主题

关于主题的更换我之前写过一篇文章,请大家移步我的这篇文章如何更换hexo主题

hexo Next 主题配置

添加分类/标签/关于我们

  1. hexo next 主题有个比较气人的地方就是你不创建一个页面,你就没法打开以上的三个

  2. 创建分类\标签\关于我们, 一下我以创建一个标签为例:

    1
    2
    3
    # 在终端窗口下,定位到 Hexo 站点目录下。使用 hexo new page 新建一个页面,命名为 tags :
    $ cd your-hexo-site
    $ hexo new page tags

设置博客信息

自 next 更新到6.x 以后百度搜索到的官方文档都是有错误的。因为 next 6.x 已经由github 上的组织 theme-next 进行维护,所以有些文档更新不及时

打开站点配置文件

1
2
3
4
5
6
7
8
9
10
11
12
# 网站信息
#标题
title: 孤城落寞的博客
#副标题
subtitle: 记录学习的技能和遇到的问题
#网站描述
description: 做自己爱做的事,爱自己在做的事!
#作者昵称
author: 孤城落寞
#网站语言,默认英语,设置简体汉语
# Next 6.x 中文简体已有 zh-Hans 更换成 zh-CN
language: zh-CN

选择 Scheme

Scheme 是 NexT 提供的一种特性,借助于 Scheme,NexT 主题可以方便切换多种不同的方案。

  • Muse - 默认 Scheme,这是 NexT 最初的版本,黑白主调,大量留白
  • Mist - Muse 的紧凑版本,整洁有序的单栏方案
  • Pisces - 双栏 Scheme,小家碧玉似的清新

我使用的是 Gemini,打开~\blog\themes\next\里的_config.yml这个主题配置文件,删去scheme: Gemini前面的注释#即可启用该 scheme,如下所示:

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

设置菜单

打开主题配置文件,设置启用的菜单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
menu:
home: / || home
archives: /archives/ || archive
categories: /categories/ || th
tags: /tags/ || tags
#schedule: /schedule/ || calendar
about: /about/ || user
#sitemap: /sitemap.xml || sitemap
#commonweal: /404/ || heartbeat

# Enable/Disable menu icons / item badges.
menu_settings:
icons: true
badges: false

同前面一样,带#的为不启用

设置侧标栏

在博客左边/右边除了菜单外,还有一个侧栏,可以放置头像和其他社交链接,并在阅读文章时会自动显示文章目录。

侧栏社交链接的修改包含两个部分,第一是链接,第二是链接图标,图标名称是Font Awesome提供图标的名字(不必带 fa- 前缀):

1
2
3
4
5
6
7
8
9
10
11
12
social:
GitHub: https://github.com/gclm || github
E-Mail: http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=2uvt6_Pj4ujt7_6aq6v0ubW3 || envelope
QQ: http://wpa.qq.com/msgrd?v=3&uin=1719982754&site=qq&menu=yes || fa-qq
YouTube: https://www.youtube.com/channel/UCPPIRDg6H5aOufa9OaYM-yA?view_as=subscriber || youtube
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

设置头像,把头像图片放在~/blog/themes/next/source/images中(如无此路径自行创建即可),图片命名为avatar.jpg

1
2
3
4
5
6
7
8
9
# 头像设置
avatar:
url: /images/head.jpg
# If true, the avatar would be dispalyed in circle.
rounded: false
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1
# 设置为true 开启头像旋转
rotated: true

开启侧栏文章目录,在阅读文章时自动展开:

1
2
3
4
toc:
enable: true #开启侧栏文章目录,目录由一级、二级标题形成
number: true #自动为目录编号
wrap: false #不展示目录中全部文字

设置侧栏位置、返回顶部按钮等:

1
2
3
4
5
6
7
8
sidebar:
position: left //侧栏位置
display: post
offset: 12
offset_float: 12
b2t: true //显示返回顶部按钮
scrollpercent: true //显示百分比
onmobile: false //在移动设备上不显示侧边栏

开启站内搜索

1
npm install hexo-generator-searchdb –save

编辑站点配置文件,新增以下内容到任意位置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

编辑主题配置文件,启用本地搜索功能:

1
2
3
4
5
6
7
8
9
10
11
# Local search  站内搜索
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
# unescape html strings to the readable one
unescape: false

配置 gittalk 评论

关于gittalk 评论插件的配置,请大家移步我的这篇文章如何更换hexo主题

自定义主题

作为一个新世纪的优秀青年,光用默认主题怎么行呢,接下来开始进行主题的自定义模式。

点击我开始主题的自定义模式

本文标题:hexo优化之路-基础篇

文章作者:孤城落寞

发布时间:2018年10月29日 - 11:12:42

最后更新:2019年02月21日 - 22:02:47

原始链接:https://blog.gclmit.club/archives/f3de43a5.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。



-------------本文结束 感谢您的阅读-------------
坚持原创技术分享,您的支持将鼓励我继续创作!