Skip to content
Re-Re-Blog
HTML JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
2016
2017
2018
2019
about
archives
categories
css
images
js
lib
page
readmeimg
tags
CNAME
index.html
readme.md

readme.md

Hi,我是 Ceplavia 。

此仓库用来放我第二次搬迁后的博客。

友人的 hostker 面板,使用 WordPress

主机壳 Host ,使用 WordPress

Github Page,使用 Hexo 博客引擎(现)

最初,我只是打算在 Github Page 放一个 MC 服的更新页面(原本以为只能放点简单的页面)。但后来仔细看了好久的教程之后,我决定把我的博客搬过来。

因为我觉得自己从头搞的话,可定制度更高。我很不喜欢 WordPress 那种万事包办的感觉。

对于我来说,WordPress 魔改几乎靠插件,而且有些插件看着评分高、使用人数多,自己装上了又没用,搜教程又搜不到,很烦躁。

此外,原因还有主机壳的 host 托管也是没有太多可以可以调的设置。比方说 PHP7 永远是测试版,问题多,而 WordPress 后来的版本想要升级就一定要使用 PHP7 。

最初搜 Github Page 的教程时几乎都没有多少会教你从头开始的。也没有人会说 Jekyll 和 Hexo 到底有什么区别。

而对我来说,Hexo 可以在本地更改各种布局,并测试完成好再部署到 Github Page ,因而就决定是它了。跟着他人的「教程」来使用 Jekyll 的印象见「-1.1」。

几乎没有人提到 Jekyll 的文件目录结构这回事,那真的是从头开始。添加文章直接在 Github 仓库操作添加文件到底是什么骚操作……

决定使用 Hexo 之后,在搜索教程时并没找到多少好的,原因有几个:

一是不知道部分写教程的人有什么毛病喜欢照搬官方文档,的那种语气,一句人话不写;

二是时间太久远,有些路径都是错的;

三是写什么都不详细,写在简书知乎这种屑地方看起来一千字不到就没了。

于是决定这次把过程详尽地记录下来,算是充当一个教程吧。因为我很讨厌在跟着教程做的时候,步骤完全一样,却出来不一样的结果,所以我会写得很详细,务求将所有的坑都踩一遍,让更多想搭博客的人少走点弯路。


我应该会在整篇东西完结之后再创建在 Github 的 Readme 里也能正常显示的目录。

[TOC]

声明

本篇文章所使用的单词或短语可能并不专业,不接受名词警察的指正,有本事请你自己写一篇更好的。

此外,在编写期间发现哪里不对的话可能会重新编写或更改内容顺序,对于在这之前就跟着做的我不负责任(虽然可能没有人会看……)。

-1 这个仓库的痛苦历程

-1.1 第一次开仓库

我不知道为什么当时我在谷歌直接搜「Github Page教程」,出来的几乎都是使用 Jekyll 的。

教程:

(前略)
echo hello world > "index.html"
git add --all
git commit -m "注释"
git push -u origin master

你的网站就好了嗷。

你看这主页还可以换主题嗷。

然后这教程就没了嗷。

好你🐴了个棒棒锤。

我是不知道这些废人哪里来的勇气写成「教程」,文章末尾还放着一个「赏」字等着别人来打赏。

-1.2 第二次开仓库

是 fork 的 qiubaiying 的仓库,此处先感谢这位愿意将过程写下来并作为教程的好心人。

此外也好久没更新。

我一直对于很久没更新的东西很感伤。

但这样我就完全只是在改别人的东西,还是想从头开始。

-1.3 第三次开仓库(现)

选择使用 Hexo 作为博客引擎。

除了在本地部署时参考了别人较新的教程之外,都是在自己摸索。

0 没有人喜欢但又一定要做的准备工作

0.1 环境安装

以下步骤默认读者使用正常的网络环境。

首先,安装 Node.js

网站上给出的下载有两个,一个是 LTS,另一个是 Current,本着有新用新的想法,我选择 Current 。

然后,安装 Git

最后,你需要拥有一个 Github 帐号,有就不用管,没就去注册。

0.2 新建仓库

在 Github 上,New repository,Repository name 填写 你的ID.github.io,ID 就是前面的 Owner 下面,你能看到的自己的 ID 保持一致。

举例,我的 ID 是 Ceplavia,那么 Repository name 就是 ceplavia.github.io

就像下图这样,这里因为我已经有这个仓库了所以会有红三角警告。

0.3 确保没做错事

在这个项目仓库的 Settings 往下拉拉拉拉拉,能见到 Github Pages,按一下那个 [Choose a theme] ,随意挑一个,然后按 [Select theme] ,会跳转到编辑 index.md ,往下拉到底,按一下 [Commit changes] 。

之后访问你自己的 [ID.github.io] ,能正常看到刚才选择的 theme 网页的话,上面你就没有做错事。

0.4 安装 Hexo

最重要的东西莫过于他。

Hexo 是个引擎,在本地安装后就可以对网站内容进行生成。当你满意之后,就可以部署到仓库里,并向别人展示。与我第二次搭建时 fork 别人的不同,那种方式是只更改内容,网页生成等 Github ,因为是静态页面,所以需要等。

首先,在你的硬盘上找个你喜欢的位置,建一个空的文件夹,我这里就叫 [_BLOG] 了。

注意,你也可以直接把这文件夹叫 [ID.github.io] ,在下文的指令处会有些区别。

在这个文件夹内右键,按 [Git Bash Here] 。

这是一个方便地呼出 git 指令窗口的方式,当然你也可以用 cmd ,cd 到这里,只要关键指令在环境变量里,就没有差别。

输入npm install hexo-cli -g然后等待安装完成。如果和我一样在用 Win10 ,应该会看到两行 npm warn ,不要管。

输入npm install hexo --save,哦怎么更多 warn 了……仍然不管。

输入hexo -v看看,出来一大堆东西的版本号就对了。

0.5 小结

在 0.3 里,其实只有你没往仓库里 Commit 过任何东西时,按下 [Select theme] 后才会跳转到编辑 index.md 这里,否则都是后台直接修改 _config.yml 里的 theme 设定。但这不重要。

1.本地部署

1.1 真的开始部署了

你没有关掉那个黑底白字的窗口对吧?以后指令几乎都在这输入。

输入hexo init ID.github.io,这样会在你之前创建的空文件夹内,再创建一个叫 ID.github.io 的文件夹,里面就是你的博客本体。

从这里开始,本文所指 ID 都是你自己的 Github ID 。

如果你之前创建的空文件夹就叫这个,那么你需要输入的是hexo init,这样会在当前文件夹 init 你的博客,但我推荐前者。因为这个 [_BLOG] 内你还可以放点别的东西。

完成之后,应该会见到

INFO  Start blogging with Hexo

接下来再输入npm install,这个步骤会补充上一些必要的组件。

这步其实也是我在其它人的教程上看来的,但实际是补充什么组件我就不知道了。但为了不出问题还是照做的好。

1.2 在本地开启服务器测试

这一步是之后经常要做的,所以我会建议把指令记下来。

这一步的目的是检测 1.1 有没有做错什么。

输入hexo g生成静态网页。

输入hexo s开启本地服务器。

之后在浏览器上访问 localhost:4000 ,就可以看到之前部署出来的网站了。

如果和我一样,在空的文件夹内再弄一个文件夹塞博客本体,那么这步注意,需要先 cd 进 ID.github.io 这个文件夹再输入上面的两行命令。

打开之后能看到一篇自动生成的文章,上面写着命令的用法。

g 就是 generate,s 就是 server,很好记。

测试完了别忘在 cmd 窗口内按 Ctrl+C,把本地服务器停下来。

1.3 部署到 Github 的参数

博客要部署到我们刚才创建的 Github 仓库里,需要先设置些东西。

git config --global user.name "你的ID"
git config --global user.email "你的邮箱"

上面这里该填写的是你的 Github 账户信息。邮箱也是 Github 的注册邮箱。双引号要留着,别删了。

使用密码连接很明显有弊病,于是要用的是 SSH key 。

ssh-keygen -t rsa -C "你的邮箱"

输入后先会问你要在哪里保存这对 key 。默认是在C:\Users\你的电脑帐号\.ssh 下(Win 10)。默认情况下按回车即可,之后会问你是否再需要密码来保护这对 key ,看个人喜好。

如果这个目录里原本就有你的其它 key ,那么你应该对这东西非常熟悉,不需要多说明了。

eval "$(ssh-agent -s)",这步是把密钥添加到 ssh-agent。

ssh-add ~/.ssh/id_rsa,这步是添加生成的 SSH key 到 ssh-agent 。如果你前面使用了密码保护这对 key,这步会需要你输入密码。

回到 Github 网站,点你的头像,Settings-SSH and GPG keys,先按 [New SSH keys] 新建一对,Title 随意写,以后能记住他就行。

再找到 C:\Users\你的电脑帐号\.ssh 这里,找到 id_rsa.pub ,用 Notepad++ (当然你用其它也行) 打开,把里面的内容复制到 Key 那栏,然后按 [Add SSH key] 。

再回到 cmd 窗口 ,输入 ssh -T git@github.com,应该能见到一句 Hi! 信息。

每一次用 key 连接到不同的地方到会问你要不要添加到 known hosts ,输入 yes 就行了。

这个 Hi 后面能看到你的 ID ,就代表这一步没出问题。

1.4 修改博客配置

终于回到博客上了?

打开博客里那堆文件中的 _config.yml ,往下拉到最后一行,应该是只有

deploy:
  type:

而且都是空的。

我们把他修改一下,变成

deploy:
  type: git
  repository: https://github.com/你ID/还是你ID.github.io
  branch: master

这里设定了将内容推到 master 分支。

这里是第一次修改 _config.yml (无论是博客的还是主题的),注意类似「type: git」这样的参数,冒号后面必定要有一个空格,否则在hexo g的时候就会报错。切记:修改任何配置都注意好这个。

1.5 写一篇试试

hexo new post "文章标题",一样,双引号留着,之后就可以在 .\source\_posts 里看到除了 hello-world.md 之外的另一个 md,就是你刚刚创建的新 post 。

其实你也可以自己在 _posts 文件夹下自己创建一个 md 文件,但,开头的一些参数就要自己写了,还是不要偷懒了吧。

两个「---」中间的是这个 md 文件的参数,包括时间,分类,标签等。(分类和标签见 3.1.2 的部分)最后那个「---」下面是就可以写的正文了,我先随便乱写了一句。

开头里的date: 后面没写时间的话,就默认使用文件的修改日期来当发布时间,例如 hello-world.md 就是这样。

这里和前面一样,hexo ghexo s,再在本地浏览器上看看是不是多了一篇文章。

没有问题之后, Ctrl+C 把服务器停掉,hexo d上传到 github 上。

等上传完毕后,你的仓库页面应该能看到多出来不少文件,以及直接访问 [ID.github.io] 也能看到内容了。

1.5.1 插图

解释起来比较复杂,总之先……

npm install hexo-asset-image --save

之后找到博客 _config.yml 里的 post_asset_folder ,在约40行,把 false 改成 true。

这样之后每篇文章都会有一个同名的文件夹,在里面可以放置图片。之后直接使用 markdown 的语法引用即可。就像引用本地图片一样。

以上这段话,原本是希望在撰写文章时能比较方便地使用 md 的 ![]() 语句来引用图片,这样就可以在 md 编辑器(例如 typora)里方便以所见即所得的方式来编辑文章,并且在部署后图片也正常载入。

因为这个语句在 Hexo 里是不认的,而我们使用 Hexo 的语句的话又没有办法实现所见即所得。

要实现这个想法的话,无论你怎么去使用搜索引擎,你一定会搜索到 Hexo-Asset-Image 这个东西。

这是个 Hexo 插件,是将 md 语句在生成网页的时候转换成让 Hexo 可以调用图片的语句的插件,但,有 Bug ,很严重的 Bug,根本不能用。

而且不同教程,包括官方 Github 页面里的 Usage ,图片调用方法都不同。

插件太烂,原本想弄个超链接过去的,算了吧。

说第二次,根本不能用。再说第三次,根本不能用。

所以我真的很讨厌国内这些烂教程。

以下再重新说说文章里怎么插入图片。

首先,Hexo 可以直接引用 .\ID.github.io\source\_posts\ 下的图片,也就是说,你可以专门创建一个文件夹来装所有图,但,这容易搞混。这样无论是自己整理,还是图片引用,文章多了之后都会很复杂。

Hexo 有一个功能,允许每个 md 文件都有自己的文件夹来装资源(包括图片、音频等),而我建议启用这个功能。

首先找到博客的 _config.yml,在约 40 行处:

post_asset_folder ,这一行改成 true。

修改这项之后,以后在使用hexo new post "标题"的时候也会自动创建一个与文章文件同名的文件夹,里面就是放 asset 用的。

对于已有的文章,创建一个同名的文件夹就可以了。

例如文章的本体是「一篇文章.md」,那只要创建一个文件夹叫「一篇文章」就行。

引用图片时,使用:

{% asset_img 图片文件名 图片标题 %}

例如:

{% asset_img test.png This is a test png. %}

这里要注意一下格式,主要是注意一下空格,大括号+百分比号是前后,中间都有空格。

第一个参数 asset_img 表示这是个图片;

第二个参数是文件夹里图片的名字,不需要再写什么相对路径或是绝对路径,但别忘了扩展名;

第三个参数是图片的标题,具体表现为鼠标在图片上悬停时出来的小白框,可以带空格。

1.5.2 插入音频

要插入音频的话,去搜教程出来的基本上都是教如何用外链,但,有时有些音频是不会在什么云音乐上出现的。况且使用外链也担心不稳定,万一别人哪天服务关闭了自己的文章岂不是就没了引用?

图片可以使用 Hexo 提供的指令,音频就没办法了,那就写通用的 Html 吧。

插入很简单,音频文件和图片一样,放在这篇文章同名的文件夹内,然后写上这行

<audio controls src="假设这是个文件名.mp3"></audio>

就好啦。

但是,引用时请注意当地法例,若没有版权,请不要随便乱传音频文件哦。

如果和我一样使用 Typora 编辑 md 文件,这个播放框在 Typora 里是播不了的,但 deploy 后可以播。也有另一个写法两边都能播,但没必要,而且这写法很旧。

当然也可以引用国内一些云音乐的源了。以网易云音乐为例,首先打开这首音乐的页面(客户端不行,客户端的话请右键歌曲按复制链接再在浏览器打开),然后点唱片图片下面的「生成外链播放器」,复制那段 HTML 代码贴到文章里就行。

当然,上面也有一些东西可以调整,这个就看个人喜好啦。

1.5.3 写作注意事项

  1. 如果你的标题带半角冒号「:」,请记得在文章的 md 文件里把标题用半角的双引号「""」括起来。
  2. 可以通过在文章中添加<!--more-->来让文章只显示一部分。剩下的部分会变成一个「点击阅读全文」的按钮。

1.6 草稿

有可能在写的时候马上要出去,那么还不想发布的文章当然是草稿了。

如果是已经建立的文章,把它移动到 source 目录下的 _drafts 就行。

如果一开始就要写一篇很庞大的文章,又怎么创建草稿呢?

hexo new draft "标题"

要把这篇草稿正式发布的话,可以使用

hexo p "标题"

P for Publish

标题不用带md哦,效果和你自己把文件从 _drafts 移动到 _posts 是一样的。

1.7 小结

基本的写文章方式有了,接下来就应该是一些额外的自定义设定了。

2 第三方服务

2.0 自己的域名

首先你需要一个域名,在各大 XX 云都可以买到,这里我就不说怎么买了。

回到 Github 仓库的设置,还记得前面提到过选主题的地方吗?就在那下面。

就像这样,然后到你的域名服务商处,添加一条 CNAME 类型的解析,将 www 及 @ 指向你的 ID.github.io ,就可以透过你自己的域名访问这个网站了。

当然,要是你自己想用二级域名,也行。

别忘了,还要在 source 目录下创建一个 CNAME 文件,里面写上你的域名(不带http)。

2.0.1 关于域名的小问题

我知道可能有些人像我一样,原本只是在用电脑乱杀时间,但看到了一些很感兴趣的东西。既然在 Github Page 上用 Hexo 部署博客又不要钱,就跟着做咯。

但,上面这一小节介绍的是购买域名,所以这段我才放在这里,而不是放在文章开头。

所以有人可能会跳过这一段要花钱的部分,先去做下面的步骤。

请注意,一些步骤需要你填写博客的网址,在不使用自己域名的情况下,你可以就这样填写 ID.github.io ,但后面你可能又想弄个自己的域名了,那就请务必记得在各个地方将网址修改过来。

包括博客里的设置文件,各种插件服务开通时要填写的网址等。

最好是自己使用域名绑定过什么服务,就开个 txt 记下来。

2.1 NEXT THEME

Hexo 的主题给我的感觉就是,它几乎接管了博客的所有设置。甚至能把一些设置都放到主题里的设置文件里,因此用一个好的主题是很有必要的。虽然原本我很不想用,但因为集成了很多教程,所以其实用起来也是很方便的。

比方说,Google Analytics ,根据 google 搜来的教程,在博客本体的 _config.yml 是可以直接设置的。

可以个屁可以。

几十个教程全都说可以。

可以个屁可以。(重申)

还是在那个黑底白字的窗口,首先 cd 到博客里的 themes 文件夹下,或是在这里直接 git bash here ,都可以。

git clone https://github.com/theme-next/hexo-theme-next.git

以后要更新这个主题的话,就 cd 到主题的根目录,用git pull

但是注意应该是会和原有的配置冲突,我忘了要 merge 的话是什么个操作了……

git clone 后的主题文件夹名字是 hexo-theme-next,把它改成 next 。

然后找到博客的 _config.yml ,找到:

theme: landscape

改成

theme: next 

即可。

2.X 的部分都默认使用了 NEXT 主题。

2.2 留言系统

2.2.1 landscape主题

我使用的是 Disqus

创建帐号的部分我就不废话了。

在主页按 Get Started ,之后按 I want to install Disqus on my site 。

中间的 Website Name 是自订的,并不是网站域名,你自己记得就好,例如说 xxxblog 之类的。

但是请记住这个,稍后配置要用。

这里的 Website Name 就是稍后配置要用到的 Shortname 。

Disqus 默认会把 Website Name 直接作为 Shortname 。

但,如果和别人的 Shortname 重复, Disqus 会稍稍修改一下这个 Shortname ,所以在你配置前务必回到 Disqus 的管理页面来查看一下你网站的 Shortname 再进行配置。

Catagory 和 Language 就自己选吧,好了之后按下面的 Create Site 。

之后是让你选 plan ,往下拉,有免费的。

在那之后,直接按左上角的 Configure Disqus ,第二步不用管。

在这个页面中,填写 Website URL ,注意这个 URL 要带 https:// ,我的截图里没有,下一步就会被警告。

之后就完成了 Disqus 帐号的配置部分。

Hexo 默认的主题是 landscape ,这个主题是自带有 Disqus 的。但是,如果你按照 Google 上说的去改 _config.yml ,是不会出现 Disqus 的(嘴角抽动)。

Google 来的狗屁几乎全是添加:(这是错的,不要做)

disqus: 
enable: true
shortname: 你自己的 shortname
count: false

但这个不可用。

在 .\themes\landscape\layout\_partial\article.ejs 里可以看到,读的参数根本就是 config.disqus_shortname 。

直至这里我还在认为这些插件的参数应该填在博客的 _config.yml 里,但实际上是应该到主题里的 _config.yml 去填的。

于是我们要做的是:

添加:

# Disqus Comment         <-这行是为了方便将参数分开,写的注释
disqus_shortname: 你自己的shortname

并在前面找到第 16 行附近的 url: (如果你还没怎么大改这个配置文件的话),改成

url: https://ID.github.io

这样应该就可以正确启用 Disqus 了 。

如果你仍然想要使用 landscape 这个主题的话,就这么做。但我真的推荐使用 Next 主题。

因为只写 shortname 的配置我记得好像是缺点什么功能的。

2.2.2 NEXT 主题

以上是我仍然使用 landscape 主题时写的一个方法,后来改为使用了 Next 主题,但我也懒得细分了,前面的步骤直到完成 Disqus 的帐号配置为止,是要做的,但改博客设置项的地方不同。

NEXT 主题的插件设置在主题的 _config.yml 里,且已预留了设置项,位置在大约 618 行附近:

disqus:
  enable: true
  shortname: 给我去写你自己的 shortname !
  count: true
  lazyload: false

很简单的修改就可以启用了。

2.3 Google Analytics

要知道每天有多少人来看过的话,当然要用统计了。而我选择使用 Google Analytics ,也有人选择使用 Cloudflare CDN 的统计,我十分喜欢 Google 的服务,所以就用 Google 的了。

先到 Google Analytics 这里新增资源,类型选择互联网。

资源设定要填写的东西是网站名称、网站网址、产业类别、报表时区。

网站名称是让你自己区分用的,可以写「我的博客」之类的。网站网址就要好好填。产业类别和报表时区就按自己的来选。

域名有变更的话记得回来改网址。

之后你会得到一个 UA-xxxxxxxx-x ,还是找到主题里的 _config.yml ,在约 749 行,填写 tracking_id 就行。

2.4 Google Adsense

2.4.1 必要的提醒

前情提要:

如果和我一样以前用过 Blogspot 的 Google Adsense 服务,有可能你会和我一样打开 Google Adsense 时提示以前的博客没东西,让修正,之类的。

而我是不再需要将 Google Adsense 连接去那个博客,在帐户设定里取消帐户即可。如果是灰色的,等一晚上。

其实 Google Adsense 在网上的教程不少,我无聊得再写一次的原因是,几乎所有教程都把路径搞错了而且不好好说网页布局修改的问题 —— 还是那样,不说人话。

申请前注意:

Google Adsense 对网站内容是有要求的。如果你的网站空荡荡或者博文太少,通常不会通过。一个说法是必须要有五篇以上,也有人说要十篇。然后就是要运营半年以上。不过这都是别人提到的,至于能不能过还是要看 Google 。

点击广告注意:

你不能点击自己的广告。

此外,广告被同一 IP 段大量点击的话也可能会被封禁。

以身试法是很大的作死行为,不要这样做,不要怀疑 Google 的检测能力。

这里引用一下 darylliu 这位在他博客里提到的一些 Google 判断你是否在广告点击上作弊的方式。

  1. 作弊广告点击者的IP地址与你Adsense账户登录IP地址相同
  2. 作弊广告点击的CTR数据太高
  3. 作弊广告点击者的IP地址来自同一个地理区域
  4. 根据Cookies判断作弊Adsense广告点击
  5. 作弊广告点击者页面停留时间太短
  6. 直接访问者的广告点击率过高
  7. 流量小但广告点击率高
  8. 在网页上用文字提示请求鼓动点击广告

2.4.2 申请

首先打开 Google Adsense 的主页,注册应该是不用教的了,填写网址,邮箱地址,之后到登录 Google 帐号都不是什么难的操作。

直到他给你一段东西,让你操作的时候。那段东西看起来像这样:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "嗯啊嗯啊嗯啊嗯啊",
    enable_page_level_ads: true
  });
</script>

首先找到 ID.github.io\themes\next\layout\_partials\head 这个文件夹,打开里面的 head.swig 。

然后把 Google Adsense 给的那一段东西,贴到这个文件的最后面。保存后把网站hexo ghexo d

之后回到 Google Adsense 的网站,把那个「我已将程式码贴进网站中」(繁中)打上勾,按完成,敲碗等待审核。

像这样,敲碗即可。

我是不到一天就过审了。

注意,只有收到邮件(或者你自己一直去网站上查……)通知过审之后,才能进行后面的步骤。

2.4.3 自动广告

进入 Google Adsense 的首页,首先它会提示你设定自动广告。具体方式可以查看它给的提示。

顺带一提,菜单里可以看到,具体的广告方式就包含「自动广告」和「广告单元」。

我的感觉是,这个比较像打开网页时浮在上面的广告。这个也不需要特别去设置,还记得 2.4.2 里的那段代码吗?这段其实就是自动广告的代码。也就是说,过审之后只要在 Google Adsense 后台设置启用自动广告,其它什么都不用做,就会开始投放广告了。

过了几天之后,这个广告出现的位置是首页查看文章时,随机出现在文章中。

2.4.4 广告单元

到这里开始我就没有别人的教程能参考了(伤心)。

我推测广告单元的方式应该是最近发生了变更,我这里出现了这三种。

我试着创建了一个多媒体广告。

他会给出一段东西,先到ID.github.io\themes\next\layout\_macro这里来,创建一个 google_adsense.swig ,把给出的「广告单元程式码」放到这里来。

接下来,需要决定广告出现在哪里。打开同目录下的 post.swig ,我决定了放在文章本体的最后,也就是评论框上方。

文件里在 250 行附近有一个很明显的「END POST BODY」,可以看到这里的上方就是文章结尾了,于是在这里引用 google_adsense.swig,大概像这样:

...
        {{ post.content }}
      {%- endif %}
	  {% include 'google_adsense.swig' %}
    </div>

    {#####################}
    {### END POST BODY ###}
    {#####################}

之后就 deploy 试试吧。

emmmm,这样的话在首页的每篇文章结尾都会有广告,而点进去也会有。

可能会有人喜欢这种丧心病狂式的广告投放,所以这段我就没有删了。

我所想要的是每篇文章打开之后结尾有,于是干脆插评论框的文件里好了。

我直接把整段代码塞到了 ceplavia.github.io\themes\next\layout\_partials 里的 comments.swig 的结尾。对,结尾,不用塞在什么语句块里。

没有另外写成一个 google_adsense.swig 来引用,直接整段塞进去也可以。

这样就比较符合我的预期了。不过横幅的高度和示例里的差得有点远,以后我可能会考虑换成正方形的。

3 个性化

3.1 新的页面

3.1.1 关于 (about) 页面

好的博客怎么少得了关于页面,而要添加这么一个页面也不难。

hexo new page "about"

之后就会在 .\ID.github.io\source\about 里见到 index.md。

这里也是可以引用图片和音频的哦,记得前面的方式吗?

不仅是 about 页面,其它的都可以哦。

而控制有什么页面要显示的设定则是在主题的 _config.yml 里,在约 152 行附近就能看到:

menu:
  home: / || home
  archives: /archives/ || archive
  tags: /tags/ || tags
  categories: /categories/ || th
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  about: /about/ || user

你的设置可能和这里不同,在改这部分的时候我已经启了部分页面,并调换了一下顺序。总之 menu 的设置就大概是长这个样子。

这里的规则应该是:

名称: /引用的目录/ || 图标名称

名称可以自己写,引用目录就是……就是 source 文件夹里的目录。

图标名称可以在 Font Awesome 里看。

应该是还能再自己添加页面的。

下面是不同页面的配置,在没有修改时默认只启用 home 和 archives ,只要把:

#about: /about/ || user

这行的 # 号去除即可。

这里的顺序和网页上显示的顺序是一样的,默认 about 在 home 和 archives 的中间,如果你跟我一样喜欢把 about 放在最后,只要简单地把 about 移到行尾就行。

3.1.2 分类 (categories) 和标签 (tags)

分类和标签页面与关于页面有些许差别,关于页面本质上仍然是显示文字,与文章一样。

分类和标签就不是这样了,会显示已有的分类和标签,并不是单纯地显示文字。但新增页面的过程仍然是一样的。

hexo new page "categories"
hexo new page "tags"

之后,就会像关于页面那样,在 .\ID.github.io\source 下出现两个新的文件夹,打开之后能看到有 index.md ,要做的是在两个 index.md 的顶部分别对应加上 type 参数。

分别是:

type: categories
type: tags

要分别添加到哪个文件夹里的 index.md 应该很好理解吧?在 date 下面新开一行写上就行。

最后,回到主题的 _config.yml 里,依然是 menu 这个设置项(在约152行),把 categories 和 tags 那两行前面的 # 号去掉就行。

那么怎么给文章添加分类和标签呢?

还记得文章的 md 文件开头有两行「---」吗?我们就在这两行「---」之间添加东西。

添加分类的话像这样:

categories:
  - 分类1

看到了分类1,你是不是想到了可以有分类2,分类3?

是不是想像这样写?

categories: 
  - 分类1
  - 分类2

不行哦,这样写的话分类 2 是隶属于分类 1 的子分类。

要这样写:

categories: 
  - [分类1, 分类2]

而添加标签的话则是:

tags: 
  - 标签1
  - 标签2

这样就可以了。

3.2 模板

在进行了 3.1.2 的设置之后,你应该意识到每篇文章都应该包含 categories 和 tags 参数。

可以修改模板,这样每次新建的文章就都有留空的两个参数等着你来填了。

打开 scaffolds 文件夹,里面有 3 个 md ,我们关心的是文章,所以打开 post.md ,可以看到原本就已经有 tags 参数了,按自己需求加上 categories 即可。

我最终修改成了这样:

---
title: {{ title }}
date: {{ date }}
categories: 
  - 
tags:
  -  
---

3.3 文章文件名格式

文章多了之后,打开 _posts 想找一篇特定的文章就很难了,虽然文章头写着时间,但要找起来会累人。这个时候可以把文章文件名的默认标题改掉。

在博客本体的 _config.yml ,约 34 行,修改 new_post_name 就行,默认是 :title.md 。

:title 当然就是指标题了。

这里我就要说一下 hexo 关于 _config.yml 的官方文档了。

这里改标题格式要你教?

「:title.md # File name of new posts」

原文这英语注释我自己是看不懂?嗯?

况且官方文档找半天都没看到这格式能添加其它什么变量。就写一个 :title 我还能玩出花么……

实际上这里是可以添加日期的。

变量 注释
:title 标题(空格会替换成「-」)
:year 年份啦,4位数的
:month 月份,两位数,7月就是07
:i_month 月份,没有0,7月就是7
:day 日子,两位数,7号就是07
:i_day 日子,没有0,7号就是7

我使用的格式是

:year-:month-:day_:title.md

这样出来的文件名就会是「2019-08-27_文章标题」

反正我这里出来之后日子的部分变成了 undefined ……我肯定哪里做错了什么。

3.4 网站图标

ID.github.io\themes\next\source\images里能看到两个图片,分别是favicon-16x16-next.pngfavicon-32x32-next.png

知道要怎么做了吧 w 。

3.5 友链

在主题里的 _config.yml,设置项是 links: ,可以通过搜索# Blog rolls来定位。

由于前面我也写了不少东西,就不写大概的行数了,用搜索功能定位吧。

这里可以修改 links_title来修改友链上面的标题,而添加友链就像示例的那样:

#Title: http://example.com

很简单吧。

4. 警告,警告,警告!

这个部分用来写我遇到的坑,虽然不知道有没有人会看,但写下来,也很重要。

一个小忠告,在跟着任何人的教程做任何事之前,最好自己也把步骤写下来,不要嫌麻烦,在出现了什么坏事之后这就是最好的帮助文件。当然用版本管理会更简单,但我不喜欢这东西。

4.1 千万不要去动Permalink

这是一个在博客本体的 _config.yml 里的一项设置。这个可以改动文章的链接。

默认应该是 :year/:month/:day/:title/ ,千万不要去动!至于为什么:

注意前面的三个参数是为了区分文章的(区分什么我也不知道)。我曾经试过把前面的去掉,只留 :title/ ,就出事了,每篇文章的格式都变掉了。

比方说,一篇文章链接应该是 xxx.com/2019/09/15/标题标题 ,在没有前面的部分之后,会永久变成 xxx.com/2019/09/15/5_标题标题 ,多出来日期的最后一位和一个下划线。

啊我他🐴就是不知道为什么。总之这是永久变更的,会逼死强迫症,我就因为这样重置了几次整个博客目录,很庆幸我把整个过程都写了下来,否则我真是没法修,因为碰过什么地方我绝对是记不清的。

4.2 慎用 HTML 嵌入

实际上我也不知道在 markdown 里插入 HTML 的语句是不是叫嵌入,我就先这么写了。

我在我博客的 /about 页面用过一些 HTML 语句。例如 <center></center> ,因为 markdown 没有置中嘛。

但就弄出来了一个 Bug ,就是这个页面只有底部的 Google AD 和 「Powered by Hexo」 这部分会载入,其它部分完全空白。

要是在这个页面按 F12 的话,能看到一条红色报错……我忘记截图了……

但页面内容是都载入了的,在该有文字的地方双击甚至能选中文字。但他就是一片白。

如果发现有页面一片白,请注意是否写了一些 HTML 语句。

4.3 东西可以乱吃,插件不要乱装

插件不要乱装,真的。

昨天我忘了是在搞一个什么功能了,总之跟着一个 17 年的教程,让我装插件,装完了之后其实多数插件都会有很多依赖,而那教程让我来一句 npm audit fix ,也就是更新装上的插件的依赖。

啊不要乱装,再次重申。

我完全没有发现,它竟然把 hexo-asset-image 这个垃圾给我装回来了,虽说被我发现了,但这也是一个要注意的地方。

4.4 更多想要的功能

事实上能搜到的不少美化教程之类的,都是 17 年前后的,比方说我之前试着在文章末尾添加一个版权声明,也就是 license 。

按照搜来的一个鬼教程,是要自己去改网页 layout 的,前后涉及超过 3 个文件。

但后来我发现……这东西在 Next 主题的设置里就有,搜 license 搜到位置之后,把 post: 设置成 post: true 就好了。

很多想要的功能事实上在主题里都已经自带,不再需要自己修改太多的东西。


<- 工事中 工事中 工事中 工事中 工事中 工事中 工事中 工事中 工事中 ->>
<- CEPLAVIA LINE DO NOT CROSS CEPLAVIA LINE DO NOT CROSS ->
You can’t perform that action at this time.