本来想着写个新主题,一直想不到起什么主题名称好,然后写的结构和样式长得和我以前写的主题 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 偏文章全加载完了)
1
ohmyzsh 2023-05-04 15:38:56 +08:00
回复支持下。换几年前我会尝试下楼主的主题,很简洁清晰,只是现在改用 mediawiki 做笔记了,博客折腾不动了
|
2
tig198 2023-05-04 15:41:08 +08:00
大佬好强!有个小小建议,左上角的风车转的太快了(容易分散注意力
|
3
MFWT 2023-05-04 16:26:29 +08:00
控制页面大小确实很好,值得点赞
我看过的极端例子是,加载一个 WordPress 页面,等老久之后,刷一声几十个 js 和 css 出来了,下面的计数器没一会就跳到了 2MB+ —— 搞得好像服务器流量不用钱一样。这样做,页面是花样多了,但是用户体验也好不到哪里去(点个链接还得等八九秒才有内容,换作谁都会被揍一顿) 我现在也在写博客系统,一个页面的文件不压缩,算上头像,大概也就只有 30-50KB ,即使是国内那种只有 1Mbps 的抠门服务器也可以秒开。因为我用过垃圾服务器( 500 延迟+绕路线路)建站,才深知页面精简到底有多重要 |
4
zdw189803631 2023-05-04 16:32:11 +08:00
风车没必要
|
5
scyuns 2023-05-04 17:04:03 +08:00
这个小风车真有意思 喜欢
|
6
lete OP @tig198 @zdw189803631 小风车是 logo 可以在配置文件里自定义的 _config.yml
|
7
lete OP @ohmyzsh 我以前特喜欢折腾博客,改来改去,却没认真写过那篇好的内容,后来得出一个结论,美化的尽头即是默认,全回归简洁了
|
9
yolee599 2023-05-05 09:29:54 +08:00
为啥我看到的主题都做得很“小气”,浪费了 2/3 的空间,看起来不舒服:
https://i.postimg.cc/RVTL9Y4X/image-2023-05-05-092425.png |
10
nullcache 2023-05-05 10:00:32 +08:00
@yolee599 附议,我觉得 https://blog.skk.moe 就比较舒服
|
11
lete OP @yolee599 有没有一种可能是你的屏幕太大了?主题只做了 2000px 的适配,大多数人的屏幕不都是 1920x1080 左右吗?你这 4k 了吧?
用大屏幕一般不就是为了让应用分屏使用吗? 如果你觉得看不清,完全可以使用浏览器的 ctrl + 鼠标滚轮来放大缩小观看 |
12
moonrailgun 2023-05-05 11:59:34 +08:00
@yolee599 赞同 OP 的观点。难道把内容盛满看内容眼球跟做眼保健操似的左右大幅转动会是一种很舒服的使用体验么?
适当设定宽度上限有助于保护视力。 |
13
RICKEYGONG 2023-05-11 16:40:57 +08:00
我用了
|
14
lete OP @RICKEYGONG 感谢你的认可,目前发现一个小问题,具体看这个 https://www.v2ex.com/t/939791
|