0%

Hexo的美化之路

目前正在学习使用GitHub的Page服务,搭建博客,记录所学过程!

使用的是Hexo框架部署,第一次使用难免遇到许多问题,写篇博文,把其中的过程,都记录下来。此篇记录美化功能—-好看是第一生产力!

我使用的是Next主题,Must样式。


Start

基础样式

下载Next主题,并更改样式

打开终端,切换到Hexo根目录底下如 G:\blog\sunrisevip 使用git 进行克隆

1
2
3
cd G:\blog\sunrisevip  //这是我路径,替换为自己

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

打开站点文件 hexo / _config.yml 找到 theme 然后将其值更改为 true (或另一个主题目录名称)

1
theme: next

现在可以再进行验证,终端输入 hexo s 进行部署会出现

1
2
INFO  Start processing
INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

表示已经本地部署成功,输入链接 http://localhost:4000 进行访问验证。

成功出现样式后,可以在主题配置文件下 next/_config.yml ,进行样式更改,支持四种方案。取消掉 # 进行更改。

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

配置站点图标

站点图标例如那个可达鸭:

image-20200531102041860

图标存放在hexo-site/source/images/ ,然后在hexo / _config.yml 中的 favicon 样式中进行修改和重命名。

1
2
3
4
5
6
7
favicon:
small: /images/favicon-16x16-next.png //这一行修改
medium: /images/favicon-32x32-next.png //这一行修改
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
android_manifest: /images/manifest.json
ms_browserconfig: /images/browserconfig.xml

favicon 图标,需经过修改,提供个在线制作网址

1
http://www.bitbug.net/

配置头像

默认情况下,Next主题,侧边栏中不显示头像,通过主题配置文件next/_config.ymlavater 样式进行修改

1
2
3
4
avatar:
url: /images/avatar.gif //这一行替换图片路径
rounded: true //没搞懂
rotated: true //头像将在鼠标悬停时旋转。false关闭

侧边栏

侧边栏样式默认情况下侧边栏仅显示在博文中,位于左侧,可以在next/_config.ymlsidebar 样式中进行修改。

更改边栏位置

left→屏幕左侧 right→屏幕左侧

1
2
3
sidebar:
position: left
#position: right

更改边栏宽度

sidebar.width

1
2
sidebar:
width: 300

更改侧边栏样式

设置条件,在该条件sidebar.display下边栏将通过编辑值显示,该值可以是以下之一:

  • post →仅在具有索引的帖子中显示侧边栏。
  • always →在所有页面中显示侧边栏。
  • hide →将其隐藏在所有页面中(但可以由用户手动打开)。
  • remove →完全移除侧边栏。
1
2
3
4
5
sidebar:
display: post
#display: always
#display: hide
#display: remove

还有几个值,仅支持不同主题样式,不常用没写。

侧边栏社交链接

指定的链接必须具有完整的URL路径(永久链接)。 可以更改社交链接图标

image-20200531123136810

编辑next/_config.yml中的social部分

1
2
3
4
5
6
social:
GitHub: https://github.com/yourname || fab fa-github
E-Mail: mailto:yourname@gmail.com || fa fa-envelope
Weibo: https://weibo.com/yourname || fab fa-weibo
Google: https://plus.google.com/yourname || fab fa-google
Twitter: https://twitter.com/yourname || fab fa-twitter

后面中的fab fa-github 是图标样式,可以在下列网站中选取样式,进行替换

1
https://fontawesome.com/icons?d=gallery

侧栏博客卷

可以在Next的侧边栏中添加博客卷。

设定icon 值图标进行更换

设定title值名称进行更换

1
2
3
links_settings:
icon: fa fa-link
title: sunrise

设定links值添加喜欢的链接

1
2
3
links:
Title1: http://example1.com/
Title2: http://example2.com/

发布帖子

标签图标

默认情况下,帖子底部的标签左侧左侧有一个符号#。

image-20200531125917579

喜欢图标而不是符号,next/_config.yml 中更改

1
tag_icon: true

打赏

可以在每篇文章底下添加支付码,以便收到打赏。图片放到主题文件下next\source\images

1
2
3
4
5
6
7
8
9
# Reward (Donate)
reward_settings:
enable: true
animation: false

reward:
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png
bitcoin: /images/bitcoin.png

订阅链接

Follow me

根据自己选择开启,或替换地址,图标

1
2
3
4
5
6
7
# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
#Twitter: https://twitter.com/username || fab fa-twitter
#Telegram: https://t.me/channel_name || fab fa-telegram
#WeChat: /images/wechat_channel.jpg || fab fa-weixin
#RSS: /atom.xml || fa fa-rss

自定义页面

添加自定义页面

在Hexo网站目录,创建一个新的页面

1
2
cd your-hexo-site
hexo new page custom_name

设置前值(官方文档这样叫的)

1
2
3
title: custom_name
date: 2014-12-22 12:39:04
---

添加custom_namemenu编辑主题的配置文件,如添加about页面:

1
2
3
4
menu:
home: / || fa fa-home
archives: /archives/ || fa fa-archive
about: /about/ || fa fa-user

其他一些小美化

修改标签样式

原标签样式,特别小,颜色比较淡

打开themes/next/layout/page.njk

image-20200531170710763

tagcloud 其中的值修改为:

1
2
3
4
5
6
{{ tagcloud({min_font: 20,
max_font: 30,
amount: 300,
color: true,
start_color: '#555',
end_color: '#111'}) }}

现效果:

image-20200531170956788

更改标签图标

修改Blog\themes\next\layout\_macro\post.njk 中的tag_indicate 值进行替换image-20200531181142014

最后效果图:

image-20200531181233424


显示当前浏览进度

文章顶部浏览进度条修改reading_progress 样式

1
2
3
4
5
6
7
reading_progress:    #阅读进度条
enable: true #false关闭
# Available values: top | bottom
position: top
#color: "#37c6c0" 更换颜色
color: "#8fd3f4"
height: 3px

效果图:image-20200531194948741


增加书签效果

在博文右上方出现书签角标,更改bookmark 样式,还可更改其颜色

下次打开会在当前页面

1
2
3
4
bookmark:
enable: true
color: "#f6d365"
save: auto

效果图:

image-20200531195312969


代码块高亮

选取喜欢的代码块主题,进行codeblock样式更改

theme

light→明亮主题模式下

dark→暗模式下

在以下网址进行选择

1
2
https://github.com/chriskempson/tomorrow-theme
https://github.com/highlightjs/highlight.js/tree/master/src/styles

copy_button

开启代码复制功能

style

更改代码框样式

flat →扁平化风格

mac →Mac样式

1
2
3
4
5
6
7
8
9
codeblock:
theme:
light: tomorrow-night-eighties
dark: tomorrow-night-blue

copy_button:
enable: true
show_result: true
style: flat

未完待续吧,之后还有其他优化,会再进行添加。😁😁😁