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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 262 天前的主题，其中的信息可能已经有所发展或是发生改变。

Imgur

今年的一次 UI 重大优化。

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

特色功能点

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

后续计划

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

一点踩坑记录

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

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

aspoem.com

imgur

用楷体

用宋体

诗词

17 条回复 • 2024-04-22 17:50:21 +08:00

yuhangch

262 天前

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

lstz

262 天前 via Android

time is the currency of your life too

yangg

261 天前

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

wcao

261 天前

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

@lstz you are right.

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

molezznet

261 天前

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

K1W1

261 天前

感觉这个 UI 框架可以试试

https://shuimo.design/

KgM4gLtF0shViDH3

261 天前

加载动画是自己写的吗

wcao

261 天前

@molezznet 年前上过一次

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

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

param

261 天前 via Android

怎么把流量做起来的

lilei2023

261 天前

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

naminokoe

261 天前

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

wcao

261 天前

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

wcao

261 天前

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

lilei2023

261 天前

@wcao 感谢！

wcao

261 天前

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

dford

261 天前

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

colorcat

201 天前

蹭个热度：

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