当前位置:首页 > 前端开发 > 正文内容

丰厚的诗词资源!一个现代化诗词学习网站!

邻居的猫1个月前 (12-09)前端开发505

我们好,我是 Java陈序员

之前,给我们引荐过一个古诗文起名东西,运用古诗文进行起名。

一个古诗文起名东西

今日,给我们介绍一个现代化诗词学习网站,完美适用于本身、孩子学习背诵古诗词!

重视微信大众号:【Java陈序员】,获取开源项目共享、AI副业共享、超200本经典计算机电子书本等。

项目介绍

aspoem —— 现代化诗词学习网站,一个愈加重视UI和阅览体会的诗词网站。收集了丰厚的诗词资源,用户能够经过作者、诗词、名句快速查找诗词。

功用特征

  • 供给丰厚的我国古典诗词资源
  • 供给诗词赏识与学习、拼音标示、注释和白话文翻译
  • 供给全站查找、诗人及词牌名索引以及标签体系便利查找相关主题诗词
  • 界面友爱,便于用户运用,支撑暗黑形式和多种主题
  • 重视移动端的适配,支撑 PC 和手机端拜访

技能栈

  • React
  • Next
  • Tailwind CSS
  • PostgreSQL

项目体会

诗词

丰厚的诗词aspoem 现在现已收集了 6000+ 首诗词。

诗词鉴赏:供给拼音标示、注释和白话文等的展现方法,使诗词愈加易于阅览。

摘录卡片:供给高清大图,支撑免费下载。

诗人

海量的诗人aspoem 现在汇总了 700+ 个诗人、词人。

诗人介绍:供给诗人介绍,以及创造的诗词,便利有针对性的学习。

词牌名&标签&片段

词牌名:收集了多种多样的词牌名,并汇总对应的诗词。

标签:依照近体诗、书本、诗经、节日、情感等分类进行打标签,便利检索查询。

片段:摘录经典的手刺诗句、词句。

其他功用

检索查询:查找诗人、诗词、名句。

暗黑形式

多种主题

适配移动端

本地运转

前期预备

1、下载代码

git clone https://github.com/meetqy/aspoem.git

2、仿制一份 .env.example 偏重命名为 .env

aspoem 供给了是否集成 PostgreSQL 两种版别,可自行选择。

集成 PostgreSQL

1、修正配置文件 .env 中的 PostgreSQL 衔接信息

# 后台操作需求的 Token,  http://localhost:3000/create?token=v0
TOKEN="v0"

# 本地
POSTGRES_PRISMA_URL="postgresql://meetqy@localhost:5432/aspoem"
POSTGRES_URL_NON_POOLING="postgresql://meetqy@localhost:5432/aspoem"

# 计算相关 没有可不填 不会加载对应的代码
# google analytics id
NEXT_PUBLIC_GA_ID="G-PYEC5EG749"

# microsoft-clarity-id
NEXT_PUBLIC_MC_ID="ksel7bmi48"

2、装置依靠

pnpm install

3、发动项目

pnpm run dev

4、阅读器拜访 http://localhost:3000

不集成 PostgreSQL

1、修正 .env

POSTGRES_PRISMA_URL="postgresql://meetqy@localhost:5432/aspoem"
POSTGRES_URL_NON_POOLING="postgresql://meetqy@localhost:5432/aspoem"

改为

POSTGRES_PRISMA_URL="file:./db.sqlite"
POSTGRES_URL_NON_POOLING="file:./db.sqlite"

2、修正 prisma/schema.prisma 中的

datasource db {
    provider  = "postgresql"
    url       = env("POSTGRES_PRISMA_URL")
    directUrl = env("POSTGRES_URL_NON_POOLING")
}

改为

datasource db {
    provider  = "sqlite"
    url       = env("POSTGRES_PRISMA_URL")
    directUrl = env("POSTGRES_URL_NON_POOLING")
}

3、将 prisma/sample.sqlite 改为 db.sqlite

4、装置依靠并发动,引荐运用 pnpm

pnpm i
pnpm db:push
pnpm dev

Docker 布置

aspoem 项目供给 Dockerfile 和 docker-compose.yml 文件。Dockfile 用于构建 aspoem 服务镜像,docker-compose.yml 用于发动 aspoem 和一个 PostgresSQl.

履行以下指令,一键发动项目:

cd aspoem
docker compose up

aspoem 一个致力于共享诗词的渠道,为用户供给了一个杰出的诗词阅览体会!关于喜爱我国诗词的朋友们来说,真的是一个瑰宝。它不只资源丰厚,并且界面简练,运用起来十分友爱。我们快去体会吧~

项目地址:https://github.com/meetqy/aspoem

最终

引荐的开源项目现已收录到 GitHub 项目,欢迎 Star

https://github.com/chenyl8848/great-open-source-project

或许拜访网站,进行在线阅读:

https://chencoding.top:8090/#/

我们的点赞、保藏和谈论都是对作者的支撑,如文章对你有协助还请点赞转发支撑下,谢谢!


扫描二维码推送至手机访问。

版权声明:本文由51Blog发布,如需转载请注明出处。

本文链接:https://www.51blog.vip/?id=442

标签: Github
分享给朋友:

“丰厚的诗词资源!一个现代化诗词学习网站!” 的相关文章

jq设置css样式

jq设置css样式

在jQuery中,你可以使用`.css`方法来设置元素的CSS样式。这个方法可以用来获取或设置一个或多个CSS属性。 基本用法1. 获取CSS属性: ```javascript var color = $.css; ```2. 设置CSS属性: ```javascript $.c...

css压缩, 什么是CSS压缩?

css压缩, 什么是CSS压缩?

CSS压缩是一种优化网页性能的技术,通过删除CSS文件中的空白字符、注释、换行符等,来减少文件大小,从而加快网页加载速度。压缩后的CSS文件仍然保持原有的功能,但体积更小,传输更快。压缩CSS的方法有多种,包括手动压缩和自动压缩。手动压缩需要手动删除文件中的空白字符和注释,而自动压缩可以使用CSS压...

html5网站欣赏,引领网页设计新潮流

html5网站欣赏,引领网页设计新潮流

1. 设计之家: 2. CSDN博客: qwe2 3. 优设网: 4. 博客园: 这些资源提供了各种风格的HTML5网站设计案例,从创意型到交互式,再到单页网站,涵盖了丰富的内容和设计技巧,相信会对你的学习和设计灵感有所帮助。HT...

css自适应布局, 什么是CSS自适应布局?

css自适应布局, 什么是CSS自适应布局?

CSS自适应布局(Responsive Web Design)是一种网页设计方法,旨在使网页能够在不同尺寸和分辨率的设备上提供良好的用户体验。这通常涉及到使用媒体查询(Media Queries)来根据设备的特性(如屏幕宽度、分辨率等)应用不同的CSS样式。1. 媒体查询(Media Queries...

html上传文件,```html    文件上传示例

html上传文件,```html 文件上传示例

要在HTML中上传文件,您可以使用``元素。这个元素允许用户选择文件并上传到服务器。以下是一个基本的示例:```html 文件上传示例 选择文件: 在这个例子中,``元素定义了一个表单,用户可以在其中上传文件。`action`属性指定了表单提交到服务器的URL(在这个例子中...