零基础搭建博客网站,保姆级详细记录。
0 写在前面
0.1 为什么要搭建这个网站
起初的想法很简单,主要是想拥有一个自己的 “云端笔记系统”。好记性不如烂笔头,虽然也曾尝试着使用印象笔记、OneNote等诸多类似的产品,但换来换去终究没有一款称心的(可能是我太挑剔了?🌚)。后来偶然发现竟然还有搭建个人博客网站这种操作,当即兴趣盎然,对于我这种勇(shan)于(chang)挑(zhe)战(teng)的人,不尝试一下怎么行?!🙈 于是乎各种查资料,参考别人的经验,摩拳擦掌,蠢蠢欲动,然而真正操作起来才发现真是各种坑💩…… 虽然网上有各种资源和教程,但大多面向的是一些专业人员,对于我这种零基础之人,执行起来颇为困难。整个搭建过程涉及太多编程方面的知识,linux系统中一些简单的操作命令,Vim编辑器的常用命令,git的简单使用等等,这些对于我这个非程序猿而言是相当晦涩且繁琐的。最怕的是出现BUG,往往需要尝试很多方法才可以解决。还好功夫不负有心人,在折腾了N次之后终于在2月份把这个网站成功部署上线😆。
然而,网站上线之后我却开始自我怀疑与否定了……
花这么长时间、这么大精力搞这么个玩意儿真的值得吗?起初确实是有好奇心和虚荣心在作祟,毕竟拥有一个自己的网站是一件很酷的事儿。但是,之后呢?就像每次都以锻炼的名义买一些运动衣物,等所有装备都到齐,反而偷懒耍赖去了。在这种自我怀疑的情绪中,这个搭建好的网站也被我闲置了很长一段时间😞。
重新开始打理这个网站已经是半年后了。一来确有需要,以前的知识需要整理回忆,新知识又要及时记录。二是想给自己一个“空间”,不仅存储知识,还有所思所想、所感所悟。它不应该只是一个“知识笔记本”,还应是一个“思想笔记本”、“情绪笔记本”、“人生笔记本”…… 想到这里,也就决定了要把这个网站长期维护下去❤。
0.2 为什么是Hexo
博客网站的搭建有多种方案,WordPress、Hexo、Hugo、Jekyll 等等,各个框架有其优点和特色。本博客使用的是Hexo框架,并非表示Hexo就是最优的方案,仅仅是因为我一开始接触的就是Hexo框架,没有尝试别的,也没有进行对比,所以对其他方案不甚了解。事实是,在我一股脑儿搭建完这个网站之后,才了解到原来有这么多框架可以选择。所以,如果你也有兴趣搭建一个自己的网站,大可以多多了解之后再做选择。当然,如果不想在搭建平台上浪费时间,尽可以选择现有的平台,微信公众号、简书、CSDN等都是不错的选择。然而我还是情愿自己搭建平台的,按照自己的意愿规划部署,这种DIY的乐趣以及成功后的满足感,不亲自体会是不会理解的😆
因为非科班出身,这个网站的搭建耗费了我大量精力,为防以后有需要,也给和我一样的“小白”们一个参考,特意记录此网站的搭建过程。考虑到实际操作性,本文只记录操作指令,不涉及背后原理,况且我也不懂👐……
1 本地环境搭建
1.1 Node.js的安装与配置
Hexo是基于Node.js开发的,因此需要先安装Node.js。下载链接: Node.js官网 或 Node.js淘宝镜像源。需要注意的是,Node.js有长期支持版和当前发布版两个版本。当前发布版版本较新,相应配套组件更新不及时,后续安装使用Hexo会出现一些未知错误,因此注意下载使用长期支持版。现阶段长期支持版已经更新到14.15,这个版本还是太新,在后续操作中会引起一些报错(具体报错内容可参考此文),建议安装12版本左右的长期支持版 。安装过程中除了可以自定义安装路径外,其余选项建议都采用默认方式。
npm是node.js自带的一个包管理器,后续安装hexo博客和插件时会经常用到。npm仓库是国外的地址,国内下载速度可能较慢,更换为国内镜像源后可大幅提高使用体验。在Win10系统的菜单栏里有命令提示符
(即cmd)和Windows PowerShell
(以下简称Shell)的快捷链接,打开任意一个均可,此处以Shell演示。
在打开的Shell窗口输入以下命令,即可把npm仓库源更换为淘宝仓库源:
1 | npm config set registry https://registry.npm.taobao.org/ |
然后在Shell窗口输入以下命令,如果出现下图中红框部分表示更换成功:
1 | npm config ls |
1.2 Hexo的安装
在Shell窗口输入下面这条指令安装Hexo框架:
1 | npm install -g hexo-cli |
在进行下一步之前,先要决定博客文件存放的位置,比如我想把所有的博客文件存放于D盘的blog文件夹中,那首先需要使用指令
cd d:
切换当前位置,如下图:
按照上图切换成功后,输入下面的指令建立自己的blog文件夹(这条指令会自动创建一个名为blog的文件夹,不需要额外创建文件夹)。
1 | hexo init blog |
此外,因为后续工作需要,还需要分别安装 hexo-server 和 hexo-deployer-git ,安装命令如下:
1 | npm install hexo-server --save |
至此,博客框架已经安装完毕。切换至博客文件夹路径,执行hexo server
或hexo s
,如果返回下图信息,表示博客本地环境成功运行:
在电脑浏览器打开http://localhost:4000
可以看到默认的博客界面。
1.3 安装过程中遇到的坑
- 第一个坑 ⚠
在执行hexo init blog
指令时,遇到”无法加载文件脚本“的问题,下面贴出解决过程,以供参考。
解决思路来自博客webpack
:
无法加载文件。首先以管理员身份打开Windows PowerShell
,输入get-ExecutionPolicy
,返回显示Restricted(表示状态是禁止的),然后输入set-ExecutionPolicy RemoteSigned
更改策略,输入A
选择全是
,再次输入get-ExecutionPolicy
可以看到已经更改成功,再次执行hexo命令即可正常执行。
- 第二个坑 ⚠
执行npm install hexo-server --save
指令时,报错提示ENOENT: no such file or directory, open 'C:\Users\WangZC\package.json'
,意思是缺少了一个package.json
的文件(可能是一时手欠误删?😤
),不过同样是可以解决的,首先执行npm init -f
指令,该指令会生成一个package.json
文件,用文本编辑器打开后在description
字段后随便添加一些字母,再在文件末尾添加"private": true
即可,效果如下:
1 | { |
2 云服务器环境搭建
2.1 域名的购买与备案
是否购买域名完全看个人需求,如果要求不高,可以采用Hexo+GitHub的方案(参考GitHub+Hexo
搭建个人网站详细教程)。只是会在域名后添加一个.github.io
的后缀,如iamzc.github.io
。想要一个专属的个性域名就需要购买了,本站域名iamzc.wang
是在阿里云上购买的。现在域名后缀比以往丰富很多,不用再局限于.com
、.cn
等,而且其他后缀的域名也相对便宜,不过也不要购买太少见的,以免无法备案(阿里云购买时会有提醒)。
个人博客网站并不一定要备案。如果使用国外服务器,不备案也可以正常访问。如果是购买国内的云服务器,那就要求必须备案了。各个云服务器提供商都会提供备案接口,按照步骤一步步操作即可,此处不再赘述。阿里云网站备案点击这里 。
在这里记录一下备案时遇到的一些”小插曲“。不同省份备案规则不同,以个人身份证信息为准,遵循身份证上住址所在省份的备案规则。虽然在山城生活了许久,但由于本人身份证依旧是老家的信息,所以只能遵循河北省的备案规则。然而河北省的备案规则中有一条要求:“备案时联系电话必须是本人实名认证的河北省手机号!” 😤 没办法,趁着过年回家特意办了一个手机号,才完成备案。
此外,在备案前一定仔细查看个人网站命名要求 中的附录二。我第一次备案时使用的名称是“王志超的博客”,几日后等来的竟然是被拒绝的消息!😕 按照提示查看了相关要求才发现竟然还有那么多要求!在网上看到有个网友分享,先后起了两个名称都被拒绝,后来随便取了一个“健康快乐每一天”,没想到第二天竟然顺利通过了…… 😂 关于网站名称的问题,不用煞费苦心的想一步到位给网站起个好名字,因为备案时的网站名与网站搭建后对外开放的名称是没有关系的。本站备案时的名称是“汤圆薄荷”(不要问我为什么哈哈哈哈😆……),现在网站名称为“理乐志”,二者互不影响。
为了与服务器连接,还需要对域名进行解析,在阿里云官网登陆后,点击右上角的控制台
,进入域名列表界面后点击解析
进入域名解析页面,按照下图进行配置:
上图中服务器公网IP需要购买云服务器后才能知道,云服务器的购买与配置见下一小节。
2.2 云服务器的购买与连接
2.2.1 云服务器的购买与配置
云端环境的搭建有多种方案,目前比较受欢迎的托管于GitHub上,最大的好处当然是免费,缺点就是慢。一开始我也是采用这种方案,后来实在受不了打开网页时的龟速体验,趁着阿里云搞活动买了个云服务器。本人购买的云服务器只是1核 2 GB 的,但用来部署一个博客网站已经绰绰有余了。目前云服务器厂商很多,阿里云、腾讯云、华为云、七牛云等等,各个厂家为了争夺市场会不定期做一些活动,很多厂商还会针对学生用户有更大力度的折扣活动,大家尽可以选好时机再下手。
云服务器购买后首先安装一个Linux系统(不建议使用Windows),我安装的是64位的CentOS
8.0。在安全设置
一栏有设置密钥和自定义密码两种选项,不同选项在远程连接服务器时进行安全验证的方式不同。为了方便,本人使用的是自定义密码方式。
安装后首先需要配置一下安全组规则,进入云服务器管理页面后,在网络与安全
下找到安全组
,点击进入后添加安全组规则
,配置如下:
2.2.2 云服务器的连接
阿里云的管理页面提供了Workbench和VNC两种方式远程连接,但实际体验并不好,这里推荐在本地电脑使用Xshell工具远程连接,个人用户可以使用Xshell免费版 ,安装过程不再赘述。
使用Xshell与服务器连接有两种方式,与前面安装服务器系统时选择的安全设置
选项有关,因为我使用的是自定义密码的形式,下面以此连接方式展示。在本地电脑打开Xshell点击新建
,在弹出的对话框按照下图设置后连接。
连接后看到下图红框信息表示连接成功。
上图中WARNING
信息不影响使用,也可以通过设置消除。依次点击XShell的
“文件” → “当前会话属性” → “隧道”,取消 “转发X11连接到”
之前的对勾。断开后再次连接,就不会有此错误提示了。
2.3 Nginx的安装与配置
Nginx是一款Web服务器,可以托管博客网站的静态资源,实现快速访问。在安装Nginx之前还需要做一些准备工作,首先更新一下系统,然后创建一个目录作为博客网站的根目录:
1 | yum update -y # 更新系统(非必需) |
Nginx安装命令如下:
1 | yum install -y nginx |
阿里云默认下载的是fedora版本的nginx,配置文件nginx.conf
位于路径/etc/nginx/
下,执行以下命令打开配置文件:
1 | vim /etc/nginx/nginx.conf |
打开后按键盘中的insert
键或字母i
进入编辑模式,修改配置文件中的以下信息:
1 | user: root #需要修改的内容 |
修改完成后先按ESC
键退出编辑模式,再输入:wq
保存并退出。然后执行下面的指令检查配置文件语法是否正确:
1 | nginx -t |
如果返回如下信息表示没有问题:
1 | nginx: the configuration file /etc/nginx/nginx.conf syntax is ok |
最后启动nginx:
1 | systemctl start nginx |
2.4 安装Node.js
安装node.js较为简单,安装完成后执行 node -v
和
npm -v
,如果正常返回版本号表示安装成功。
1 | yum install nodejs # 安装指令 |
3 本地环境与云端环境的连接
Git是分布式版本控制系统,通过git可以实现Hexo代码在本地电脑和云服务器之间同步。因此,需要在本地电脑和云服务器上分别安装Git,并通过ssh公钥连接。有关Git的具体介绍和使用可参考 Git官网 或 廖雪峰的Git教程 。
3.1 本地环境安装并配置Git
在进行下列工作之前,首先需要在GitHub上注册一个账号,记下自己的用户名和邮箱。在 Git官网 或 Git淘宝镜像源 下载Git软件,建议使用默认方式安装,也可以自定义安装路径。安装完成后打开“Git Bash”,输入自己在GitHub上注册的用户名和邮箱:
1 | git config --global user.name "GitHub用户名" |
然后输入生成ssh公钥的指令:
1 | ssh-keygen -t rsa |
在生成公钥过程中会弹出一些选项,不需要更改,一直按回车即可,部分结果下图:
生成之后就可以在上图提示的文件路径中找到一个“.ssh”的文件夹,文件夹中有“id_rsa”和“id_rsa.pub”两个文件,其中“id_rsa.pub”就是用于连接本地和云服务器的公钥,相当于本地电脑有了一把访问服务器的“钥匙”,接下来的工作就是要把这个公钥配置到云服务器上。
3.2 云服务器环境安装并配置Git
在云服务器上安装并配置git:
1 | yum install -y git |
对linux系统不熟悉的用户需要注意,在输入密码时,可视化界面中不会出现任何字符,但实际是已经输入了。配置好密码之后就需要赋予git用户相应权限了:
1 | chmod 740 /etc/sudoers |
打开sudoers文件后找到 root ALL=(ALL) ALL
这句内容,按键盘中的i
键进入编辑模式,在这句话下面添加一句
git ALL=(ALL) ALL
。如下:
1 | # Allow root to run any commands anywhere |
添加完成后先按ESC
键退出编辑模式,再输入:wq
保存并退出,最后把sudoers文件的权限修改回来:
1 | chmod 400 /etc/sudoers |
至此,云服务器环境的git已配置完成,接下来需要连接本地git和云服务器git。
3.3 使用公钥连接
在接下来的操作中,需要来回切换本地电脑和云服务器环境,我会使用加粗字体特别标注,以此提醒。
在Xshell连接云服务器的窗口中,输入以下指令以切换至git用户,创建一个“.ssh”的文件夹,并在此文件下创建一个名为“authorized_keys”的文件:
1 | su git # 切换至git用户 |
打开authorized_keys文件后进入编辑模式,在本地电脑中找到3.1小节中创建的“id_rsa.pub”文件,用文本编辑器打开后复制所有内容,切换到Xshell连接云服务器的窗口,把复制的所有内容粘贴在“authorized_keys”文件中,保存并退出后修改云服务器中“.ssh”文件夹和“authorized_keys”文件的权限:
1 | chmod 600 ~/.ssh/authorized_keys # 将文件设置为可读可写 |
下面测试一下连接是否成功。在本地电脑打开Windows PowerShell
,输入以下指令:
1 | ssh -v git@云服务器的公网IP # 连接时把@后面的文字替换为云服务器的公网IP |
出现以下界面表示连接成功:
至此,连接工作已经做完。
3.4 自动化部署
上面的工作已经实现本地与云端环境的连接,但还没有完成自动化部署。在Xshell连接云服务器的窗口中,输入以下指令以切换至root用户,在“home”文件夹下创建一个“git”文件夹:
1 | su root #切换到root用户 |
在 “blog.git” 裸库中新建一个hooks文件夹,在其下新建 “post-receive” 文件:
1 | vim blog.git/hooks/post-receive |
进入编辑模式,输入以下命令:
1 | !/bin/sh |
添加完成后保存并退出,最后赋予这个文件可执行权限:
1 | chown -R git:git /home/git/blog.git/hooks/post-receive |
下面在本地环境与云端自动化部署连接起来。在本地电脑博客主目录文件夹下找到_config.yml
文件,用文本编辑器打开后,找到并修改以下语句:
1 | # URL |
此步骤有两个细节需要特别注意:一是本地博客文件夹下有两个_config.yml
文件,一个位于主目录文件夹下(D:),一个位于主题文件夹下(D:),此处需要修改的是前者;二是修改时要在英文输入法之下,而且所有冒号后面要加一个空格,如type: git
中,type:
和git
之间是有一个空格的,此空格必不可少。
然后打开本地电脑的Windows PowerShell
,切换到博客目录,把博客部署到线上:
1 | cd d:\bog |
在浏览器中打开自定义的域名,可以看到博客已成功部署(第一次部署可能有延迟,等几分钟即可)。
- 部署过程中遇到的坑 ⚠
在执行hexo deploy
时报错error: remote unpack failed: unable to create temporary object directory
,在网上查了一下,很大可能是权限不够,在云服务器中使用ll
命令查看blog目录和git目录的权限,如果目录所有者不是git用户,重新更改即可:
1 | chown -R git:git /home/blog |
4 主题更改与美化
Hexo的Themes页面有大量主题可供选择,点击此处查看网友总结的一些较为欢迎的主题。本博客使用的是NexT。作为最受欢迎的Hexo主题,NexT页面简洁,支持插件多,可定制性强。而且官网教程详细,对新手友好。因为使用的人多,遇到问题也方便查到解决方案。最新版本可在其 Github页面 查看。
主题的安装按照 NexT官方教程 一步步来,完成基本设置之后再根据需求进行深度改造和美化。以下三篇博客是我优化主题的主要参考:
这些大佬们的文章写的文章已经很清晰了,按照以上步骤基本可以完成主题的美化。不过需要注意的是,这些博客写的时间比较早,是基于老版本的NexT进行优化的。目前NexT已经更新到7.8版,有些优化过程不再像以前那样繁琐,甚至可能会不适用。下面记录一下我基于 NexT 7.8 版本的优化过程。
在开始之前再次强调,Hexo 中有两份主要的配置文件,其名称都是
_config.yml
。一份位于站点根目录(~blog)下,是 Hexo
本身的配置;另一份位于主题目录(~blog)下,主要用于配置主题相关的选项;一般前者称为
站点配置文件, 后者称为 主题配置文件
;在配置过程中一定要分清在哪个文件中更改。
4.1 菜单
在 主题配置文件 中修改以下内容可更改菜单,也就是网站页面抬头:
1 | menu: |
各个menu选项从上到下的顺序也就是网站页面抬头从左到右的顺序,可自行调节更改。||
之后的字符表示图标,NexT 使用的是 Font
Awesome 提供的图标,更改字符即可变换为自己喜欢的图标:
1 | menu: |
如果不想展示图标可在menu_settings
项中,把icons设为false。badges设为true时会在菜单后添加数字。
以上设置只是在页面显示的效果,如果点击“分类”进入页面,会有Cannot GET /categories/
的错误提示,这是因为还没有创建该页面。本地shell端执行以下命令创建页面:
1 | cd d:\blog |
该命令会在source文件夹下创建一个categories的文件夹(d:),该文件夹下有个“index.md”文档,打开后在最后添加一行type内容:
1 | title: categories |
按照同样的方法可创建“标签”、“关于”等其他页面。
4.2 更改文章链接样式
在 站点配置文件 中,文章链接permalink
默认是以日期+文章名的形式展现的,默认代码和效果如下:
1 | permalink: :year/:month/:day/:title/ |
这种 url 结构不太稳定,一旦修改了文章的文件名,就相应会修改其路径,无法保证链接的永久性。hexo-abbrlink 插件可以很好的解决这一问题。首先安装此插件,在本地电脑shell端执行以下命令:
1 | npm install hexo-abbrlink --save |
然后在站点配置文件中进行如下修改:
1 | # abbrlink config |
修改后效果为:
4.3 添加emoji表情 😄 ✌
Github上有一个专门用于hexo的emoji表情插件:hexo-filter-github-emojis 。首先安装此插件:
1 | npm install hexo-filter-github-emojis --save |
然后在站点配置文件添加如下命令:
1 | githubEmojis: |
styles
和customEmojis
两个参数暂时没有用到,具体可参考文档
。
4.4 添加文章结束标记
首先在博客目录source文件夹下创建一个_data
文件夹(D:\blog\source\_data
),再创建一个post-body-end.swig
文件,在该文件中添加以下代码:
1 | <div> |
在站点配置文件末尾添加如下代码:
1 | post_end_tag: |
最后在主题配置文件中custom_file_path
字段下取消postBodyEnd
前的#
:
1 | # Define custom file paths. |
最终效果如下:
4.5 添加站点运行时间
在_data
文件夹(blog\source\_data
)下创建一个footer.swig
文件,在该文件中添加以下代码:
1 | {# 页脚站点运行时间统计 #} {% if theme.footer.ages.enable %} |
在主题配置文件中footer
字段下添加以下命令:
1 | footer: |
birthday
就是网站的创建日期,color
是运行时间字体的颜色,这两个参数可以自行更改。
然后在themes\next\languages\zh-CN.yml
文件中补齐文案:
1 | footer: |
最后在主题配置文件中启用footer.swig
文件:
1 | # Define custom file paths. |
最终效果图:
4.6 添加二次元看板娘
该功能由 hexo-helper-live2d 插件支持,该插件提供多个 模型 ,先择一个喜欢的模型在电脑shell窗口安装插件:
1 | npm install --save hexo-helper-live2d |
在Hexo的站点配置文件 (推荐)或主题文件中添加配置:
1 | live2d: |
以上设置会在网站所有页面展示看板娘,如果只想在一级菜单页面上显示看板娘,可 参考此篇博文。
4.7 添加鼠标点击特效
鼠标点击特效共有四种:火花特效、爆炸特效、爱心特效和文字特效。点击此处
(提取码:
evhu)下载“cursor.zip”压缩包,解压后把cursor
文件夹放在主题文件夹
blog\themes\next\source\js
下,在博客文件夹
blog\source\_data
下创建一个body-end.swig
文件并添加以下内容:
1 | {# 鼠标点击特效 #} |
最后在主题配置文件中取消bodyEnd
参数前的注释符,并添加相应命令:
1 | custom_file_path: |
在四种鼠标点击特效中选择自己喜欢的并更改cursor_effect
参数即可。如果想要自定义文字特效,可在cursor
文件夹下的text.js
文件中更改。
4.8 更改字体
NexT主题默认使用的中文字体是微软雅黑(Microsoft Yahei),看着是真的难受🙈 看了看大佬们的博客,决定把网站的中文字体改为思源宋体(Noto Serif SC)。关于黑体和宋体间的区别、思源宋体的介绍可以看下面这两篇文章👇
这两个博客中同样也介绍了更改字体的方法,不过已经不适用于新版本的NexT了,下面给出我的改良方法。
首先在 Google Fonts 上找到
Noto Serif SC
,进入字体页面后选择样式,然后复制网页右侧link
中的内容。
在~blog\source\_data
文件夹下新建一个head.swig
文件,把复制的link
内容粘贴其中并保存。在站点配置文件
中启用此文件:
1 | custom_file_path: |
最后再把base.styl
文件中的“Microsoft Yahei”改为“Noto
Serif SC”,保存后重新部署就大功告成😆
1 | // 文件位置:~blog\themes\next\source\css\_variables\base.styl |
如果想修改英文字体则相对简单,只需要修改
站点配置文件 中Font Settings
的内容即可:
1 | # Font Settings |
4.9 文章置顶功能
博客文章默认按照日期倒序的方式呈现在首页,如果希望某一篇或某几篇文章一直位于首页顶部,那就需要用到置顶功能了。最新版 NexT 主题已经内置了置顶样式,只需要安装一下 hexo-generator-indexed 插件,安装命令如下:
1 | npm install hexo-generator-indexed |
在需要置顶的文章 Front-matter 中增加一个 sticky
参数,
sticky
参数的值应为大于0的整数,表示置顶的优先级(未指定则默认为
0)。数字越大,文章越靠前。
1 | title: Hexo博客之主题美化 |
这个方法虽然简单,但效果却有点简陋,简单粗暴的在标题前添加了一个与标题文字很不协调的符号。
下面对其进行美化,把置顶符移到文章元数据一栏。打开post.swig
文件,定位到{%- if post.sticky > 0 %}
字段,把以下命令行直接删除(一共有两处):
1 | 文件路径:blog/themes/next/layout/_macro/post.swig |
然后在该文件中找到<div class="post-meta">
字段,在第一个span
标签下添加新的置顶命令:
1 | <div class="post-meta"> |
因为NexT内置样式对置顶符号添加了30度的角度旋转,因此还需要把角度改一下:
1 | // 文件路径:blog/themes/next/source/CSS/_common/post/post.styl |
最终效果如下:
此外,hexo-generator-indexed 插件还具有隐藏文章、隐藏特定分类文章的功能,具体可参考其github页面。
4.10 更换back-to-top按钮
hexo-cake-moon-menu 插件提供一个全新的back-to-top按钮,比NexT原有样式更美观。首先同样要安装此插件,7.8版本以下的NexT需要安装2.1.2版本的back-to-top:
1 | npm install hexo-cake-moon-menu@2.1.2 |
在站点配置文件中添加以下命令:
1 | moon_menu: |
icon
参数表示图标,可在Font Awesome
找到自己喜欢的图标进行更改。此外,还需要把主题配置文件中的back2top
参数关闭:
1 | back2top: |
4.10 页面背景及边框圆角
此部分内容参考 nexT主题更改背景图片和边框圆角
。首先是更改背景图和透明度,在 blog/source
目录下新建
images
文件夹用来存储背景图,在blog/source/_data
目录下新建一个
styles.styl
文件并添加以下内容:
1 | // 整体背景设置 |
以上命令参数可自行更改调节。然后在 主题配置文件
中启用styles.styl
文件:
1 | custom_file_path: |
至此,背景图更改已完成。下面更改边框圆角,在blog/source/_data
目录下新建一个 variables.styl
文件并添加以下内容:
1 | // 圆角设置 |
然后在 主题配置文件
中启用styles.styl
文件:
1 | custom_file_path: |
最终效果对比: