五一假期,我花了 5 天写了个 Hexo 博客主题

2023-05-04 14:30:44 +08:00
 lete

本来想着写个新主题,一直想不到起什么主题名称好,然后写的结构和样式长得和我以前写的主题 MengD 主题很相似,且才更新到 1.9.0 版本。正好写想不到什么好的主题名称,于是便决定定义为 MengD 主题 2.0 版本。

做了很多优化,项目结构也很清晰,以前的 MengD 主题太杂,维护难度太大。

其中我用到了一个比较偏冷门的技巧来实现一个功能,那就是点击搜索框显示搜索历史和搜索结果,还有手机端点击右下角按钮显示文章目录,完全不需要 js 即可实现按钮点击效果,为了不使用 js 显示这个效果花了我 1 天时间来反复调整 html 结构和 css 样式(讲真,调 css 真的很痛苦,调好一个地方,另一个地方就出问题了,非常难受)。

主要就是 html 标签的 tabindex 属性和 css 的伪类 :focus-within, 感兴趣的大佬可以试试这个巧妙的方法

预览网站: https://mengd.js.org

开源仓库: https://github.com/Lete114/Hexo-Theme-MengD

看看这请求的资源,少得可怜好吧,html 、css 、js 没压缩,全加一起才 100kb ,连别人首页一张图片大小都不到

(有些人的博客还得给每篇文章配一张图片呢,一般首页都会有 10 篇文章,大概就 10 张图片左右也得几 MB ,加载这几 MB 的流量都够我把整个首页的 10 偏文章全加载完了)

2262 次点击
所在节点    程序员
14 条回复
ohmyzsh
2023-05-04 15:38:56 +08:00
回复支持下。换几年前我会尝试下楼主的主题,很简洁清晰,只是现在改用 mediawiki 做笔记了,博客折腾不动了
tig198
2023-05-04 15:41:08 +08:00
大佬好强!有个小小建议,左上角的风车转的太快了(容易分散注意力
MFWT
2023-05-04 16:26:29 +08:00
控制页面大小确实很好,值得点赞

我看过的极端例子是,加载一个 WordPress 页面,等老久之后,刷一声几十个 js 和 css 出来了,下面的计数器没一会就跳到了 2MB+ —— 搞得好像服务器流量不用钱一样。这样做,页面是花样多了,但是用户体验也好不到哪里去(点个链接还得等八九秒才有内容,换作谁都会被揍一顿)

我现在也在写博客系统,一个页面的文件不压缩,算上头像,大概也就只有 30-50KB ,即使是国内那种只有 1Mbps 的抠门服务器也可以秒开。因为我用过垃圾服务器( 500 延迟+绕路线路)建站,才深知页面精简到底有多重要
zdw189803631
2023-05-04 16:32:11 +08:00
风车没必要
scyuns
2023-05-04 17:04:03 +08:00
这个小风车真有意思 喜欢
lete
2023-05-04 17:20:30 +08:00
@tig198 @zdw189803631 小风车是 logo 可以在配置文件里自定义的 _config.yml
lete
2023-05-04 17:27:23 +08:00
@ohmyzsh 我以前特喜欢折腾博客,改来改去,却没认真写过那篇好的内容,后来得出一个结论,美化的尽头即是默认,全回归简洁了
lete
2023-05-04 17:33:15 +08:00
@MFWT 嗯,确实,有些博客确实是这样,好看是好看,不过花花绿绿的,注意力完全集中不到内容上
yolee599
2023-05-05 09:29:54 +08:00
为啥我看到的主题都做得很“小气”,浪费了 2/3 的空间,看起来不舒服:
https://i.postimg.cc/RVTL9Y4X/image-2023-05-05-092425.png
nullcache
2023-05-05 10:00:32 +08:00
@yolee599 附议,我觉得 https://blog.skk.moe 就比较舒服
lete
2023-05-05 11:10:51 +08:00
@yolee599 有没有一种可能是你的屏幕太大了?主题只做了 2000px 的适配,大多数人的屏幕不都是 1920x1080 左右吗?你这 4k 了吧?

用大屏幕一般不就是为了让应用分屏使用吗?

如果你觉得看不清,完全可以使用浏览器的 ctrl + 鼠标滚轮来放大缩小观看
moonrailgun
2023-05-05 11:59:34 +08:00
@yolee599 赞同 OP 的观点。难道把内容盛满看内容眼球跟做眼保健操似的左右大幅转动会是一种很舒服的使用体验么?
适当设定宽度上限有助于保护视力。
RICKEYGONG
2023-05-11 16:40:57 +08:00
我用了
lete
2023-05-13 21:37:05 +08:00
@RICKEYGONG 感谢你的认可,目前发现一个小问题,具体看这个 https://www.v2ex.com/t/939791

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/937233

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX