用 shadcn/ui + nextjs 开发的一个现代化诗词网站，总花费 78 元（域名），欢迎试用！

[wcao]

今年的一次 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

[yuhangch]

感谢分享，适配字体确实很麻烦，学习一下分片加载
我的一个站，是用的 https://github.com/sivan/heti ，样式简单 copy 了一下，https://chenyuhang.cn

[lstz]

time is the currency of your life too

[yangg]

首页列表里内容颜色浅了点。
以你现在的内容所占宽度，没必要用 100% 宽度布局啊，不然大屏下左侧菜单太远了，中间是空的，鼠标距离远了。

[wcao]

@yuhangch heti 感觉很好用的样子，可以后面试试。

@lstz you are right.

@yangg 大屏可能真的会有这个问题，我目前用的 24 寸的 感觉还合适，再大可能真的有点不合适了。 列表内容的话，目前看起来好像还可以，后面加深一点测试一下，看哈效果。

[molezznet]

好像在阮一峰的博客推荐上也看到了

[K1W1]

感觉这个 UI 框架可以试试

https://shuimo.design/

[bestkayle]

加载动画是自己写的吗

[wcao]

@molezznet 年前上过一次

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

@bestkayle 忘了在哪里抄的一段 CSS

[param]

怎么把流量做起来的

[lilei2023]

大哥，诗里面注解的数据怎么保存的，之前也想搞一个，就是不知道怎么保存有注解的句子

[naminokoe]

OP 可以参考我的网站，把一些古诗的附加版本添上去，比如李白的静夜思就有别的版本。https://poem.springwood.me

[wcao]

@naminokoe 我在找资源的时候，好像看到过这个网站，可以一起交流啊

[wcao]

@lilei2023 把诗词通过字符拆分为单个字符，比如 床前明月光，疑是地上霜。就变成了 [窗，前，明，月，光...]
注解 床前：床的面前。通过递归遍历，把上面数组里面的字符匹配出来。原理有点类似于搜索的时候加背景色。

[lilei2023]

@wcao 感谢！

[wcao]

@param 其他平台发文章，做 SEO 。

[dford]

Win10+Firefox ，楷体看着锯齿严重

[colorcat]

蹭个热度：

shadcn ui 中文站
https://www.shadcn.com.cn/