github编辑

Hexo 主题 Sakura 美化

Hexo 主题 Sakura 美化

文章很长,做好心里准备……

接上次的文章

闲着也是闲着,不如搭个免费的博客玩玩arrow-up-right

0、前言

做 Hexo 的美化工作,主要是:

  • 修改布局文件(HTML 模板 ejs 文件),添加功能

  • 添加 CSS

还是得对 HTML、CSS、JavaScript 有一定的了解

目录和文件分析

现在我们来分析一下 themes/Sakura 目录结构和文件

首先分析下目录,主要包括以下几个

代码插入位置

再接着就是需要知道我们插入的文件和代码应该放到哪里

一般来说我们的 js、css 代码一般以文件形式存放到 js、css 文件夹中,接着再引入 HTML 代码中,引入位置一般在 <head></head> 标签中,当然啦 css、js 位置也不是固定的,你也可以直接放到 HTML 页面结构的中央和结尾,也就是 <body></body> 之间或者 </body> 之后、</head> 之前(推荐 CSS 文件和依赖 JS 放到 </head> 前、其他 JS 文件放到 </body> 前)

具体参考:HTML 中引入 js、css 的三种方式——行内样式、页面中样式、外部文件导入

就对应我们现在要修改的文件中的 _partial 目录下 head.ejs ——这个 <html><head></head> 就在这个文件中

footer.ejs 是底部元素,一般个人、企业版权写在这里,因为一般大部分文件都会引入,因此 js 代码也可以写在这

layout.ejs 这个也是所有页面需要引入的,因为 </body></html> 标签在这里

要是想将功能单独添加到某个页面,那你就找到那个 ejs 文件放到里面就醒了


好了,下面就正式开始添加功能和修改样式了

1、博客原有功能修改

博客原有功能修改主要指的是博客根目录配置文件和主题配置文件的修改

因为大部分的都已经在上次的博客搭建文章中写了

就不多说了吧

不讲了的

主要包括各种页面结构的修改:

  • 首页轮播图

  • 站点图标、头像、赞赏等图片的链接修改

  • 个人化的站点标题、副标题、描述、关键词等

  • 导航栏的修改、添加、删除等

  • 通知的修改

  • startdash 的图片、链接修改

  • 社交链接的修改等

这上面这些应该都是不需要再讲了的

导航栏中的关于

主要是关于>我?这个的修改

这个要修改的文件在 Sakura/source/js 目录下,名字为 botui.js

主要修改 content 后面双引号里的内容,自行修改为自己的就行

导航栏中的客户端

这个可以使用 Fusion App 把你自己的博客封装成 APP

然后放到蓝奏云上,生成二维码放上来

导航栏中的 RSS

根目录下的配置文件中已经有了

这些代码

因此我们只需要安装好插件就行了

当然啦,如果本来就能显示内容,那么就不需要安装了

每个页面中的顶部图片

就比如关于>主题这个页面

我们进入根目录下,再进入 source 目录找到 theme-sakura,进入该目录点击 index.md,修改 photos 后面的内容,改为你想要的图片链接

文章上面和首页文章列表的图片

也是修改的你新建的文章中的 photos 后面的图片链接

这些都是这个主题支持的内容,在上篇文章中写过的文章模板

清单下的番组

这个是在 source 下 bangumi 下的 index.md 中修改的

清单下的歌单和左下角悬浮歌单

主要是修改你的 id,歌单 id 的获取方式:

进入网易云网页版arrow-up-right登录账号,选择一个歌单打开

浏览器的链接将会显示 id,就最后一个字段,把那些数字复制到下面就行

https://music.163.com/?from=infinity#/playlist?id=2162711186

清单下的歌单文件是 source/music/index.md

悬浮音乐的代码在主题配置文件中

友链添加

友链修改文件在 source/links/index.md

不需要修改 layout 目录下文件的应该就这些了

接下来就直接按点添加功能和美化了

2、添加标题恶搞

默认的是离开时候还是现实自己的文字标题

添加之后离开和回到这个页面时显示

挺多的 js 都直接集合到我的 cdn 中了,大部分都是网上到处搜查的

为了达到上述效果,我们可以在 head.ejs 或者 footer.ejs 中加入代码

例如加入到 head.ejs 的该位置

加入之后刷新就能生效了

3、添加鼠标单击特效

单击特效有很多种,这里给出三个吧

现在我们把这个代码放到 layout.ejs</body> 标签前

可以分别添加一种,也可以多种混合,但是三种一起使用感觉效果不太好

下面是前两者结合的效果:

最后一种:

4、鼠标滑过的特效

这个有很多个,这里展示一个

把代码插入到 layout.ejs

效果如下:

5、背景显示飘动的彩带

在需要的页面添加,我们还是在所有页面都加上,layout.ejs中加入代码

6、背景添加动态线条,随鼠标动

仍是 layout.ejs

7、樱花飘落或雪花飘落

仍是 layout.ejs

樱花飘落:

雪花飘落:

选择一个就行了

8、禁用一些按键

为了阻止某些使用 F12、Ctrl+Alt+I 调用开发者选项的用户

还有禁用了鼠标右键,可以开启禁用鼠标左键拖动选择文字

9、添加画板娘

这次不用插件来添加,直接引入js代码

仓库链接在这:live2d-widgetarrow-up-right

10、添加前往 GitHub 的彩带

前往 GitHub Ribbonsarrow-up-right

挑选样式之后,复制相应的代码,粘贴到合适的地方

11、加入预加载

Sakura 主题集成了图片懒加载,可是页面放到 GitHub 加载还是很慢,matery 主题就加入了预加载,从那里得到灵感,因此我们加入预加载

还是在 layout.ejs 中添加

官网在这:预加载arrow-up-right

12、添加计数

主要使用的是不蒜子和 LeanCloud

LeanCloud 我使用起来并不理想,因此不讲,想要了解自己去官网看

不蒜子的:

再进入不蒜子官网查看访问量 pv、用户访问量 uv使用

13、添加一言 API、诗词

今日诗词arrow-up-right提供了诗词的 API

我们将这个诗词放到以前的描述那里,社交图标的上方

修改 headertop.ejs,找到下面的代码

一言 API 的可以前往这个网址查看使用:

一言开发者中心arrow-up-right

正好通知也没有啥用,把他换掉

进入 index.ejs,查找 <%= theme.notice%>,将其替换为下面的

14、添加底部的网站运行时间

footer.ejs 选择合适位置添加代码

15、添加底部动态滚动文字

16、加入天气插件

前往

中国天气arrow-up-right

这个网址查看详情

可以选用小视图,添加到 link.ejs

17、顶部加载条

这个 sakura 有,但是想记录一下

head 中加入

18、修改鼠标样式

style.css 中添加,sakura 已有,可不管,当然啦,也可以去找一下其他好看的图标

19、评论系统

sakura 自带的系统为 valine,我们可以自行替换成其他的

就比如来必力,前往

来必力官网arrow-up-right

注册登录后,点击菜单栏的【安装】,直接点击【现在安装】

前往管理页,点击左边的【代码管理】

data-uid 后面的双引号中的内容剪切出来

然后到主题配置文件下修改,找到最下面的 valine

将 valine 改成 false,添加最后两行

接着把下面的代码复制到 comment.ejs 中

20、在线联系

DaoVoice 在线联系

前往网站

DaoVoicearrow-up-right

可以使用GitHub或者微信登录,也可以前往

这里注册arrow-up-right

邀请码填:da070d64

进入之后点击应用设置,再点击安装到网站

再将第一个代码复制到 </head> 之前,将下面两个复制到 layout.ejs

21、添加优美的标签页

这个标签页和分类页提取自 matery,不得不说 matery 真的很漂亮

首先我们要创建几个文件,文件所在目录如下

也就是 tags.ejs 放在 layout 根目录下,下面两个文件放在 layout 子目录 _widget

修改 tags.ejs

修改 _widget/tag-cloud.ejs

修改 _widget/tag-wordcloud.ejs

将这段代码复制到 style.css 末尾

使用命令hexo new page "tags",修改博客根目录下 source/tags/index.md

http://localhost:4000/tagsarrow-up-right 查看页面

22、添加优美的分类页

接着创建几个文件,文件所在目录如下

也就是 categories.ejs 放在 layout 根目录下,下面两个文件放在 layout 子目录 _widget

添加代码

categories.ejs

category-cloud.ejs

category-radar.ejs

接着用命令 hexo new page "categories" 创建分类页

修改博客根目录下 source/categories/index.md

http://localhost:4000/categoriesarrow-up-right

查看

接着就是把这两个页面放到导航栏上面去

修改主题配置文件,将这两行代码放到留言板之前

23、已经集成的一些插件

emoji 表情:

hexo-filter-github-emojisarrow-up-right

正常插件安装版画板娘:

hexo-helper-live2darrow-up-right

图片懒加载(sakura 已经有了,但不是这种方式):

hexo-lazyload-imagearrow-up-right

hexo-lazyload-image-enhancearrow-up-right

字数统计(好像没装):

hexo-wordcountarrow-up-right

fancybox:

hexo-tag-fancybox_imgarrow-up-right

bilibili:

hexo-tag-biliarrow-up-right

24、文章末尾版权信息添加

首先我们在 _partial 目录下新建文件 article_copyright.ejs

需要文章字数的,一定要先安装字数统计插件,上面列出了,不用就把那行注释掉

接着将下面的代码

复制到 common-article.ejs 的这个位置

将 CSS 代码复制到 style.css 中

25、添加404页面

在博客根目录的 source 目录下新建 404.html

随便找个模板,在开头加入代码

例如

部署到 GitHub 之后,访问不存在的页面就会跳出来了

26、绑定自定义域名

在博客根目录下的 source 目录下新建 CNAME 文件,如果主题 source 目录下有这个文件请删除

修改 CNAME 文件,内容为你的域名,例如我的

接着去 GitHub pages 更改域名,开启 SSL

前往阿里云的的域名解析页面添加 CANME 解析

@ --> 用户名.github.io

之后就可以以新的域名访问了 https://wallleap.cnarrow-up-right

27、网站收录

主要是向各大搜索引擎提交链接

谷歌收录

360站长平台arrow-up-right

百度搜索资源平台arrow-up-right

百度的需要注意一下,由于 GitHub 将百度封了,因此你需要把博客双线部署到 gitlab 或 coding 才能收录

搜狗站长平台arrow-up-right

28、网站分析

百度统计

前往百度统计官网

Baidu统计arrow-up-right

以百度账号登录后,点击【管理】,在【网站列表】中新增网站

获取代码,将代码复制到 </head> 标签前,进行代码检测

以后就可以查看访问情况了

cnzz

点击

友盟+arrow-up-right

前往,注册登录后,添加站点

根据自己喜好获取代码

粘贴到 </body>

之后就可以点击查看信息了

29、小技巧

博客备份

有一个博客备份插件

hexo-git-backuparrow-up-right

能够传到 backup 分支

我们还可以把整个博客文件夹上传到 GitHub 私有仓库

本地预览

使用命令换个端口预览 hexo s -p 5000

也可以添加下列代码到博客配置文件中,使用 hexo s 时将会以 5000 端口运行

快捷命令

alias 设置命令别名,将下面代码复制到 .bashrc 文件中

以后输入 hs 命令就可以本地预览、hd 部署、gp 上传到仓库

30、静态资源压缩

博客使用了图片懒加载和预加载虽然加快了一点速度,但访问还是有点慢

那么直接把 html、css、js 代码中的空格去掉,进行压缩

还有压缩一下图片,能够一定程度上缩小 public 文件夹的大小

参考这篇文章:

Hexo博客使用gulp压缩静态资源arrow-up-right

安装全局 gulp

npm install gulp -g

安装插件

问题:如果安装 gulp-imagemin 错误请执行以下语句

博客根目录创建 gulpfile.js

上面文章中有一句在这个版本会报错,已修改

根目录下创建 .babelrc

每次生成静态文件的时候,使用命令 hexo g && gulp 即可,能够压缩几兆的空间


好的呢,这篇文章就到这里啦

这么多,可算是累死我了

再见~

参考文档:

Hexo 博客优化之博客美化系列arrow-up-right

文章来源:https://myblog.wallleap.cn/arrow-up-right 转载请不要删除这段内容

最后更新于