Hexo博客搭建记录(二):基本主题设置以及美化

前言

前一篇博客我主要介绍了如何一点一点搭建起Hexo博客系统,搭建方式还是挺简单的,但是Hexo的默认主题样式可能对于大多数人来说并不是足够炫酷,接下来我介绍一些Hexo的主题美化操作。

注意

随着 Hexo 版本以及 Next 主题版本的更新,文章中的某些功能或者设置不可用,请注意检查版本。

本文编写时使用的版本:

  • Hexo版本:4.2.1
  • next 主题版本:7.7.2

1. 更改主题。

Hexo的支持很多不同的主题,我们可以在Hexo主题页去寻找自己喜欢的主题,我目前使用的就是Next 这款主题,下面我都围绕最新版 Next 7.2 来一步步说明如何进行美化。

注意

在Hexo目录下有两份重要的配置文件,其名称都是_config.yml 。其中,一份位于站点根目录下,主要包含Hexo的自身配置,另一份位于主题目录下,主要用于配置主题相关的选项。
在接下来的描述中,我将前者称为 站点配置文件,后者称为 主题配置文件

1.1 安装Next

安装Next主题的方式很简单,利用Git bash 在博客主目录下执行:

git clone https://github.com/theme-next/hexo-theme-next themes/next

然后我们打开站点配置文件,将theme属性从默认值landscape改为next

theme: next

记住,所有的配置属性: 后面都要加一个空格,这样我们设定的值才会生效。

这样我们即将主题修改为Next主题。

1.2 选择不同的Next主题样式

Next提供了四种主题风格scheme,可以在主题配置文件中配置:

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
  • 第一种 Muse

  • 第二种 Mist

  • 第三种 Pisces

  • 第四种 Gemini

选择哪种风格基于个人喜好,我这里选的是最后一种Gemini


2. 更改站点属性(网站名,语言,作者)

打开站点配置文件,找到site字段,具体修改如下:

# 设置网站属性信息
# Site:
title: 小白的博客 #网站标题(博客站点名字)。
subtitle: 小小白 #网站副标题,显示在标题下方
description: 我是小白 #个人描述,类似签名,用于搜索引擎对站点的描述,建议在里面加上你的站点的关键词
keywords:
author: 小白 #博客文章作者
language: zh-CN #设置博客站点语言为中文
timezone: #设置时区,默认当前电脑时区

设置效果如下:


3. 菜单栏

3.1 显示更多栏目

在主题配置文件中修改如下:

menu:
home: / || home # 首页
about: /about/ || user # 关于
tags: /tags/ || tags # 标签
categories: /categories/ || th # 分类
archives: /archives/ || archive # 归档
# schedule: /schedule/ || calendar # 日历
# sitemap: /sitemap.xml || sitemap # 站点地图
# commonweal: /404/ || heartbeat # 腾讯公益404

3.2 图标和内容量

menu_settings:
icons: true # 是否显示各个页面的图标
badges: true # 是否显示分类/标签/归档页的内容量

3.3 效果图

以上修改如下图:


4. 侧边栏

以下设置都是在主题配置文件中

4.1 显示可跳转 日志 / 分类 / 标签页 的链接

# Posts / Categories / Tags in sidebar.
site_state: true

4.2 社交信息设置

social:
GitHub: https://github.com/yourname || github
#E-Mail: mailto:yourname@gmail.com || envelope
Weibo: https://weibo.com/yourname || weibo
#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
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

Next 默认给出了一些模板,我们只要将其中的链接改为自己的链接就可以了,当然你也可以自己定义,格式为

名字: 链接 || 图标名,图标必须是FontAwesome网站中能找到的图标名。

例如我添加我的博客地址:

qianfanguojin: https://qianfanguojin.github.io/ || codepen 

4.3 圆形头像设置

avatar:
# In theme directory (source/images): /images/avatar.gif
# In site directory (source/uploads): /uploads/avatar.gif
# You can also use other linking images.
url: /images/avatar.jpg #头像文件目录
# If true, the avatar would be dispalyed in circle.
rounded: true #设置鼠标放在头像上面是否旋转
# If true, the avatar would be rotated with the cursor.
rotated: true #头像是否设为圆形

将自己喜欢的头像头像按照需求自己更换自己喜欢的就可以了,不过这里要注意一下头像可能会变成椭圆,如果头像是椭圆的,是因为图片不是一个正方形的图片,找到一个宽高像素一样的的图片即可。

以上修改如下图:

4.4 其他

toc:
enable: true #自动生成目录
# Automatically add list number to toc.
number: true #自动产生目录编号
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false #标题过长是否换行
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false # 是否显示所有等级的目录项。
# Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` in Front-matter.
max_depth: 6 #最大标题嵌套个数

sidebar:
# Sidebar Position.#侧边栏的位置
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12 # 侧边栏相对主菜单的像素距离
# Enable sidebar on narrow view (only for Muse | Mist).
onmobile: false #在手机上侧边栏是否显示

# 返回顶部
back2top:
enable: true
# Back to top in sidebar.
sidebar: false #侧边栏显示返回顶部信息,默认显示在页面右下方
# Scroll percent label in b2t button.
scrollpercent: #显示百分比

5. 页面设置

5.1 鼠标点击红心

目前网上大多数文章都是在themes/next/source/js/src 下新建文件,但笔者写这篇文章时最新版Next已经没有src文件夹了 ,于是,我们可以在themes/next/source/js/下新建clicklove.js内容如下:

!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);


然后在修改themes/next/layout/_layout.swig 文件末尾添加:

<!-- 页面点击小红心 -->
{% if theme.clicklove %}
<script type="text/javascript" src="/js/clicklove.js"></script>
{% endif %}

注意

很多人配置正确但不显示的原因主要出在这里,也就是src 后面的文件链接错误,hexo中使用的是相对路径,也就是说,只要你不指定为绝对路径,设置的链接都将是root+url的形式,一般来说,大多数用户默认的root 都为/ ,但是有些情况,例如设置了Git Page ,要修改root的路径,root路径我们可以在 站点配置文件 中找到:

上图就是在我设置了Git Page后 root路径的值,在这种情况下,我们在修改themes/next/layout/_layout.swig 文件时,src 的路径都应该加上root 的路径值,因此,在这种情况下代码应修改为:

<!-- 页面点击小红心 -->
{% if theme.clicklove %}
<script type="text/javascript" src="/fa/js/clicklove.js"></script>
{% endif %}

确定无误后最后在主题配置文件末尾添加:

# 显示页面红心
clicklove: true

5.2 添加动态背景

# 设置动态背景
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: "0,0,255" # RGB values, use `,` to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 170 # the number of lines

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
enable: false
delay: false # Set true to further delay loading
three_waves: true
canvas_lines: false
canvas_sphere: false

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
canvas_ribbon:
enable: false
size: 300 # The width of the ribbon
alpha: 0.6 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon


新版Next已经支持了上面三种动态背景方式,大家想用哪种就将该项的enable 设为 true,具体效果大家自己尝试,一般用的是第一种。

当然,指明要用那种,但是Next没有自带该动画的包,我们要自己下载,链接就在注释中# Dependencies 项后面 ,例如我下载第一种:

git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest

链接后的是指定下载后放到的文件夹名,大家要注意是放在lib 下且文件夹名字应该和上面的设置项名字一样。

5.3 博客底部基本布局

这里我就不细说了,大家参照注释自己修改

# 博客底部布局
footer:
# Specify the date when the site was setup. If not defined, current year will be used.
#since: 2015 #设置建站时间,不设置则默认为当前年份

# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
# `heart` is recommended with animation in red (#ff0000).
name: heart # 作者图标,默认为author,自定义的图标需来自fontawesome中
# If you want to animate the icon, set it to true.
animated: true # 图标是否闪动
# Change the color of icon, using Hex Code.
color: "#808080" # 图标颜色

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright: 小白 #设置底部显示的名字,默认为站点配置文件的author名字

powered:
# Hexo link (Powered by Hexo).
enable: false # 是否显示 Powered By Hexo
# Version info of Hexo after Hexo link (vX.X.X).
version: false # 是否显示 Hexo 版本

theme:
# Theme & scheme info link (Theme - NexT.scheme).
enable: false # 是否显示主题信息
# Version info of NexT after scheme info (vX.X.X).
version: false # 是否显示主题版本

# Beian ICP information for Chinese users. See: http://www.beian.miit.gov.cn
beian:
enable: false # 是否显示网站备案信息
icp:

5.6 底部显示busuanzi博客访客/访问次数统计

修改主题配置文件内容:

# 不蒜子统计功能
busuanzi_count:
enable: true # 是否开启busuanzi统计功能
total_visitors: true # 是否统计总访客数
total_visitors_icon: user # 访客数图标
total_views: true # 是否显示同级总访问次数
total_views_icon: eye # 总访问次数的图标
post_views: true # 是否显示单个文章查看次数
post_views_icon: eye # 文章被查看次数的图标

5.5 右上角显示Github标识

修改主题配置文件:

# `Follow me on GitHub` banner in the top-right corner.
# Github 跳转图标
github_banner:
enable: true # 功能开关
permalink: https://github.com/yourname # Github主页地址
title: Follow me on GitHub # 鼠标悬停显示的文字

5.6 接入网易云播放器

首先在网易云音乐网页端搜索你想播放的音乐(有版权保护的不行):

然后点击生成外链播放器,得到外链的html代码:

然后我们将代码粘贴到一个合适的位置,建议在侧边栏,对应的文件是themes/next/layout/_macro/sidebar.swig ,不同的位置效果呈现的效果不同,例如我的:

<div class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
<div class="site-overview">

{{ partial('_partials/sidebar/site-overview.swig', {}, {cache: theme.cache.enable}) }}

{% for inject_item in theme.injects.sidebar %}
{{ partial(inject_item.layout, inject_item.locals, inject_item.options) }}
{% endfor %}
</div>
<!--网易云链接-->
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=33419765&auto=1&height=66"></iframe>
</div>

效果就是这样:

这里大家自己根据需求设置就行了。


6 文章内容相关

6.1 文章摘要显示(显示阅读全文按钮)

  • 自动形成摘要模式

    打开主题配置文件,修改内容如下:

    auto_excerpt:
    enable: true
    length: 150 # 截取的内容长度

    # Read more button
    # If true, the read more button would be displayed in excerpt section.
    read_more_btn: true # 是否显示阅读全文按钮

    但是这样的方式不够自由,我们可以使用如下方式:

  • 使用 <!--more--> 标签分隔,格式如下:

    这样,<!--more--> 标签上的内容为概述,下面为正文,效果如下:

6.2 代码块设置

使用参照如下:

# 代码块设置
codeblock:
# Code Highlight theme
# Available values: normal | night | night eighties | night blue | night bright
# See: https://github.com/chriskempson/tomorrow-theme
# 代码块主题, 可选的值为 normal; night; night eighties; night blue; night bright
highlight_theme: night
# Add copy_button on codeblock
# 显示复制按钮
copy_button:
enable: true
# Show text copy result.
show_result: true
# Available values: default | flat | mac
style: # 按钮显示格式

代码块样式的具体内容可以查看官方文档 http://theme-next.iissnan.com/theme-settings.html#syntax-highlight-scheme

6.3 添加打赏

#Reward (Donate)
#打赏设置
reward_settings:
#If true, reward would be displayed in every article by default.
#You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
enable: true # 功能开关
animation: true # 动画
#comment: Donate comment here.

reward:
#wechatpay: /images/wechatpay.png # 微信捐赠二维码图片
#alipay: /images/alipay.png # 支付宝捐赠二维码图片
#bitcoin: /images/bitcoin.png # 比特币

6.4 添加版权信息

#Creative Commons 4.0 International License.
#See: https://creativecommons.org/share-your-work/licensing-types-examples
#Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
#You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
#CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
license: by-nc-sa #许可协议
sidebar: true #侧边栏显示
post: true #文章底部显示
language:

6.5 添加文章结束提示语

核心代码

<div style="text-align:center;color: #ccc;font-size:14px;">
------------- 本文结束 <i class="fa fa-heart-o"></i> 感谢您的阅读-------------
</div>
  • 如果你想简单一点实现,直接复制这段代码,然后将其插入到 themes/next/layout/_macro/post.swig 文件的如下位置:

  • 当然,我们大多时候对功能都需要一个灵活性,也就是可以开关。为了实现这样的效果,我们先在themes/next/layout/_macro/ 新建 post-end-text.swig 文件,将上面的 核心代码 添加进去。
    然后我们修改themes/next/layout/_macro/post.swig 文件 ,将上面简单实现的代码替换成:

    {#####################}
    {### END POST BODY ###}
    {#####################}
    <!--文章结束标语-->
    {% if theme.post_end_text && not is_index%}
    {% include 'post-end-text.swig' %}
    {% endif %}

    然后,我们在主题配置文件末尾添加:

    # 文章结束提示语
    post_end_text: true

    我们就可以在这里将其设为 truefalse 来控制其显示。

6.6 添加博客字数和阅读时间统计功能

首先在站点根目录下配置依赖:

npm install hexo-symbols-count-time --save

然后再站点配置文件中加入以下内容:

symbols_count_time:
symbols: true #是否统计字数
time: true #是否统计阅读时长
total_symbols: true #是否统计总字数
total_time: true #是否统计总阅读时长

最后在主题配置文件中修改为以下内容:

#字数及访问时间统计
symbols_count_time:
separated_meta: true #分隔线
item_text_post: true #文章中的显示是否显示文本
item_text_total: true #网页底部的显示是否显示文本
awl: 2 #平均每个字符的长度
wpm: 275 # 设定每分钟可阅读的字符数

效果如下图:

6.7 修改 tag 图标

默认的 tag 样式为 # 不带图标:

我们可以改成使用图标:

新版Next 已经帮我们集成了这个功能,我们只要在主题配置文件中修改:

#Use icon instead of the symbol # to indicate the tag at the bottom of the post
#使用标签图标
tag_icon: true

参考链接

https://blog.csdn.net/nightmare_dimple/article/details/86661502