全文建议配合梯子食用
hexo主题美化,让你的博客焕然一新
强烈建议点击此处,在我的博客网站看这篇博客,以获得更爽的阅读体验
上篇博客中,我讲完了如何利用hexo和githubpage初步在你的ubuntu上搭好一个博客网站,但这样搭出来的网站显然不太符合我们代码人的口味(可能只有我不太喜欢?)。而这篇博客就是教你让你的hexo换个主题,并且做yi点点自定义的美化,本文选用的博客的主题是matery,也是我的博客正在使用的主题。
matery主题
matery主题是一个采用Material Design
和响应式设计的 Hexo 博客主题,这是它的github仓库地址,点击这里查看演示效果(其实就是我的主页)。
安装与切换主题
在你博客根目录下的theme文件夹打开终端,键入以下命令
git clone git@github.com:blinkfox/hexo-theme-matery.git
安装完后,你的theme文件夹下就会多出一个hexo-theme-matery的文件夹,切换主题也很简单,只需打开博客根目录下的_config.yml
文件,找到theme,将它的值由landscape修改为hexo-theme-matery。
基础修改
打开根目录下的_config.yml
文件(主题文件夹和博客根目录下各有一个同名文件,请区分开),修改title,subtitle为自己想要的,并自行查看效果,language改为zh-CN。
接下来的一系列对于该主题的基础配置,请自行查阅主题作者写的官方文档,不知道比我写得高哪里去了,点击此处可查。下文只讲我在查阅该文档时遇到的问题以及一些其他的个性化配置。
遇到的问题
文件路径
本处内容是基于我浅薄的认识写的
首先先讲一下matery主题文件夹下各个文件和文件夹的作用(其实就讲两个).最重要的是_config.yml
文件,负责管理网站的总设置,用于添加或开关网站中的某功能。一个是layout
,管理着网站各个部分的格式和结构.一个是source
,存放着对网站各处的美化和本地图片的源文件。也就是说你在_config.yml
或其他文件,涉及到本地图片的路径,源文件夹就是source
。举个例子,假如你要修改你的logo,那么你可以把下载下来的logo.png放在/source/medias
中,然后在_config.yml
文件中找到logo,将其值改为/medias/logo.png
,更多关于图片的问题,下文将会继续讲解。
图片加载问题
图片的存放大体上有两种方式,一种是本地,一种利用图床生成链接地址来直接访问,本地的话不再赘述,下面将向大家介绍一款十分好用的工具picgo来搭建你的博客图床
picgo安装
请到picgo仓库中自行安装对应版本,此处为其仓库。
picgo搭建github图床
此处以搭建github图床为例
- 首先在你的github中创建一个放博客图片的仓库,此处举例命名为blog_image
- 然后点击右上角你的头像,再点击settings,进去后找到并点击Developer settings,再点Personal access tokens,如果你先前没有生成过token的话,点击Generate new token
- 输入密码后开始配置token,选择Expiration(有效日期),下面的勾选,一定要勾选repo,推荐勾选write:packages、admin:org,然后点击Generate token,你的token就生成好了,请即刻复制下来,因为你之后无法再看到这个token.
- 在picgo主页中点击图床设置,再点github图床,填入设定好仓库名和token,cdn加速下面再讲,点击确定就设置好了
- 使用时在上传区传入图片后,会自动生成链接,将该链接放到博客或其他配置文件中即可。
图片分辨率过高
如果你要使用的图片分辨率过高,或者换句话说,图片大于1M,这都会导致你加载图片过慢,此时推荐一个图片压缩神器picdiet,可在线压缩图片。
文章标签问题
一般来说,在写博客的时候,tag可以有多个,而categories一般只有一个,而在写多个tags时请看一下格式。
tags:
- a
- b
cdn加速
可利用免费的jsdelivr来进行加速,如上面讲到的picgo图床,可在图床设置中的自定义域名中填入https://cdn.jsdelivr.net/gh/用户名/仓库名,便可以了。
而在主题的设置中,可在matery下的_config.yml
文件中找到jsDelivr,将#删掉,便可完成加速。但是要注意的是,配置了此项就代表着本地调试的时候,网站依然会去GitHub请求资源(原来的资源),本地调试的时候记得将此项配置注释或者删除掉。
图片懒加载
请参考这篇Sky03大佬的博客Hexo进阶之各种优化,这里面还有很多其他技巧哦!
自定义美化
请在阅读完主题的官方文档再来看这里
评论系统
先从比较实用的功能讲起,matery的评论系统支持多种api的接入,此处以gittalk为例。
- 首先点击右上角你的头像,再点击settings,进去后找到并点击Developer settings~~(是不是有点似曾相识)~~,然后点击OAuth Apps,接下来点击New OAuth Apps
- 在配置中,其他随便搞搞就行,重点是在Authorization callback URL这一栏中填入自己博客的域名或ip地址,如xxx.github.io(xxx为你的用户名)。
- 完成创建后会生成client id和client secret,将这两项复制,然后打开matery下的
_config.yml
文件,找到gittalk,按下面的配置就可以了
gitalk:
enable: true #true为打开
owner: xxx #github用户名
repo: xxx.github.io #
oauth:
clientId: xxxx #刚复制的
clientSecret: xxxx
admin: xxx
修改封面图
鲁迅曾经说过,一个好的封面是博客的门面。这里介绍一下如何更换你的封面图,其实很简单,首先matery主题默认是轮播封面,一星期7天,每天一张。
打开主题下的/source/medias/banner
文件夹,你会找到0123456等7张jpg,而这些就是你的封面,所以你只要下载你想要的图片到该文件夹中,并重命名为相应的名字即可。
如果你想自行修改图片轮播逻辑或图片读取路径,也可打开主题文件夹下的/layout/_partial/bg-cover-content.ejs
自行操作。如果只想关掉轮播,只需到matery下的_config.yml
文件中找到cover这一项,看注释修改即可。
顺便说一下,_config.yml文件中还有很多可开关的功能,可自行摸索。
菜单栏透明
你是否因为菜单栏那一片绿色而在苦恼,你是否看到大佬们~~(除我)~~的博客那与封面融为一体的菜单栏而感到羡慕,这里我将教你如何变透明(bushi)。这也是很多美化博客貌似没讲到的内容,其实只要在/source/medias/css/matery.css
中找到.bg-color
一项,做以下修改即可。
.bg-color {
background-image: linear-gradient(to right, #3fd9ff 0%, #5637c6 100%); #颜色自行选择
opacity: 0.7;
}
浏览器搞笑标题
在主题文件夹下的\source\js
下新建一个 FunnyTitle.js 文件,填写如下代码:
// 浏览器搞笑标题
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/funny.ico");
document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
/*此代码为转载
来源: Shawlon`s Blog
作者: Tyzhao
链接: https://www.yshawlon.cn/hexo-ge-ren-bo-ke-zhi-bo-ke-zhu-ti-mei-hua.html#toc-head/
在主题文件夹下的layout\layout.ejs
文件中添加如下代码:
<!--浏览器搞笑标题-->
<script type="text/javascript" src="/js/FunnyTitle.js"></script>
live2d
如果你想要你的"老婆"做你博客的看板娘的话,那这个功能可太适合你了。
首先安装依赖
npm install --save hexo-helper-live2d
然后如果你想从现有的模型库中获取的话则较为方便,模型库预览点击此处,直接安装包即可,举个例子:
npm install live2d-widget-model-shizuku
然后在博客根目录下的_config.yml
文件中,添加以下代码:
# 注意缩进
live2d:
enable: true
scriptFrom: local
model:
use: live2d-widget-model-shizuku #填模型名
display:
position: right #left或right
width: 180
height: 480
mobile:
show: false
自己的不在库中的模型
这里讲一下,如果你想用你自己有的模型来做看板娘该如何操作,其实就是将你的模型作为npm包发布出去,再自己install回来。
- 先在你的模型文件夹中打开终端,键入
npm init
按提示填好信息,此处建议包名填live-widget-model-xxx,你就会发现多了package.json - 在npm官网注册一个npm账号,然后回到刚刚的模型文件夹中,键入
npm login
,输入用户名和密码,完成登录 - 键入
npm publish
上传包,出现+代表成功了。 - 然后在你的博客文件夹打开终端,用npm将你刚刚的那个包install回来,注意:请将你模型中的model.json改为xxx.model.json(xxx为包名后的那个xxx,如shizuku),下回来的包会在
node_modules
中。然后把上面那个配置的model:use:的值改为live-widget-model-xxx即可。
结尾
那么这篇教程到这里就结束,别看这篇教程中的一些话不是很长,但有些东西真的过了几天才解决的,毕竟网上的教程那么多,不可能每篇都能囊括到方方面面,很多问题真的是翻来翻去都找不到答案。哎…不说了,都是泪,这篇教程我已经就我所能将我遇到的问题和解决方法放了上去,希望能帮到你。
感谢你看到这里,也恭喜你拥有了算的上好看的博客网站啦(至少在我看来)!如果真的有看我这篇教程搭出了自己的博客网站的,欢迎在评论区发出链接给大家膜哦!求收藏,求关注,求转发~~(一键三连)~~,我们下篇再见。