split template

This commit is contained in:
aichy126 2022-11-30 11:23:04 +08:00
parent b09fc6b15f
commit d99f3f31f1
10 changed files with 100 additions and 360 deletions

View File

@ -86,3 +86,10 @@ func (tc *TemplateController) UserInfo(ctx *gin.Context) {
"cssPath": tc.cssPath,
})
}
func (tc *TemplateController) Page404(ctx *gin.Context) {
ctx.HTML(http.StatusOK, "404.html", gin.H{
"scriptPath": tc.scriptPath,
"cssPath": tc.cssPath,
})
}

View File

@ -35,4 +35,5 @@ func (a *TemplateRouter) RegisterTemplateRouter(r *gin.RouterGroup) {
r.GET("/tags", a.templateController.TagList)
r.GET("/tags/:tag", a.templateController.TagInfo)
r.GET("/users/:username", a.templateController.UserInfo)
r.GET("/404", a.templateController.Page404)
}

View File

@ -1,59 +1,9 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json"/>
<link href="{{.cssPath}}" rel="stylesheet" />
<!-- <script defer="defer" src="{{.scriptPath}}"></script> -->
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<nav id="header" class="sticky-top navbar navbar-expand-lg navbar-dark">
<div class="d-flex align-items-center container">
<button aria-controls="navBarContent" id="navBarToggle" type="button" aria-label="Toggle navigation"
class="answer-navBar me-2 navbar-toggler collapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex justify-content-between align-items-center nav-grow flex-nowrap">
<a class="lh-1 me-0 me-sm-3 navbar-brand" href="/"><img
class="d-none d-lg-block logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4Gud8KXBXA9.png" alt="" /><img
class="lg-none logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4GxqyBKy6hu.png" alt="" /></a>
</div>
<div class="me-auto navbar-collapse collapse" id="navBarContent">
<hr class="hr lg-none mb-2" style="margin-top: 12px" />
<div class="col-md-4">
<div class="navbar-nav">
<a class="nav-link" href="/questions">Questions</a><a class="nav-link" href="/tags">Tags</a>
</div>
</div>
<hr class="hr lg-none mt-2" />
</div>
</div>
</nav>
<div class="position-relative page-wrap">
{{template "header" . }}
<div class="d-flex flex-column justify-content-center align-items-center page-wrap container">
<div class="mb-4 text-secondary" style="font-size: 120px; line-height: 1.2;">(=x=)</div>
<div class="text-center mb-4">Unfortunately, this page doesn't exist.</div>
<div class="text-center"><a role="button" tabindex="0" href="/" class="btn btn-link">Back to
homepage</a></div>
</div>
</div>
<div class="d-flex justify-content-center"
style="position: fixed; top: 90px; left: 0px; right: 0px; margin: auto; z-index: 5;"></div>
<footer class="bg-light py-3">
<div class="container">
<p class="text-center mb-0 fs-14 text-secondary">Built on <a href="https://answer.dev/" target="_blank">
Answer </a>- the open-source software that power Q&amp;A communities<br>Made with love © 2022
Answer</p>
</div>
</footer>
</div>
</body>
</html>
{{template "footer" .}}

17
ui/template/footer.html Normal file
View File

@ -0,0 +1,17 @@
{{define "footer"}}
</div>
<footer class="bg-light py-3">
<div class="container">
<p class="text-center mb-0 fs-14 text-secondary">
Built on <a href="https://answer.dev/" target="_blank"> Answer </a>-
the open-source software that power Q&amp;A communities<br />Made
with love © 2022 Answer
</p>
</div>
</footer>
</div>
</body>
</html>
{{end}}

42
ui/template/header.html Normal file
View File

@ -0,0 +1,42 @@
{{define "header"}}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json"/>
<link href="{{.cssPath}}" rel="stylesheet" />
<!-- <script defer="defer" src="{{.scriptPath}}"></script> -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<nav id="header" class="sticky-top navbar navbar-expand-lg navbar-dark">
<div class="d-flex align-items-center container">
<button aria-controls="navBarContent" id="navBarToggle" type="button" aria-label="Toggle navigation"
class="answer-navBar me-2 navbar-toggler collapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex justify-content-between align-items-center nav-grow flex-nowrap">
<a class="lh-1 me-0 me-sm-3 navbar-brand" href="/"><img
class="d-none d-lg-block logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4Gud8KXBXA9.png" alt="" /><img
class="lg-none logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4GxqyBKy6hu.png" alt="" /></a>
</div>
<div class="me-auto navbar-collapse collapse" id="navBarContent">
<hr class="hr lg-none mb-2" style="margin-top: 12px" />
<div class="col-md-4">
<div class="navbar-nav">
<a class="nav-link" href="/questions">Questions</a><a class="nav-link" href="/tags">Tags</a>
</div>
</div>
<hr class="hr lg-none mt-2" />
</div>
</div>
</nav>
<div class="position-relative page-wrap">
{{end}}

View File

@ -1,43 +1,6 @@
<!DOCTYPE html>
<html>
{{template "header" . }}
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json"/>
<link href="{{.cssPath}}" rel="stylesheet" />
<!-- <script defer="defer" src="{{.scriptPath}}"></script> -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<nav id="header" class="sticky-top navbar navbar-expand-lg navbar-dark">
<div class="d-flex align-items-center container">
<button aria-controls="navBarContent" id="navBarToggle" type="button" aria-label="Toggle navigation"
class="answer-navBar me-2 navbar-toggler collapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex justify-content-between align-items-center nav-grow flex-nowrap">
<a class="lh-1 me-0 me-sm-3 navbar-brand" href="/"><img
class="d-none d-lg-block logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4Gud8KXBXA9.png" alt="" /><img
class="lg-none logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4GxqyBKy6hu.png" alt="" /></a>
</div>
<div class="me-auto navbar-collapse collapse" id="navBarContent">
<hr class="hr lg-none mb-2" style="margin-top: 12px" />
<div class="col-md-4">
<div class="navbar-nav">
<a class="nav-link" href="/questions">Questions</a><a class="nav-link" href="/tags">Tags</a>
</div>
</div>
<hr class="hr lg-none mt-2" />
</div>
</div>
</nav>
<div class="position-relative page-wrap">
<div class="pt-4 mt-2 mb-5 container">
<div class="justify-content-center row">
<div class="col-xxl-7 col-lg-8 col-sm-12">
@ -85,25 +48,6 @@
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center" style="
position: fixed;
top: 90px;
left: 0px;
right: 0px;
margin: auto;
z-index: 5;
"></div>
<footer class="bg-light py-3">
<div class="container">
<p class="text-center mb-0 fs-14 text-secondary">
Built on <a href="https://answer.dev/" target="_blank"> Answer </a>-
the open-source software that power Q&amp;A communities<br />Made
with love © 2022 Answer
</p>
</div>
</footer>
</div>
</body>
</html>
{{template "footer" .}}

View File

@ -1,43 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json"/>
<link href="{{.cssPath}}" rel="stylesheet" />
<!-- <script defer="defer" src="{{.scriptPath}}"></script> -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<nav id="header" class="sticky-top navbar navbar-expand-lg navbar-dark">
<div class="d-flex align-items-center container">
<button aria-controls="navBarContent" id="navBarToggle" type="button" aria-label="Toggle navigation"
class="answer-navBar me-2 navbar-toggler collapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex justify-content-between align-items-center nav-grow flex-nowrap">
<a class="lh-1 me-0 me-sm-3 navbar-brand" href="/"><img
class="d-none d-lg-block logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4Gud8KXBXA9.png" alt="" /><img
class="lg-none logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4GxqyBKy6hu.png" alt="" /></a>
</div>
<div class="me-auto navbar-collapse collapse" id="navBarContent">
<hr class="hr lg-none mb-2" style="margin-top: 12px" />
<div class="col-md-4">
<div class="navbar-nav">
<a class="nav-link" href="/questions">Questions</a><a class="nav-link" href="/tags">Tags</a>
</div>
</div>
<hr class="hr lg-none mt-2" />
</div>
</div>
</nav>
<div class="position-relative page-wrap">
{{template "header" . }}
<div class="pt-4 mt-2 mb-5 questionDetailPage container">
<div class="justify-content-center row">
<div class="mb-5 mb-md-0 col-xxl-7 col-lg-8 col-sm-12">
@ -530,25 +491,5 @@
">
<div class="d-flex justify-content-center"></div>
</div>
</div>
<div class="d-flex justify-content-center" style="
position: fixed;
top: 90px;
left: 0px;
right: 0px;
margin: auto;
z-index: 5;
"></div>
<footer class="bg-light py-3">
<div class="container">
<p class="text-center mb-0 fs-14 text-secondary">
Built on <a href="https://answer.dev/" target="_blank"> Answer </a>-
the open-source software that power Q&amp;A communities<br />Made
with love © 2022 Answer
</p>
</div>
</footer>
</div>
</body>
{{template "footer" .}}
</html>

View File

@ -1,44 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json"/>
<link href="{{.cssPath}}" rel="stylesheet" />
<!-- <script defer="defer" src="{{.scriptPath}}"></script> -->
</head>
<body>
111
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<nav id="header" class="sticky-top navbar navbar-expand-lg navbar-dark">
<div class="d-flex align-items-center container">
<button aria-controls="navBarContent" id="navBarToggle" type="button" aria-label="Toggle navigation"
class="answer-navBar me-2 navbar-toggler collapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex justify-content-between align-items-center nav-grow flex-nowrap">
<a class="lh-1 me-0 me-sm-3 navbar-brand" href="/"><img
class="d-none d-lg-block logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4Gud8KXBXA9.png" alt="" /><img
class="lg-none logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4GxqyBKy6hu.png" alt="" /></a>
</div>
<div class="me-auto navbar-collapse collapse" id="navBarContent">
<hr class="hr lg-none mb-2" style="margin-top: 12px" />
<div class="col-md-4">
<div class="navbar-nav">
<a class="nav-link" href="/questions">Questions</a><a class="nav-link" href="/tags">Tags</a>
</div>
</div>
<hr class="hr lg-none mt-2" />
</div>
</div>
</nav>
<div class="position-relative page-wrap">
{{template "header" . }}
<div class="pt-4 mt-2 mb-5 container">
<div class="justify-content-center row">
<div class="col-xxl-7 col-lg-8 col-sm-12">
@ -109,25 +69,4 @@
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center" style="
position: fixed;
top: 90px;
left: 0px;
right: 0px;
margin: auto;
z-index: 5;
"></div>
<footer class="bg-light py-3">
<div class="container">
<p class="text-center mb-0 fs-14 text-secondary">
Built on <a href="https://answer.dev/" target="_blank"> Answer </a>-
the open-source software that power Q&amp;A communities<br />Made
with love © 2022 Answer
</p>
</div>
</footer>
</div>
</body>
</html>
{{template "footer" .}}

View File

@ -1,44 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json"/>
<link href="{{.cssPath}}" rel="stylesheet" />
<!-- <script defer="defer" src="{{.scriptPath}}"></script> -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<nav id="header" class="sticky-top navbar navbar-expand-lg navbar-dark">
<div class="d-flex align-items-center container">
<button aria-controls="navBarContent" id="navBarToggle" type="button" aria-label="Toggle navigation"
class="answer-navBar me-2 navbar-toggler collapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex justify-content-between align-items-center nav-grow flex-nowrap">
<a class="lh-1 me-0 me-sm-3 navbar-brand" href="/"><img
class="d-none d-lg-block logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4Gud8KXBXA9.png" alt="" /><img
class="lg-none logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4GxqyBKy6hu.png" alt="" /></a>
</div>
<div class="me-auto navbar-collapse collapse" id="navBarContent">
<hr class="hr lg-none mb-2" style="margin-top: 12px" />
<div class="col-md-4">
<div class="navbar-nav">
<a class="nav-link" href="/questions">Questions</a><a class="nav-link" href="/tags">Tags</a>
</div>
</div>
<hr class="hr lg-none mt-2" />
</div>
</div>
</nav>
<div class="position-relative page-wrap">
{{template "header" . }}
<div class="pt-4 mt-2 mb-5 container">
<div class="justify-content-center row">
<div class="col-xxl-7 col-lg-8 col-sm-12">
@ -172,25 +132,4 @@
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center" style="
position: fixed;
top: 90px;
left: 0px;
right: 0px;
margin: auto;
z-index: 5;
"></div>
<footer class="bg-light py-3">
<div class="container">
<p class="text-center mb-0 fs-14 text-secondary">
Built on <a href="https://answer.dev/" target="_blank"> Answer </a>-
the open-source software that power Q&amp;A communities<br />Made
with love © 2022 Answer
</p>
</div>
</footer>
</div>
</body>
</html>
{{template "footer" .}}

View File

@ -1,44 +1,4 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="manifest" href="/manifest.json"/>
<link href="{{.cssPath}}" rel="stylesheet" />
<!-- <script defer="defer" src="{{.scriptPath}}"></script> -->
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<nav id="header" class="sticky-top navbar navbar-expand-lg navbar-dark">
<div class="d-flex align-items-center container">
<button aria-controls="navBarContent" id="navBarToggle" type="button" aria-label="Toggle navigation"
class="answer-navBar me-2 navbar-toggler collapsed">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-flex justify-content-between align-items-center nav-grow flex-nowrap">
<a class="lh-1 me-0 me-sm-3 navbar-brand" href="/"><img
class="d-none d-lg-block logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4Gud8KXBXA9.png" alt="" /><img
class="lg-none logo rounded-1 me-0"
src="https://answer.dev.segmentfault.com/uploads/branding/4GxqyBKy6hu.png" alt="" /></a>
</div>
<div class="me-auto navbar-collapse collapse" id="navBarContent">
<hr class="hr lg-none mb-2" style="margin-top: 12px" />
<div class="col-md-4">
<div class="navbar-nav">
<a class="nav-link" href="/questions">Questions</a><a class="nav-link" href="/tags">Tags</a>
</div>
</div>
<hr class="hr lg-none mt-2" />
</div>
</div>
</nav>
<div class="position-relative page-wrap">
{{template "header" . }}
<div style="
position: fixed;
top: 90px;
@ -74,6 +34,23 @@
</div>
<div class="mb-4 col-lg-3 col-md-4 col-sm-6 col-12">
<div class="h-100 card">
<div class="d-flex flex-column align-items-start card-body">
<a href="/tags/%E7%AE%97%E6%B3%95" class="badge-tag rounded-1 mb-3"><span
class="">算法</span></a>
<p class="fs-14 flex-fill text-break text-wrap text-truncate-4">212121212121221
</p>
<div class="d-flex align-items-center">
<button type="button" class="me-2 btn btn-outline-primary btn-sm">
Follow</button><span class="text-secondary fs-14 text-nowrap">0
questions</span>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<ul class="d-inline-flex mb-0 pagination pagination-sm">
@ -93,25 +70,8 @@
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center" style="
position: fixed;
top: 90px;
left: 0px;
right: 0px;
margin: auto;
z-index: 5;
"></div>
<footer class="bg-light py-3">
<div class="container">
<p class="text-center mb-0 fs-14 text-secondary">
Built on <a href="https://answer.dev/" target="_blank"> Answer </a>-
the open-source software that power Q&amp;A communities<br />Made
with love © 2022 Answer
</p>
</div>
</footer>
</div>
</body>
</html>
{{template "footer" .}}