Browse Source

更新数据库文件,优化文章控制器的路由配置,调整文章视图模板的样式,增强搜索功能的用户体验

re
谢亚昕 3 months ago
parent
commit
26bcb229a4
  1. BIN
      database/development.sqlite3
  2. BIN
      database/development.sqlite3-shm
  3. BIN
      database/development.sqlite3-wal
  4. 4
      src/controllers/Page/ArticleController.js
  5. 2
      src/views/page/articles/category.pug
  6. 29
      src/views/page/articles/index.pug
  7. 12
      src/views/page/articles/search.pug
  8. 2
      src/views/page/articles/tag.pug

BIN
database/development.sqlite3

Binary file not shown.

BIN
database/development.sqlite3-shm

Binary file not shown.

BIN
database/development.sqlite3-wal

Binary file not shown.

4
src/controllers/Page/ArticleController.js

@ -103,6 +103,8 @@ class ArticleController {
articles,
keyword: q,
title: `搜索:${q}`,
}, {
includeUser: true,
})
}
@ -111,7 +113,7 @@ class ArticleController {
const router = new Router({ auth: true, prefix: "/articles" })
router.get("", controller.index, { auth: false }) // 允许未登录访问
router.get("/", controller.index, { auth: false }) // 允许未登录访问
router.get("/search", controller.search)
router.get("/search", controller.search, { auth: false })
router.get("/category/:category", controller.byCategory)
router.get("/tag/:tag", controller.byTag)
router.get("/:slug", controller.show)

2
src/views/page/articles/category.pug

@ -1,7 +1,7 @@
extends /layouts/empty.pug
block pageContent
.container.mx-auto.px-4.py-8
.container.mx-auto.py-8
h1.text-3xl.font-bold.mb-8
span.text-gray-600 分类:
= category

29
src/views/page/articles/index.pug

@ -2,7 +2,7 @@ extends /layouts/empty.pug
block pageContent
.flex.flex-col
.flex-1.p-8.bg-gray-50
.flex-1.py-8.bg-gray-50
.container.mx-auto
// 页头
.flex.justify-between.items-center.mb-8
@ -16,25 +16,26 @@ block pageContent
hx-get="/articles/search"
hx-trigger="keyup changed delay:500ms"
hx-target="#articleList"
hx-swap="outerHTML"
name="q"
class="focus:outline-none focus:ring-blue-500 focus:ring-2"
)
i.fas.fa-search.absolute.left-3.top-3.text-gray-400
// 视图切换按钮
.flex.items-center.gap-2.bg-white.p-1.rounded-lg.border
button.p-2.rounded(
class="hover:bg-gray-100"
hx-get="/articles?view=grid"
hx-target="#articleList"
)
i.fas.fa-th-large
button.p-2.rounded(
class="hover:bg-gray-100"
hx-get="/articles?view=list"
hx-target="#articleList"
)
i.fas.fa-list
//- .flex.items-center.gap-2.bg-white.p-1.rounded-lg.border
//- button.p-2.rounded(
//- class="hover:bg-gray-100"
//- hx-get="/articles?view=grid"
//- hx-target="#articleList"
//- )
//- i.fas.fa-th-large
//- button.p-2.rounded(
//- class="hover:bg-gray-100"
//- hx-get="/articles?view=list"
//- hx-target="#articleList"
//- )
//- i.fas.fa-list
// 筛选栏
.bg-white.rounded-lg.shadow-sm.p-4.mb-6

12
src/views/page/articles/search.pug

@ -1,21 +1,21 @@
extends /layouts/empty.pug
//- extends /layouts/empty.pug
block pageContent
.container.mx-auto.px-4.py-8
//- block pageContent
#articleList.container.mx-auto.px-4.py-8
.mb-8
h1.text-3xl.font-bold.mb-4
span.text-gray-600 搜索结果:
= keyword
p.text-gray-500 找到 #{articles.length} 篇相关文章
.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-6
.grid.grid-cols-1.gap-6(class="md:grid-cols-2 lg:grid-cols-3")
each article in articles
.bg-white.shadow-md.rounded-lg.overflow-hidden
if article.featured_image
img.w-full.h-48.object-cover(src=article.featured_image alt=article.title)
.p-6
h2.text-xl.font-semibold.mb-2
a.hover:text-blue-600(href=`/articles/${article.slug}`)= article.title
a(href=`/articles/${article.slug}` class="hover:text-blue-600")= article.title
if article.excerpt
p.text-gray-600.mb-4= article.excerpt
.flex.justify-between.items-center
@ -27,7 +27,7 @@ block pageContent
i.fas.fa-eye.mr-1
= article.view_count + " 阅读"
if article.category
a.text-sm.bg-blue-100.text-blue-600.px-3.py-1.rounded-full.hover:bg-blue-200(href=`/articles/category/${article.category}`)= article.category
a.text-sm.bg-blue-100.text-blue-600.px-3.py-1.rounded-full(href=`/articles/category/${article.category}` class="hover:bg-blue-200")= article.category
if !articles.length
.text-center.py-8

2
src/views/page/articles/tag.pug

@ -1,7 +1,7 @@
extends /layouts/empty.pug
block pageContent
.container.mx-auto.px-4.py-8
.container.mx-auto.py-8
h1.text-3xl.font-bold.mb-8
span.text-gray-600 标签:
= tag

Loading…
Cancel
Save