搭建完blog ,接下来就是更换一个漂亮的主题了。
由于下边的操作配置可能会出现失误,因此建议配置完一部分,就在本地测试一下,看看疗效,以免出现错误无法定位,还得从头再来。
主题更换主题推荐
hexo.io/themes/
siricee.github.io/hexo-theme-Chic/
dewjohn.github.io/
blinkfox.github.io/
主题下载更换
本部份主要以matery主题为例进行测试说明
hexo-theme-matery 主题文档
本地 blog/themes 目录下 clone 主题文件,或者在GitHub页面下载,然后将解压缩的文件夹直接放在themes 目录下,注意更改名子为hexo-theme-matery
git clone https://github.com/blinkfox/hexo-theme-matery.git
blog目录下的 _config.yml更改如下内容
theme: hexo-theme-matery
per_page: 12 (或者18 有两处需要修改)
# 修改文件中的title author等信息
url: <你的blog地址>
基础配置
随后根据主题说明文件新建一系列右上角跳转页面和一些扩充功能
在该主题文件下的配置文件_config.yml进行属性更改
blog/themes/hexo-theme-matery/_config.yml
menu部分:
#见不需要未新建跳转页面的直接注释
dream 如果不需要直接false
indexbtn 修改为自己的github地址
sociallink 修改为自己的社交账号信息
reward 直接修改为false
profile:修改关于界面信息
#其它关于信息直接修改为false
githublink 修改为自己的github
subtitle 修改信息
主题文件中须要修改的图片
# 配置网站favicon和网站LOGO
favicon: /favicon.png
logo: /medias/logo.png
# 修改背景
medias/cover.jpg
medias/banner/ 下的图片
medias/featureimages 下的图片
#关于界面个人头像
/medias/avatar.jpg
# 总之 medias的图片全部更改为自己喜欢的即可
# 需要注意的是,一些文件夹下的图片数量如果更改,配置文件也需要修改,以下详细介绍
主题优化文章头设置
#为了新建文章方便,将/scaffolds/post.md修改为如下代码:相关属性可以看主题说明文档
---
title: {{ title }}
date: {{ date }}
author:
img: /source/images/xxx.jpg
top: false
cover: false
password:
toc: true
mathjax: false
summary:
tags:
- hexo
categories: blog
---
文章国图设置
img 表示文章的国图,默认不特殊标明
这样会从主题文件下的 source\media\featureimages文件夹下手动选择图片,此文件夹下有0-23 一共24张图片,我们可以更换为我们自己喜欢的图片。
如果你要修改其图片数目,需要在主题文件的 _config.yml文件下进行修改:
featureImages:
# 在下面进行更改文件名称
- /medias/featureimages/0.jpg
如果img特殊标明,那么都会根据指定路径展示文章国图
增加社交帐号信息
原主题的社交帐号好多不需要可以直接注释,如果想要添加主题配置文件中不存在的社交帐号,需要进行如下操作:
主题文件夹下 /layout/_partial/social-link.ejs 增加社交帐号信息
图标可以在 Fontawesome 中找到相关代码
<% if (theme.socialLink.daohang) { %>
<a href="<%= theme.socialLink.daohang %>" class="tooltipped" target="_blank" data-tooltip="进入果壳er导航页: <%= theme.socialLink.daohang %>" data-position="top" data-delay="50">
<i class="fas fa-compass"></i>
</a>
<% } %>
主题文件夹的配置文件_config.yml中
sociallink部分增加
daohang: https://xydh.fun/ucas
重新配色
原来主题使用了大量的红色,我们可以替换为自己喜欢的颜色,如果不知道渐变色怎么调,可以参考 webgradients 。
主题文件夹 \source\css\matery.css 文件中
将 #4cbf30 #0f9d58 修改为自己喜欢的颜色代码。