V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
YunYouJun
V2EX  ›  分享创造

一个轻量、快速、可爱(自认为)的 Hexo 主题: Yun

  •  
  •   YunYouJun ·
    YunYouJun · 2020-03-26 03:28:53 +08:00 · 6784 次点击
    这是一个创建于 1705 天前的主题,其中的信息可能已经有所发展或是发生改变。

    index-preview.jpg

    GitHub stars Docs GitHub package.json version

    post.jpg

    协议

    SATA License,笑。

    你不知道这代表什么?简单来说,就是如果你使用了该主题,你需要马不停蹄地点一个 Star,接下来你便可以随意使用它。

    关于

    优势

    • 文档!(咱觉得还算详细,膨胀)
    • 自定义程度高,且方便按需配置(约定大于配置)
    • 小且速度快(无 jQuery 依赖,尽可能使用 CDN 与最新的 API )
    • 因为还没什么人用,所以基本不用担心撞衫!(这是重点对不对!)
    • 一些奇怪的功能(譬如生成老婆名单?)

    使用说明大致都在文档里了。

    其他

    其实此前发过一次初版在 Hexo 节点,但是只收到一条回复,所以再尝试一次。

    总之欢迎使用,Star,PR,PY,谢谢!

    50 条回复    2020-03-31 00:03:35 +08:00
    kaiki
        1
    kaiki  
       2020-03-26 03:54:28 +08:00   ❤️ 1
    chrome 滚动体验不流畅,其他浏览器没试
    soli
        2
    soli  
       2020-03-26 05:31:10 +08:00
    Safari 同样滚动不丝般顺滑。
    另外,标题下真的需要显示那么多信息么?
    创建时间、更新时间(有时候还没有)、字数、阅读时间,单页里还有阅读数、目录、标签(一坨)。。。
    daimiaopeng
        3
    daimiaopeng  
       2020-03-26 06:56:45 +08:00 via Android
    安卓 夸克浏览器 主页滑动有点卡
    lmoon
        4
    lmoon  
       2020-03-26 07:39:51 +08:00 via Android
    滑动卡卡的
    gaobh
        5
    gaobh  
       2020-03-26 08:38:31 +08:00
    卡的我网都掉线了……
    youngce
        6
    youngce  
       2020-03-26 08:59:12 +08:00   ❤️ 1
    挪威的森林,好评
    chanshiyu
        7
    chanshiyu  
       2020-03-26 09:23:50 +08:00 via Android   ❤️ 1
    大师球捕捉... 我喜欢首页那个设计,还挺好看的
    oott123
        8
    oott123  
       2020-03-26 09:44:05 +08:00 via Android
    我倒是没觉得卡。
    这个主题手机上看,首页的文章摘要截断是每个段落单独截断的,导致内容看起来不连贯,有点奇怪…
    ShuangChenyue
        9
    ShuangChenyue  
       2020-03-26 09:56:21 +08:00
    首页不错
    但是滚动起来有点卡
    Geeker
        10
    Geeker  
       2020-03-26 10:24:48 +08:00   ❤️ 1
    风格不错
    xiri
        11
    xiri  
       2020-03-26 10:28:02 +08:00   ❤️ 1
    你这个“喜欢的女孩子”挺秀的
    malusama
        12
    malusama  
       2020-03-26 10:29:38 +08:00
    EDGE 滑动卡卡的
    ResidualWind
        13
    ResidualWind  
       2020-03-26 11:13:03 +08:00   ❤️ 1
    感觉还不错 是我喜欢的风格!加油!页面在优化优化,搞流畅点就完美了!
    YunYouJun
        14
    YunYouJun  
    OP
       2020-03-26 15:30:57 +08:00
    @kaiki
    @soli
    @daimiaopeng
    @lmoon
    @gaobh
    @ShuangChenyue
    @malusama
    @ResidualWind
    请问大家都指的是移动端吗?(自己测试没感觉到,所以不大清楚原因。)
    对于滚动优化有什么建议吗?谢谢!(菜鸡无从下手)
    YunYouJun
        15
    YunYouJun  
    OP
       2020-03-26 15:31:44 +08:00   ❤️ 1
    @soli 这些都是可选开启或关闭的。因为自己作为示例站点,所以就想当然地把可以展示的尽可能开启了。
    YunYouJun
        16
    YunYouJun  
    OP
       2020-03-26 15:32:27 +08:00
    @gaobh 一觉醒来,腾讯云 CDN 不知为何挂了。……迁移到 Cloudflare 了。
    Vegetable
        17
    Vegetable  
       2020-03-26 15:34:16 +08:00
    打开实例,等了 20s,点了半天才发现时下拉的!
    YunYouJun
        18
    YunYouJun  
    OP
       2020-03-26 15:35:05 +08:00   ❤️ 1
    @oott123 因为直接用的 css 截断,以及用的 markdown 解析器,只要换行就同样解析换行。自己觉得还算可以接受。
    或者请问有什么相关实现建议吗?
    YunYouJun
        19
    YunYouJun  
    OP
       2020-03-26 15:36:51 +08:00
    @Vegetable orz,解析刚换,可能不大稳定。话说发现下拉是沈么意思……
    Vegetable
        20
    Vegetable  
       2020-03-26 15:50:26 +08:00
    @YunYouJun 就是打开看到的是标题,没有发现文章列表在哪里。还以为会自动跳转到下一个页面。

    产品设计上有个 tip 就是,如果一个页面的长度大于单个屏幕长度,你必须要告诉用户当前屏幕下边还有别的内容,提示用户往下看。比如有一些显示不全的元素,或者明显的提示,比如手机 H5 常见的翻页提示。而你这个打开之后是一个完美的欢迎页,中间的动画非常吸睛,我盯着看了半天。然后页面不动了,我鼠标点了点发现又特效,中间每个字都点了一次发现并没有看到文章在哪。这时候我已经有点困惑了。尝试了一下鼠标滚轮之后才发现内容在下边。

    你左上角和右上角的按钮,会被忽视掉。不是说我瞎,而是因为你整个页面的内容高度集中在中间,大部分用户打开都是先看中间。这两个按钮和页面中心之间基本上是纯色,没有吸引实现的元素。按钮的颜色与背景色的差异也不够大,又在人眼能注意到的角度之外,直接就被大脑忽略了。
    YunYouJun
        21
    YunYouJun  
    OP
       2020-03-26 16:16:29 +08:00
    @Vegetable 谢谢你的解释和建议!我将打算添加一个向下的指示箭头。

    > 其实还有侧边栏的滚动条可能些许提示。hhh ![[email protected]]( https://i.loli.net/2020/03/26/UjBwAIR8Qck1Tua.png)
    dycc2010
        22
    dycc2010  
       2020-03-26 16:23:50 +08:00
    滑动好卡
    jiejiss
        23
    jiejiss  
       2020-03-26 16:24:22 +08:00
    滚动优化应该是 util.js 的 debounce 函数的锅。感觉 scroll 事件完全不需要 debounce 啊……
    YunYouJun
        24
    YunYouJun  
    OP
       2020-03-26 16:40:24 +08:00
    哇,刚换到 Cloudflare,发现原来是 Github Pages 出问题了……
    > [Github pages 的 HTTPS 是不是出问题了?]( https://www.v2ex.com/t/656367))
    YunYouJun
        25
    YunYouJun  
    OP
       2020-03-26 22:19:25 +08:00
    @kaiki
    @soli
    @daimiaopeng
    @lmoon
    @gaobh
    @ShuangChenyue
    @malusama
    @ResidualWind
    @dycc2010
    @jiejiss
    !!!我好像找到原因了,应该是背景 `filter: blur` 加上我的卡片是半透明对性能影响太大了。
    听大家一说,我用 safari 测试了一下,果然很卡,现在用模糊好的图片作为背景,去掉 filter 再测试,就顺滑了。

    大家有空的话,能否再给咱一个反馈,谢谢!
    还有今天 GitHub Pages 炸了,国内 CDN 无法使用,现在速度可能很慢,多多见谅。
    YunYouJun
        26
    YunYouJun  
    OP
       2020-03-26 22:21:14 +08:00
    @jiejiss 当初加入 debounce 就是为了优化滚动来着。不过似乎不是 `debounce` 的原因。
    翻了下 hexo-theme-next 的源码,发现也没有用 debounce,咱现在也就顺便去掉了。hhh
    谢谢。
    jiejiss
        27
    jiejiss  
       2020-03-26 22:23:44 +08:00
    还是有一点点卡,比之前好一些。
    主要体现在滑动刚开始和接近结束的时候,有轻微卡顿感。
    通感到听觉上的话,大概是轻微的『笃笃笃』的声音
    YunYouJun
        28
    YunYouJun  
    OP
       2020-03-26 22:34:07 +08:00
    @jiejiss 好的,谢谢。这个可能就是我的背景动画和卡片半透明的影响,以及其他方面还需要优化。
    形象的比喻,hhh 。对了,请问使用的是指移动端吗?
    kaiki
        29
    kaiki  
       2020-03-26 22:39:37 +08:00
    鼠标点击产生的特效 z-index 不是最高吗,在列表中,列表背景半透明的情况下还是可以看到的,文章页只有侧边栏和内容中间没有被覆盖的一段可以显示了,那么这个东西就感觉很意义不明了
    YunYouJun
        30
    YunYouJun  
    OP
       2020-03-26 22:45:51 +08:00
    @kaiki 对哦,我去把 z-index 提上来。(当然本身也是可开关的。)谢谢反馈!
    BcqSJB7MB16q9PRD
        31
    BcqSJB7MB16q9PRD  
       2020-03-26 22:46:20 +08:00   ❤️ 1
    是我喜欢的风格,好棒!加油!
    0312birdzhang
        32
    0312birdzhang  
       2020-03-26 22:54:05 +08:00
    不错,界面很可爱(迫真
    supercaizehua
        33
    supercaizehua  
       2020-03-26 22:59:06 +08:00
    chrome 最新 stable 不卡,很流畅 手机没试, 感觉你这个主题可能更适合小清新
    jiejiss
        34
    jiejiss  
       2020-03-26 23:36:47 +08:00   ❤️ 1
    @YunYouJun #28 是 macOS 的触控板

    我对比了一下你的网页和微博,微博的滑动的收尾要更丝滑一些,帧率可能在 40 以上。感觉你的网页在 15-20 左右
    YunYouJun
        35
    YunYouJun  
    OP
       2020-03-27 00:01:12 +08:00
    @jiejiss 好的,谢谢。我再多学习看看有啥可以优化的技巧。
    waler
        36
    waler  
       2020-03-27 03:15:20 +08:00 via Android
    你好,可以问一下,文档站用的是什么么?
    wispx
        37
    wispx  
       2020-03-27 07:29:50 +08:00
    老二刺猿了
    ResidualWind
        38
    ResidualWind  
       2020-03-27 09:51:06 +08:00   ❤️ 1
    PC 端:360 急速浏览器流畅,谷歌浏览器运行较之前流畅很多(基本 OK )
    YunYouJun
        39
    YunYouJun  
    OP
       2020-03-27 10:00:45 +08:00 via Android
    YunYouJun
        40
    YunYouJun  
    OP
       2020-03-27 10:01:28 +08:00 via Android
    @wispx 爷就是二刺螈.jpg
    waler
        41
    waler  
       2020-03-27 13:30:11 +08:00
    @YunYouJun #39 好的,谢谢你
    alphardex
        42
    alphardex  
       2020-03-27 16:13:54 +08:00
    同老二刺螈握个手
    YunYouJun
        43
    YunYouJun  
    OP
       2020-03-27 16:43:24 +08:00
    @alphardex 是同好!番剧口味一致。
    txhsj
        44
    txhsj  
       2020-03-27 16:59:14 +08:00
    太可爱 太粉了,让吾等糙汉子无从下手
    lovedebug
        45
    lovedebug  
       2020-03-27 17:00:48 +08:00
    非二次元客户劝退= = 哈哈哈
    YunYouJun
        46
    YunYouJun  
    OP
       2020-03-27 17:04:21 +08:00
    @txhsj 心有猛虎,细嗅蔷薇。
    ![lovely-100-percent.jpg]( https://i.loli.net/2020/03/27/1XxGpaJgDd7ofP9.jpg)
    YunYouJun
        47
    YunYouJun  
    OP
       2020-03-27 17:06:35 +08:00
    @lovedebug !等等,咱不就自带了个老婆页面。(还是默认关闭,不打包入生成文件的那种。)其他还是挺正常小清新的吧(自认为
    wework
        48
    wework  
       2020-03-28 14:34:46 +08:00
    好像也没那么可爱...特效和头像 icon 是有点二次元的感觉。我觉得可以加多点圆角,字体要卡哇伊一些,美工和 UI 增加多一些二次元元素、整体色调要偏向粉色,再加以一个 live2d 板娘部件
    YunYouJun
        49
    YunYouJun  
    OP
       2020-03-28 16:38:49 +08:00
    @wework hhh,是希望能更通用一点。
    色调可以自选配置,有主色调选项,live2d 文档也有提及,可自行配置开启。https://yun.yunyoujun.cn/guide/additional-package-support.html#live2d
    YunYouJun
        50
    YunYouJun  
    OP
       2020-03-31 00:03:35 +08:00
    ……我找到卡顿的罪魁祸首了。
    我的 `v0.1.0`, `v0.2.0` 等版本都是使用伪元素 `::before` 实现,有一天我把 `::before` 改为使用 `div` 实现,发了一帖。(没错,就是现在这个。)发现改回 `::before` 实现,即便开启 `blur` 滤镜也依然滚动流畅。

    https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   951 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 19:34 · PVG 03:34 · LAX 11:34 · JFK 14:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.