【HEXO专辑】2:熟悉轻博客框架HEXO的目录架构和主题的基本设置修改
这篇文章就是教你用一些擦边球的方法,简化使用难度,熟悉这种命令行和代码管理博客的逻辑,来运营这个博客框架。一个健康的博客需要几个要素:
1.写文章:原先不带,咱就找个编辑器,用Hexo支持的语法写就文件。
2.管理博客:管理文章、设置目录。
3.更换主题:谁都想让自己的博客更个性,博客这种东西外观的丰富程度严重影响读者选择。
3.外网浏览:一个别人看不到的博客?哄自己玩呢?
几个Hexo的资源网站:
Hexo的官网:https://hexo.io/zh-cn/
Hexo的主题:https://hexo.io/themes/
Gitee的资源搜索页:https://search.gitee.com/?skin=rec&type=repository&q=hexo
上一篇我们讲了如何部署Hexo,您要根据我的教程也弄一个,你装完的第一个问题肯定是,这玩意怎么发文章啊?还有怎么建目录?换主题?请用一种全新的视角来看待这个东西,Hexo写文章、换主题、建目录。。。绝大部分功能基本上都需要代码行来实现。。。。和我们习惯的博客完全不同,没有编辑器,没有设置栏,总之,所以这个东西号称码农专属。。。。
挺无语哈,这个世界有个事叫看上去很专业?没有需求创造需求,明明能做到的事情非得给你整点反人类的蛾子,可能这个作者是想借此体现专业性,然后劝退低智用户群体吧?搞明白这件事了,我就去看他的官方文档,看完更想骂街了!其实内容真心不算难,不是那种晦涩的代码,基本就是这个事的英文单词加点标点符号。
非装什么大尾巴狼呢?
通过我这几天使用Hexo的体会,Hexo部署-Hexo更换主题(使用主题的设置简化操作)-设置博文收录结构(管理目录)-编辑器编辑文章-发布在Hexo上-gitee代码托管平台实现外网浏览。
先明白个事,这东西不是你存个网络书签,想看的时候打开就看的!
你的每次使用Hero都需要在你的电脑上(无论是windows下建的服务器还是群晖里的)登陆Hexo服务器,Hexo很多功能实现都是通过SSH命令行,所以您若想管理自己的Hexo博客,需要先用SSH工具登陆你的Hexo服务器,才可以在你电脑的浏览器上看到你的博客页面,不要一看页面不出来就觉得系统歪筐了,再重装一遍。所以这里要先告诉您SSH登陆Hero博客服务器的几个命令,因为这个机制,你会频繁用到,打开SSH工具,输入命令:
cd
回到Hexo安装到的目录,比如群晖就是回到home
cd 你的群晖安装目录
比如我的就是:cd mzinblog
ssh 用户名@ip
比如我的ssh mzin@192.168.4.220
回车后输入密码
hexo server
启动服务器
等到下面那句【INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.】出现,就说明启动成功,浏览器里输入群晖地址:默认端口4000,就可以打开博客页面了。
所以,不要一看页面不出来就觉得系统歪筐了,再重装一遍,ssh登陆就可以了。
我们再来熟悉一下Hexo的几个目录:
首先,我们要知道你的Hexo装在群晖的何处了,打开群晖6.1.7— File Station,搜索你之前Hexo的安装目录
给这个目录设置个快捷方式放在桌面,改名Hexo,以后很多操作直接点开目录就可以了,Hexo的逻辑就是通过修改安装目录中的一些关键文件来实现博客管理功能。挺装大尾巴狼,但是既然选择了这个,就搞下去呗,习惯了也还行。
Hexo里这些安装目录都是干啥的要讲一讲!你能主要鼓捣的就三个目录:
模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。
Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
主题 文件夹。Hexo 会根据主题来生成静态页面,以后搞到好看的主题都考进这里!
Hexo正常运行了第一件事情干什么?讨巧的方法,我建议您还是先把主题换了,因为Hexo有许多爱好者,更新者制作了很赞的主题,这些主题把这个代码基本都归置的很成熟了,还提供了很详尽的README文档,你只需要根据稳当做适当修改,就可以把你的博客做的很漂亮和很好用,还很大程度的减少新手犯错!
Hexo的主题获取有两个途径,一个是官网
还有就是代码托管网站的,比如gitee,搜索Hexo会列出许多主题,随便下一个,我以我是用的BUTTERFLY为例往下讲解,先去gitee搜索xero,找到自己看着入眼的,下载zip
把这个zip文件解压,在群晖的file station套件打开themes目录,考进去解压的目录
拷入群晖的Hexo主题目录themes就好,尽量不要改名,因为有些主题作者会在主题设置中限定路径
也可以通过Git或者NPm安裝,从下面页面获得git克隆的网址,拷贝下来,回ssh工具进Gexo目录,命令行下载抓取。
git抓取用这个
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
npm抓取用这个,二选一
npm i hexo-theme-butterfly
有些主题为了实现一些特别的效果,会需要一些插件的参与,需要你下载pug或者stylus的渲染器,这些主题作者都给你准备好了,也是拷贝命令行运行抓取,自动安装好。
npm install hexo-renderer-pug hexo-renderer-stylus --save
在Hexo安装根目录,你会看到一个文件:_config.yml 这就是Hexo基本设置的调整文件。修改这个文件实现博客的大部分基本设置诉求。
群晖的套件中心下载:文本编辑器
文本编辑器打开 _config.yml
我这个群晖主题里这个赭色的命令行,你可以更改里面的黑色部分以达成设置,但是要按照Hexo的语法来进行,其实很简单,都是英文大白话。
这里要严重提醒新手一件事:yml语法虽然简单但是要求极度严格,不通过往往是空格问题!
1.所有设置参数属性末尾都要加空格!
2.每一个命令行的:和后边的内容之间是有个空格的!
你以后改了_config.yml,要是不生效,再回编辑器看看,以我的经验,80%的不生效都是没留这俩个空格!还有就是改之前要确认你输入法是输入的英文字符。
在这个文件里,搜索theme,大约在百行位置,你会看到theme语句,把那个主题名改为你刚才下载的那个主题的目录名就可以了
然后,重新SHH登陆一次Hexo开启服务,浏览器里:群晖ip:4000默认端口号。比如我的192.168.4.220:4000
就可以看到更换主题的博客首页了。
到这,基本这个博客完全就可以用了,我是很建议您一开始就换主题,换了主题之后就根据您使用这个主题的readme来继续深化你的博客呈现。比如我用这个butterfly,他有很详尽的指导文档。比如butterfly的作者建议在根目录下面建个文件_config.butterfly.yml,这个将取代Hexo的缺省设置文件_config.yml,他让新建这个会包含缺省设置文件的内容,并且可以实现许多确定设置无法实现的效果和插件。但是这个新建文件也是严格遵守yml语法的,不会出现运行错误。
到了哪山唱哪山的歌,作者让你怎么办你就怎么办,无脑重现就可以。今后想要设置博客的一些基本内容,就打开这个文件修改就好了。
现在我们来学习yml的编辑语法:咱们一段一段一行一行的捋,不要偷懒,玩这个Hexo这些东西是不能回避的。
打开根目录下的yml文件,用自带主题就开_config.yml,用其他主题就按坐着要求打开对应的yml文件。咱们这里按自带主题的缺省设置文件_config.yml来讲解,这个文件有个100多行代码,结构如下:
再次提醒,注意前后的空格,一定要严格遵循语法,不得省略
# Site 网站:
网站描述是一段话,关键词是单词、用逗号分隔;description是给搜索引擎收录用的,设置精心一点。
# URL 链接:
你有独立的域名填在这里,要是用gitee代管代码,则把gitee的部署网址填入,这样外网就可以浏览博客了。
如果您的网站存放在子目录中,例如 http://example.com/blog,则请将您的 url 设置为 http://example.com/blog 并把 root 设为 /blog/!
# Directory 目录
不是太明白别瞎捣鼓这个,很容易乱套,其实就是个目录定位,也没什么改头。
# Writing 写作
文章呈现的一些设置,也是建议不明白别动,原始的设置就足够了。
# Category & Tag 分类标签
你可能有好多分类,设定默认分类是哪个目录,这个目录就自动列表居首
# Date / Time format 时间日期格式
设定时间日期格式,建议不动,意义不大。
updated_option
updated_option 控制了当 Front Matter 中没有指定 updated 时,updated 如何取值:
mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中,因为使用 Git 管理站点时,文件的最后修改日期常常会发生改变
empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。
use_date_for_updated 选项已经被废弃,将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'。
use_date_for_updated | 启用以后,如果 Front Matter 中没有指定 updated, post.updated 将会使用 date 的值而不是文件的创建时间。在 Git 工作流中这个选项会很有用 | true
# Pagination 分页
就是字面意思,设置每页显示的文章数量,也可以不分页。
# Include / Exclude file(s)包括或不包括目录和文件
鼓捣这个,你是有多无聊。
# Extensions:拓展
这部分就是换主题用,和允许使用主题自带的设置文件。独立主题设置文件的格式就是 _config.[theme].yml 文件
独立的主题配置文件应放置于站点根目录下,支持 yml 或 json 格式。需要配置站点 _config.yml 文件中的 theme 以供 Hexo 寻找 _config.[theme].yml 文件。
# _config.yml
theme: "my-theme"
# _config.my-theme.yml
bio: "My awesome bio"
foo:
bar: 'a'
# themes/my-theme/_config.yml
bio: "Some generic bio"
logo: "a-cool-image.png"
foo:
baz: 'b'
最终主题配置的输出是:
{
bio: "My awesome bio",
logo: "a-cool-image.png",
foo: {
bar: "a",
baz: "b"
}
}
我们强烈建议你将所有的主题配置集中在一处。如果你不得不在多处配置你的主题,那么这些信息对你将会非常有用:Hexo 在合并主题配置时,Hexo 配置文件中的 theme_config 的优先级最高,其次是 _config.[theme].yml 文件,最后是位于主题目录下的 _config.yml 文件。
这一篇文章,我们已经部署好了Hexo的基本环境,并且明白他运作的逻辑,更换好了好看的主题,您的博客已然初见端倪,但是现在这个博客还是只能被你的内网计算机看到,下一篇我来教大家用编辑器软件书写博客的语法。
歪我是小爽啊
校验提示文案
值友2054913020
校验提示文案
值友2054913020
校验提示文案
歪我是小爽啊
校验提示文案