给hexo的博客添加一个网格背景, 此处不想使用图片, 而是直接使用css来实现,效果图如下:

css文件内容如下(文件名background.css):

1
2
3
4
5
body {
background:white;
background-image:linear-gradient(90deg,rgba(241,243,244,1) 10%,transparent 0),linear-gradient(rgba(241,243,244,1) 10%,transparent 0);
background-size:15px 15px;
}

为了各个hexo主题都能通用, 此处使用hexo提供的注入功能将css注入到博客中。

在博客根目录下新建一个scripts文件夹, 然后在该文件下新建一个js文件(命名随便都行),复制如下代码:

1
hexo.extend.injector.register('head_end','<link rel="stylesheet" type="text/css" href="/css/background.css">','default');

其中,background.css文件就是上文提到的css文件, 位于博客根目录的source/css文件夹,注意此处一定要在博客根目录的source文件夹下创建,如果在其他文件夹下,可能识别不到或被主题覆盖。

同理, 其他想脱离特定主题(有些主题提供了自定义css、js的功能, 但是不通用,换了一个主题就无法使用)而实现注入css、js的功能, 都可以使用这种方法来实现。

具体hexo的注入功能查阅hexo的文档即可,地址:https://hexo.io/zh-cn/api/injector.html