V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lete
V2EX  ›  程序员

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

  •  
  •   lete ·
    Lete114 · 2023-05-04 14:30:44 +08:00 · 2229 次点击
    这是一个创建于 567 天前的主题,其中的信息可能已经有所发展或是发生改变。

    本来想着写个新主题,一直想不到起什么主题名称好,然后写的结构和样式长得和我以前写的主题 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 偏文章全加载完了)

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

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

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

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

    如果你觉得看不清,完全可以使用浏览器的 ctrl + 鼠标滚轮来放大缩小观看
    moonrailgun
        12
    moonrailgun  
       2023-05-05 11:59:34 +08:00
    @yolee599 赞同 OP 的观点。难道把内容盛满看内容眼球跟做眼保健操似的左右大幅转动会是一种很舒服的使用体验么?
    适当设定宽度上限有助于保护视力。
    RICKEYGONG
        13
    RICKEYGONG  
       2023-05-11 16:40:57 +08:00
    我用了
    lete
        14
    lete  
    OP
       2023-05-13 21:37:05 +08:00
    @RICKEYGONG 感谢你的认可,目前发现一个小问题,具体看这个 https://www.v2ex.com/t/939791
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5794 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:58 · PVG 09:58 · LAX 17:58 · JFK 20:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.