给小破站安排上的小戏法

人生的意义在于折腾

原文来自个人小站:给小破站安排上的小戏法,转载请备注

开始

积灰了许久的小破站,在2021年一月的某一天里,终于被他的主人想起,于是他又开始折腾了起来,前后历时了大半个月 ...

从刚开始为零建站,一路磕磕碰碰走到今天,最该感谢的就是各个开源项目和教程,让本技术渣得到了 Ctrl + CCtrl + V 的机会,话虽说笑如此,但在下深深体会到了开源精神的力量。本破站基于 @Hux@柏荧 的主题上三次修改,显然与前辈们比起来,我唯一的贡献就是把他们的代码搞得乱七八糟了吧 =.=

现就说说一月份中,我给小破站加上了哪些小戏法吧:

Valine 引入

一句话:苦 Gitalk 久矣...

我之前建站时选用的是 Gitalk,其优点就是 Github 全家桶技术,无需额外的平台即可实现无后端存储;缺点嘛,就是其国内速度加载太慢,虽无奈于此,可当时也没遇到其他可替代方案,只能将就着用。

直到某天看到 Valine,惊叹深感:太好看了!在下是很懒的一个人,但还是决定,是时候折腾一下了,效果如下:

Valine

自定义引入了 bilibili 的表情,还加了个 33娘 扑街的背景图~~ 😊😏

后来也因为与 Pjax 的兼容问题,加载不出评论而小折腾了一下。

Valine 现最新的版本美中不足的是不支持QQ昵称,看了下它底层的 api 返回,数据 nick 一栏为空,所以现只能支持QQ头像而已。

引进 Valine 后,意料之外的是,我后来因在其他博主的小站里看到了许多新奇的东西,于是陆陆续续也把它们引(折腾)了进来(所以耗时了大半个月):

Twikoo 和 Waline 尝试

由于 Valine 现版本对 QQ 信息支持的不友好,我也尝试过了 Twikoo 和 Waline,再三衡量,还是继续用回 Valine,主要是 Valine 的生态更好一点,保姆级文档较多。(也说不准哪天 Valine 会失宠,他们还是有机会的 🤭)

Twikoo:

Twikoo

Waline:

image

我可爱的 33娘 肯定不能少,哈哈哈

APlayer 支持

看文章是枯燥的,加点音乐的乐子不香嘛

image

红莲华,一首听着会饿的歌,看过《鬼灭之刃》的小伙伴懂的都懂 = ̄ω ̄=

平时它就安静的呆在小 jio 落里:

image

Pjax

由于 Aplayer 会随着页面切换而重新加载刷新,我引入了 Pjax,一个 jQuery 插件,可以实现页面部分元素的刷新。从此,小破站算是一个伪 SPA 页面了吧~

同时也引入了基于 Pjax 功能扩展的 Nprogress:页面跳转时出现在浏览器顶部的进度条。

相册 fancybox

原本文章中嵌入的图片大小都固定住了,不能随意放大,这就很蛋疼啊,有时候根本看不清好不好。于是乎,fancybox 来了,它来了:

image

现在你点文章中的图片,就可以使用放大和相册功能啦~

看板娘

这个小可爱你没发现嘛?希望这只萌萌哒看板娘, 可以让小破站更有吸引力

image

贴上几篇链接,各位需要的官爷去了解下吧:

友链

撸了个 Friends 页面,欢迎交换友链 ꉂ(ˊᗜˋ)

image

图片懒加载

考虑到 Friends 页面的头像比较多,为了不卡住页面,我引入了 jQuery-lazyload,见名字可知它也是一个 jQuery 的插件,只有在滚动条快滚动到图片的位置时才去加载图片。

搜索

最近看到 @Hux 大佬的博客上多了个搜素的功能,好,我也要:

image

其用的就是 Simple-Jekyll-Search

这东西受 Pjax 影响,如果单独嵌入每个页面里会搜索出来重复结果,后来移到 Pjax 的刷新容器外,全站只有一份就正常啦。

Archives

小破站刚开始,在 页签 功能上,只有个 Tags 页面,后来觉得需要按年份归档,就多撸了个 Archives 页面。而最近看到 @Hux 大佬最新的 Archives 页面功能就已经整合了这两个,于是我也搬了过来:

image

偶尔看看大佬的博客,还是能发现他们偷偷更了不少好东西 ヾ(≧▽≦*)o

Code highlight

原来的代码高亮太难看了,换上了和 idea 同款高亮:

image

header 蒙版

本破站的文章标题用的是白色样式字体,经常因为图片太亮而无法看清,加上蒙版后,感觉好了很多:

image

有需要用到的,在 YAML 头信息中指定一下就好了:

---
header-mask: 0.35
---

Jekyll 集合 / 草稿

逛 Jekyll 官网的时候,发现了许多曾经没注意的地方,比如集合和草稿。集合(Collections)允许在 _posts 文件夹外定义文档,这个挺好的,非博客文章就可以很灵活了,比如 AwesomeReading;草稿(Drafts)允许定义不想发表的文章,之前我都是另开一条 Git 分支来做这件事 (●'◡'●)

部署平台变更

现小破站布署在 Vercel 上,一个号称拥有全球 CDN 的平台。

小破站安身之所的变迁过程:Github Page ➡ Netlify ➡ Gitee Page ➡ 腾讯云 ➡ Vercel

怎么 ...... 有一种颠沛流离的感觉 O_O

TODO

说一下将来还想做的优化:

  • 首页增加置顶文章
  • 增加 bibi(说说,自言自语)区,目前的技术方向是 Artitalk
  • 增加 豆瓣的阅读和观影记录,需要看看豆瓣api
  • 增加 Mastodon

也有鸽了的可能 ...

最后

折腾实属不易,我只想安静的躺着

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,588评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,456评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,146评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,387评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,481评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,510评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,522评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,296评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,745评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,039评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,202评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,901评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,538评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,165评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,415评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,081评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,085评论 2 352

推荐阅读更多精彩内容