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

用 shadcn/ui + nextjs 开发的一个现代化诗词网站,总花费 78 元(域名),欢迎试用!

  •  2
     
  •   wcao ·
    meetqy · 257 天前 · 3897 次点击
    这是一个创建于 257 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Imgur

    Imgur

    Imgur

    今年的一次 UI 重大优化。

    诗词来源: https://github.com/chinese-poetry/chinese-poetry 注解来源:Google

    特色功能点

    1. 注解在文中可以直接查看,一一对应
    2. 提供主题切换,特别推荐默认主题 zinc ,非常简洁
    3. 支持拼音一对一标注
    4. 移动端支持,暂时不支持拼音展示

    后续计划

    • 准备把诗人的页面,做成个人简历的样式,感觉会很好玩。
    • 诗词的展示用不同的布局方式。

    一点踩坑记录

    1. 字少、大 用楷体;字多,用宋体,会更加好看。参考了小学语文教材和中学教程,小学用楷体,中学用宋体。
    2. Safari 居然不支持楷体,即使本地安装了楷体也不行,只有 PingFang SongTi 两个可选项(对于中文来说)
    3. Iphone 上只有 PingFang ,只能独立加载
    4. 远程分片加载中文字体,推荐使用 https://github.com/KonghaYao/cn-font-split
    5. 还是要做 SEO 的

    暂时想到这么多,放上地址

    aspoem.com

    17 条回复    2024-04-22 17:50:21 +08:00
    yuhangch
        1
    yuhangch  
       257 天前
    感谢分享,适配字体确实很麻烦,学习一下分片加载
    我的一个站,是用的 https://github.com/sivan/heti ,样式简单 copy 了一下,https://chenyuhang.cn
    lstz
        2
    lstz  
       257 天前 via Android
    time is the currency of your life too
    yangg
        3
    yangg  
       257 天前   ❤️ 1
    首页列表里内容颜色浅了点。
    以你现在的内容所占宽度,没必要用 100% 宽度布局啊,不然大屏下左侧菜单太远了,中间是空的,鼠标距离远了。
    wcao
        4
    wcao  
    OP
       257 天前
    @yuhangch heti 感觉很好用的样子,可以后面试试。

    @lstz you are right.

    @yangg 大屏可能真的会有这个问题,我目前用的 24 寸的 感觉还合适,再大可能真的有点不合适了。 列表内容的话,目前看起来好像还可以,后面加深一点测试一下,看哈效果。
    molezznet
        5
    molezznet  
       257 天前
    好像在阮一峰的博客推荐上也看到了
    K1W1
        6
    K1W1  
       257 天前   ❤️ 1
    感觉这个 UI 框架可以试试

    https://shuimo.design/
    KgM4gLtF0shViDH3
        7
    KgM4gLtF0shViDH3  
       257 天前
    加载动画是自己写的吗
    wcao
        8
    wcao  
    OP
       257 天前
    @molezznet 年前上过一次

    @K1W1 宝藏框架啊,非常符合特定的网站

    @bestkayle 忘了在哪里抄的一段 CSS
    param
        9
    param  
       257 天前 via Android
    怎么把流量做起来的
    lilei2023
        10
    lilei2023  
       257 天前
    大哥,诗里面注解的数据怎么保存的,之前也想搞一个,就是不知道怎么保存有注解的句子
    naminokoe
        11
    naminokoe  
       257 天前
    OP 可以参考我的网站,把一些古诗的附加版本添上去,比如李白的静夜思就有别的版本。https://poem.springwood.me
    wcao
        12
    wcao  
    OP
       256 天前
    @naminokoe 我在找资源的时候,好像看到过这个网站,可以一起交流啊
    wcao
        13
    wcao  
    OP
       256 天前
    @lilei2023 把诗词通过字符拆分为单个字符,比如 床前明月光,疑是地上霜。就变成了 [窗,前,明,月,光...]
    注解 床前:床的面前。通过递归遍历,把上面数组里面的字符匹配出来。原理有点类似于搜索的时候加背景色。
    lilei2023
        14
    lilei2023  
       256 天前
    @wcao 感谢!
    wcao
        15
    wcao  
    OP
       256 天前
    @param 其他平台发文章,做 SEO 。
    dford
        16
    dford  
       256 天前
    Win10+Firefox ,楷体看着锯齿严重
    colorcat
        17
    colorcat  
       197 天前
    蹭个热度:

    shadcn ui 中文站
    https://www.shadcn.com.cn/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2994 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:36 · PVG 22:36 · LAX 06:36 · JFK 09:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.