topuser
/
koa3-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

新增关于页面并更新导航和页脚内容，优化样式和结构

pure
谢亚昕 2 months ago
parent
f3a9a9b53e
commit
055ab7645a
15 changed files with 90 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/modules/Index/controller/index.js
  2. 22
      src/views/htmx/footer/index.pug
  3. 6
      src/views/htmx/markdown/index.pug
  4. 27
      src/views/htmx/navbar/index.pug
  5. 2
      src/views/layouts/empty.pug
  6. 7
      src/views/page/extra/about.pug
  7. 2
      src/views/page/extra/contact.pug
  8. 2
      src/views/page/extra/contactSuccess.pug
  9. 2
      src/views/page/extra/faq.pug
  10. 2
      src/views/page/extra/feedback.pug
  11. 2
      src/views/page/extra/help.pug
  12. 2
      src/views/page/extra/privacy.pug
  13. 2
      src/views/page/extra/terms.pug
  14. 19
      src/views/page/index/index.pug
  15. 51
      src/views/page/login/index.pug

1
src/modules/Index/controller/index.js
View File

@ -54,6 +54,7 @@ export default class CommonController extends BaseController {
router.get("/help", controller.handleRequest(controller.pageGet("page/extra/help")))
router.get("/privacy", controller.handleRequest(controller.pageGet("page/extra/privacy")))
router.get("/terms", controller.handleRequest(controller.pageGet("page/extra/terms")))
router.get("/about", controller.handleRequest(controller.pageGet("page/extra/about")))
router.get("/no-auth", controller.handleRequest(controller.pageGet("page/auth/no-auth")))
return router

22
src/views/htmx/footer/index.pug
View File

@ -1,4 +1,4 @@
footer.footer.shadow.mt-5
footer.footer.shadow
.footer-panel(class="bg-white border-t border-gray-200")
.footer-content.container(class="pt-12 pb-6")
.footer-main(class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8")
@ -12,9 +12,9 @@ footer.footer.shadow.mt-5
li
a(href="/" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 首页
li
a(href="/about" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 关于我们
a(href="/about" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 关于我
li
a(href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 联系我们
a(href="/contact" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 联系我
li
a(href="/help" class="text-gray-600 hover:text-blue-600 transition-colors duration-200 text-sm") 帮助中心
@ -33,12 +33,12 @@ footer.footer.shadow.mt-5
.footer-section
h3.footer-title(class="text-lg font-semibold text-gray-900 mb-4") 关注我
.social-links(class="flex space-x-4 flex-wrap")
a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="微信")
span.streamline-ultimate-color--wechat-logo
a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="QQ")
span.cib--tencent-qq
a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub")
span.ri--github-fill
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="微信")
//- span.streamline-ultimate-color--wechat-logo
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-blue-100 transition-colors duration-200" title="QQ")
//- span.cib--tencent-qq
//- a(href="#" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub")
//- span.ri--github-fill
a(href="https://blog.xieyaxin.top" target="_blank" class="social-link p-2 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors duration-200" title="GitHub")
span.icomoon-free--blog
@ -47,5 +47,5 @@ footer.footer.shadow.mt-5
.copyright(class="text-gray-500 text-sm mb-4 md:mb-0")
| © 2023-#{new Date().getFullYear()} #{siteConfig.site_author}. 保留所有权利。
.footer-actions(class="flex items-center space-x-6")
a(href="/sitemap" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") 网站地图
a(href="/rss" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") RSS订阅
//- a(href="/sitemap" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") 网站地图
//- a(href="/rss" class="text-gray-500 hover:text-blue-600 transition-colors duration-200 text-sm") RSS订阅

6
src/views/htmx/markdown/index.pug
View File

@ -5,7 +5,7 @@
.markdown-body.green
:markdown-it(linkify langPrefix='highlight-')
# 关于
这是一个关于页面，欢迎访问。
> 世上本无事，庸人自扰之。
本人来自于**南昌**,**2018**年毕业于**江西师范大学**（有校友可以[联系我](/contact)）,专业为**软件工程**,目前从事于**前端工程师**工作。
> 世上本无事，庸人自扰之。

27
src/views/htmx/navbar/index.pug
View File

@ -1,21 +1,26 @@
-
const navbarOptions = {
title: siteConfig.site_title,
}
nav.navbar(class="relative")
.placeholder.mb-5(class="h-[45px] w-full opacity-0")
.placeholder(class="h-[45px] w-full opacity-0")
.fixed-container(class="shadow fixed bg-white h-[45px] top-0 left-0 right-0 z-10")
.container.clearfix(class="h-full")
.navbar-brand
a(href="/" class="text-[20px]") #{siteConfig.site_title}
.left.menu.desktop-only
a.menu-item(
href="/articles"
class=(currentPath === '/articles' || currentPath === '/articles/'
? 'text-blue-600 font-bold border-b-2 border-blue-600'
: 'text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-400'
)
) 所有文章
a(href="/" class="text-[20px]") #{navbarOptions.title}
//- .left.menu.desktop-only
//- a.menu-item(
//- href="/articles"
//- class=(currentPath === '/articles' || currentPath === '/articles/'
//- ? 'text-blue-600 font-bold border-b-2 border-blue-600'
//- : 'text-gray-700 hover:text-blue-600 hover:border-b-2 hover:border-blue-400'
//- )
//- ) 所有文章
if !user
.right.menu.desktop-only
a.menu-item(href="/login") 登录
a.menu-item(href="/register") 注册
//- a.menu-item(href="/register") 注册
else
.right.menu.desktop-only
a.menu-item(href="/profile")

2
src/views/layouts/empty.pug
View File

@ -7,7 +7,7 @@ block $$head
block $$content
include /htmx/navbar/index.pug
.page-layout
.page.container
.page.my-5
block pageContent
include /htmx/footer/index.pug

7
src/views/page/extra/about.pug
View File

@ -0,0 +1,7 @@
extends /layouts/empty.pug
block pageHead
block pageContent
.container.my-5
include /htmx/markdown/index.pug

2
src/views/page/extra/contact.pug
View File

@ -3,7 +3,7 @@ extends /layouts/empty.pug
block pageHead
block pageContent
.contact.container(class="mt-[20px] bg-white rounded-[12px] shadow p-6 border border-gray-100")
.contact.container(class="bg-white rounded-[12px] shadow p-6 border border-gray-100")
h1(class="text-3xl font-bold mb-6 text-center text-gray-800") 联系我们
p(class="text-gray-600 mb-8 text-center text-lg") 我们非常重视您的反馈和建议，欢迎通过以下方式与我们取得联系

2
src/views/page/extra/contactSuccess.pug
View File

@ -3,7 +3,7 @@ extends /layouts/empty.pug
block pageHead
block pageContent
.contact-success.container(class="mt-[20px] bg-white rounded-[12px] shadow p-6 border border-gray-100")
.contact-success.container(class="bg-white rounded-[12px] shadow p-6 border border-gray-100")
.success-content(class="text-center py-8")
// 成功图标
.success-icon(class="mb-6")

2
src/views/page/extra/faq.pug
View File

@ -3,7 +3,7 @@ extends /layouts/empty.pug
block pageHead
block pageContent
.faq.container(class="mt-[20px] bg-white rounded-[12px] shadow p-6 border border-gray-100")
.faq.container(class="bg-white rounded-[12px] shadow p-6 border border-gray-100")
h1(class="text-2xl font-bold mb-4") 常见问题（FAQ）
p(class="text-gray-600 mb-6") 为帮助您快速了解与使用本站，这里汇总了常见问答。

2
src/views/page/extra/feedback.pug
View File

@ -3,7 +3,7 @@ extends /layouts/empty.pug
block pageHead
block pageContent
.feedback.container(class="mt-[20px] bg-white rounded-[12px] shadow p-6 border border-gray-100")
.feedback.container(class="bg-white rounded-[12px] shadow p-6 border border-gray-100")
h1(class="text-2xl font-bold mb-2") 意见反馈
p(class="text-gray-600 mb-6") 欢迎提出您的建议或问题，我们会尽快处理。

2
src/views/page/extra/help.pug
View File

@ -3,7 +3,7 @@ extends /layouts/empty.pug
block pageHead
block pageContent
.help.container(class="mt-[20px] bg-white rounded-[12px] shadow p-6 border border-gray-100")
.help.container(class=" bg-white rounded-[12px] shadow p-6 border border-gray-100")
h1(class="text-3xl font-bold mb-6 text-center text-gray-800") 帮助中心
p(class="text-gray-600 mb-8 text-center text-lg") 欢迎使用帮助中心，这里为您提供完整的使用指南和问题解答

2
src/views/page/extra/privacy.pug
View File

@ -1,7 +1,7 @@
extends /layouts/empty.pug
block pageContent
.privacy.container(class="mt-[20px] bg-white rounded-[12px] shadow p-6 border border-gray-100")
.privacy.container(class="bg-white rounded-[12px] shadow p-6 border border-gray-100")
h1(class="text-2xl font-bold mb-4") 隐私政策
p(class="text-gray-600 mb-6") 我们重视您的个人信息与隐私保护。本隐私政策旨在向您说明我们如何收集、使用、共享与保护您的信息，以及您对个人信息享有的权利。请您在使用本站服务前仔细阅读并充分理解本政策的全部内容。

2
src/views/page/extra/terms.pug
View File

@ -1,7 +1,7 @@
extends /layouts/empty.pug
block pageContent
.terms.container(class="mt-[20px] bg-white rounded-[12px] shadow p-6 border border-gray-100")
.terms.container(class="bg-white rounded-[12px] shadow p-6 border border-gray-100")
h1(class="text-2xl font-bold mb-4") 服务条款
p(class="text-gray-600 mb-6") 欢迎使用本网站与相关服务。为保障您的合法权益，请在使用前仔细阅读并充分理解本服务条款。

19
src/views/page/index/index.pug
View File

@ -2,5 +2,22 @@ extends /layouts/empty.pug
block pageHead
mixin PeopleCared(name, role, desc, avatar)
.bg-white.shadow-md.rounded-md.p-6.flex.items-center.gap-4
img.w-16.h-16.rounded-full.object-cover(src=avatar alt=name)
.flex-1
.text-lg.font-semibold.text-gray-900 #{name}
if role
.text-sm.text-gray-500.mt-1 #{role}
if desc
p.text-sm.text-gray-600.mt-2 #{desc}
block pageContent
include /htmx/markdown/index.pug
.container
.grid.grid-cols-1.gap-4(class="md:grid-cols-4")
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', '/public/static/bg.jpg')
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', '/public/static/bg.jpg')
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', '/public/static/bg.jpg')
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', '/public/static/bg.jpg')
+PeopleCared('张三', '产品经理', '专注首页体验优化与可访问性改进', '/public/static/bg.jpg')

51
src/views/page/login/index.pug
View File

@ -8,31 +8,32 @@ block pageHead
//- }
block pageContent
.h-full.flex.items-center.justify-end.px-4.bg-red-400(class="sm:px-6 lg:px-8")
.max-w-md.w-full.space-y-8
.bg-white.py-8.px-4.shadow-xl.rounded-2xl(class="sm:px-10")
.text-center.mb-8
h2.text-3xl.font-bold.text-gray-900 欢迎回来
p.text-gray-600.mt-2 请登录您的账户
form.space-y-6(hx-post="/login")
include _ui/username.pug
include _ui/password.pug
.flex.items-center.justify-between
.flex.items-center
input#remember-me.h-4.w-4.text-blue-600.border-gray-300.rounded(type="checkbox" class="focus:ring-blue-500")
label.ml-2.block.text-sm.text-gray-900(for="remember-me") 记住我
.text-sm
a.font-medium.text-blue-600(href="#" class="hover:text-blue-500") 忘记密码？
div
button.group.relative.w-full.flex.justify-center.py-3.px-4.border.border-transparent.text-sm.font-medium.rounded-md.text-white.bg-blue-600(type="submit" class="hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out")
span.absolute.left-0.inset-y-0.flex.items-center.pl-3
//- svg.h-5.w-5.text-blue-500(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="group-hover:text-blue-400")
//- path(fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd")
span 登录
.text-center
p.text-sm.text-gray-600
| 还没有账户？
a.font-medium.text-blue-600(href="/register" class="hover:text-blue-500") 立即注册
.h-full(class="sm:px-6 lg:px-8")
.container.h-full.flex.items-center.justify-end.px-4
.max-w-md.w-full.space-y-8
.bg-white.py-8.px-4.shadow-xl.rounded-2xl(class="sm:px-10")
.text-center.mb-8
h2.text-3xl.font-bold.text-gray-900 欢迎回来
p.text-gray-600.mt-2 请登录您的账户
form.space-y-6(hx-post="/login")
include _ui/username.pug
include _ui/password.pug
.flex.items-center.justify-between
.flex.items-center
//- input#remember-me.h-4.w-4.text-blue-600.border-gray-300.rounded(type="checkbox" class="focus:ring-blue-500")
//- label.ml-2.block.text-sm.text-gray-900(for="remember-me") 记住我
.text-sm
a.font-medium.text-blue-600(href="#" class="hover:text-blue-500") 忘记密码？
div
button.group.relative.w-full.flex.justify-center.py-3.px-4.border.border-transparent.text-sm.font-medium.rounded-md.text-white.bg-blue-600(type="submit" class="hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 ease-in-out")
span.absolute.left-0.inset-y-0.flex.items-center.pl-3
//- svg.h-5.w-5.text-blue-500(xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="group-hover:text-blue-400")
//- path(fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd")
span 登录
.text-center
p.text-sm.text-gray-600
| 还没有账户？
a.font-medium.text-blue-600(href="/register" class="hover:text-blue-500") 立即注册
block pageScripts
script.

Write Preview
Loading…
Cancel
Save