《我的建站笔记》 二

作者:爱学习的海生

|进行到这里,你应该已经有了一个基本的网页结构了。但是现在什么内容都没有


前言

你的个性化定制就从这里开始吧。


一、修改你的主题

其实参考别人写的教程来看,修改主题并不是放在最前面的,但是经过我自身的实践来看。如果是想快速的搭建好一个个性化的网站的话,先使用一个合适的主题是很有帮助的,可以避免一些不必要的步骤。

1.选择主题

那么,我在这里提供一些主题的git hub地址(当然你可以在百度搜索栏直接搜索“hexo 主题”会有相当多的推荐)
indigo主题

Butterfly主题

Clover主题

2.调用主题

使用这些主题到你的hexo,
首先在github上复制地址:
参考位置

然后只需按照以下格式键入代码:

1
$ git clone '你在github上复制得到的地址' themes/'你的主题名字'

这么做使得你的根目录(blog)下会得到一个以themes命名的文件夹,方便以后更改。
接着在你的根目录下使用 git bash here,
键入如下代码:

1
$ notepad _config.yml //notepad表示你要打开这个文件类型的软件,notepad是系统自带的文本编辑器,快捷方便无需下载

然后个性化你的选项:

注意:每个冒号后面都要加一个英文空格,否则无法识别。

接下来调用你的主题:
这里原本是landscape,删除掉重新键入你的主题名称即可。

二、主题的相关配置

1.配置任务栏

因为每个主题的内置配置都不大一样,这里我选择我使用的 butterfly 来展示。
找到你的主题根目录,及带有你主题名字的文件夹里,使用 git bash here,键入:

1
$ notepad _config.yml 

找到menu
这里定义你的菜单栏。一定要删去 # 才能使用相应操作(#表示注释)。同样的,每个冒号后面要(至少)打一个空格。
你可以将冒号前内容改成中文,但本质依然按英文的释义来对应相关菜单标签。
fas fa-xxx是fontawesome的使用标志。你可以在此fontawesome找到你喜欢的图标来使用。

与此同时,

打开hexo根目录的git bash here,运行并打开config.yml,输入:

1
2
$ hexo g
$ hexo s

然后在浏览器打开你的本地网页,就可以实时看到你成功修改的内容了,未成功的话会在gitbash的页面显示错误信息,顺藤摸瓜修改即可。

2.图片设置

找到你的主题根目录,依然是打开config文件,然后找到你的avatar设置区(按ctrl+F即可实现快速搜索)。

按照这个格式的路径找到你的头像(要提前找到你选择的图片并改好后缀,保存到主题根目录的/source/img里)img即可:/img/avatar.jpg(注意在冒号后面加上空格)

同理,可以设置你的网站背景等等,都保存在该文件夹下。

最后,别忘了清理和生成,

1
2
$ hexo c
$ hexo g

总结

只要明白了格式上的规矩,就可以自己在主题的config.yml里自由查找内容并进行编辑个性化设置。


问题总结

Q:我的notepad打不开config.yml或者还有别的打开方式吗?

A:还可以使用VSC、VS等等方式。本人会在之后的更新中补充更多的编辑方式(非前端类型专业学生,求体谅😥)。

Q:我的config.yml更改好了格式(空格打了,缩进关系也是正确的)但还是显示不对,怎么破?

A:这种问题本人也遇到过,有时候删减/增加空格以及整理一下换行关系就能解决。如果实在不行就可以删除主题文件,重新下载一个,这个过程只需要不到1min。

作者: 阔海生
分类: 《我的建站笔记》
更新于:
评论
avatar
阔海生
唯有时驻足敛羽,方可远行
Follow Me
公告
有趣小组件或将添加,欢迎常来逛逛。
最新文章
网站资讯
文章数目 :
3
已运行时间 :
本站访客数 :
本站总访问量 :
最后更新时间 :