JiXieShi
/
Blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP 手机访问

main
JiXieShi 2024-05-04 21:14:10 +08:00
parent f04ed0b242
commit ddd12b69c2
4 changed files with 113 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
models/html_template.go
View File

@ -107,13 +107,14 @@ func readHtmlTemplate(htmlFileName []string, viewDir string) ([]TemplatePointer,
var htmlTemplate []TemplatePointer var htmlTemplate []TemplatePointer
head := viewDir + "/layouts/head.html" head := viewDir + "/layouts/head.html"
nav := viewDir + "/layouts/nav.html"
footer := viewDir + "/layouts/footer.html" footer := viewDir + "/layouts/footer.html"
reviews := viewDir + "/layouts/reviews.html" reviews := viewDir + "/layouts/reviews.html"
for _, name := range htmlFileName { for _, name := range htmlFileName {
tp, err := template.New(name+".html"). tp, err := template.New(name+".html").
Funcs(template.FuncMap{"SpreadDigit": SpreadDigit}). Funcs(template.FuncMap{"SpreadDigit": SpreadDigit}).
ParseFiles(viewDir+"/"+name+".html", head, footer, reviews) ParseFiles(viewDir+"/"+name+".html", head, nav, footer, reviews)
if err != nil { if err != nil {
return nil, err return nil, err
} }

59
themes/blog/layouts/head.html
View File

@ -10,9 +10,12 @@
<meta name="description" content="{{ .Config.HtmlDescription }}" /> <meta name="description" content="{{ .Config.HtmlDescription }}" />
<title>{{ .Title }} - {{ .Config.SiteName }}</title> <title>{{ .Title }} - {{ .Config.SiteName }}</title>
<style>:root{--primary: {{ .Config.ThemeColor }}}</style> <style>:root{--primary: {{ .Config.ThemeColor }}}</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="/public/css/app.css"> <link rel="stylesheet" href="/public/css/app.css">
<link href="/public/css/prism.css" rel="stylesheet" /> <link href="/public/css/prism.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<script src="/public/js/marked.min.js"></script> <script src="/public/js/marked.min.js"></script>
<script async src="https://umami.starss.cc/script.js" data-website-id="594ff1a5-e8ce-47b1-8558-88cb3f9d7704"></script> <script async src="https://umami.starss.cc/script.js" data-website-id="594ff1a5-e8ce-47b1-8558-88cb3f9d7704"></script>
<script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script> <script async src="https://busuanzi.icodeq.com/busuanzi.pure.mini.js"></script>
@ -40,37 +43,33 @@
if(key)return paramsData.hasOwnProperty(key) ? paramsData[key] : null; if(key)return paramsData.hasOwnProperty(key) ? paramsData[key] : null;
return paramsData; return paramsData;
} }
function searchArticle() {
var searchKey = document.getElementById('search-input').value;
searchKey = searchKey.replace(/^\s+|\s+$/g,"")
if("" === searchKey){return}
window.location.href = '/?search=' + searchKey
}
</script> </script>
</head> </head>
<body class="theme{{ .Config.ThemeColor }}"> <body class="theme{{ .Config.ThemeColor }}">
<nav class="head"> <header>
<div class="container head-content"> <!-- <nav class="head">-->
<div class="logo">{{ .Config.SiteName }}</div> <!-- <div class="container head-content">-->
<div class="search-box"> <!-- <div class="logo">{{ .Config.SiteName }}</div>-->
<input id="search-input" class="search-input" type="text" placeholder="搜索..."> <!-- <div class="search-box">-->
<img onclick="searchArticle()" class="search-icon" src="/public/img/search.svg" alt=""> <!-- <input id="search-input" class="search-input" type="text" placeholder="搜索...">-->
</div> <!-- <img onclick="searchArticle()" class="search-icon" src="/public/img/search.svg" alt="">-->
<div class="nav"> <!-- </div>-->
<a href="/blog">Blog</a> <!-- <div class="nav">-->
<a href="/categories">Categories</a> <!-- <a href="/blog">Blog</a>-->
{{if ne .Config.MemosAlbumTag ""}} <!-- <a href="/categories">Categories</a>-->
<a href="/album">Album</a> <!-- {{if ne .Config.MemosAlbumTag ""}}-->
{{ end }} <!-- <a href="/album">Album</a>-->
{{if ne .Config.MemosTalkTag ""}} <!-- {{ end }}-->
<a href="/talk">Talk</a> <!-- {{if ne .Config.MemosTalkTag ""}}-->
{{ end }} <!-- <a href="/talk">Talk</a>-->
{{range $nav := .Navs }} <!-- {{ end }}-->
<a href="/extra-nav?name={{ $nav.Title }}">{{ $nav.Title }}</a> <!-- {{range $nav := .Navs }}-->
{{end}} <!-- <a href="/extra-nav?name={{ $nav.Title }}">{{ $nav.Title }}</a>-->
</div> <!-- {{end}}-->
</div> <!-- </div>-->
</nav> <!-- </div>-->
<!-- </nav>-->
{{template "nav" .}}
</header>
<div class="post-warp"> <div class="post-warp">
{{ end }} {{ end }}

71
themes/blog/layouts/nav.html Normal file
View File

@ -0,0 +1,71 @@
{{define "nav"}}
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: var(--primary,#673ab7);">
<div class="container">
<a class="navbar-brand" href="/blog" style="font-size: 120%">{{ .Config.SiteName }}</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/blog">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/categories">Categories</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
More
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
{{if ne .Config.MemosAlbumTag ""}}
<li><a class="dropdown-item" href="/album">Album</a></li>
{{ end }}
{{if ne .Config.MemosTalkTag ""}}
<li><a class="dropdown-item" href="/talk">Talk</a></li>
{{ end }}
<li><hr class="dropdown-divider"></li>
{{range $nav := .Navs }}
<li><a class="dropdown-item" href="/extra-nav?name={{ $nav.Title }}">{{ $nav.Title }}</a></li>
{{end}}
</ul>
</li>
<!-- <li class="nav-item">-->
<!-- <a class="nav-link disabled">Disabled</a>-->
<!-- </li>-->
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit"><img src="/public/img/search.svg" alt="Search" style=""></button>
</form>
</div>
</div>
</nav>
<script>
document.querySelector('form').addEventListener('submit', function(event) {
event.preventDefault();
const searchQuery = document.querySelector('.form-control').value.trim();
if (searchQuery) {
const searchUrl = `/?search=${encodeURIComponent(searchQuery)}`;
window.location.href = searchUrl;
} else {
console.log('请输入搜索关键词');
}
});
const btn = document.querySelector('.btn-outline-success');
const observer = new MutationObserver((mutationsList, observer) => {
for (let mutation of mutationsList) {
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
btn.style.borderColor= 'invert(100%)';
}
}
});
observer.observe(btn, { attributes: true });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
{{ end }}

51
themes/blog/public/css/app.css
View File

@ -41,7 +41,6 @@ a{
} }
a:hover{ a:hover{
color: #673ab7;
color: var(--primary,#673ab7); color: var(--primary,#673ab7);
} }
@ -61,7 +60,6 @@ blockquote::before{
content: '“'; content: '“';
font-family: fantasy; font-family: fantasy;
font-size: 40px; font-size: 40px;
color: #673ab7;
color: var(--primary,#673ab7); color: var(--primary,#673ab7);
} }
@ -80,35 +78,6 @@ blockquote::before{
} }
.container {
width: auto;
max-width: 1200px;
text-align: center;
margin: 0 auto;
}
.head{
width: 100%;
height: 64px;
}
.head-content{
display: flex;
height: 100%;
align-items: center;
justify-content: space-between;
}
@media screen and (max-width: 860px){
.head-content{
padding-top: 10px;
flex-direction: column;
}
}
.nav a{
padding: 0 8px;
}
.sub-title { .sub-title {
position: relative; position: relative;
width: 100%; width: 100%;
@ -248,7 +217,6 @@ hr:after{
padding-bottom: 6px; padding-bottom: 6px;
} }
.pagination li a:hover,.pagination .active a{ .pagination li a:hover,.pagination .active a{
border-bottom: 3px solid #673ab7;
border-bottom: 3px solid var(--primary,#673ab7); border-bottom: 3px solid var(--primary,#673ab7);
} }
@ -283,8 +251,6 @@ hr:after{
padding: 4px 20px; padding: 4px 20px;
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
background: #673ab7;
border: 2px solid #673ab7;
background: var(--primary,#673ab7); background: var(--primary,#673ab7);
border: 2px solid var(--primary,#673ab7); border: 2px solid var(--primary,#673ab7);
text-decoration: none; text-decoration: none;
@ -305,7 +271,6 @@ hr:after{
font-weight: normal; font-weight: normal;
} }
.articles li .title:hover{ .articles li .title:hover{
color: #673ab7;
color: var(--primary,#673ab7); color: var(--primary,#673ab7);
} }
.article-info{ .article-info{
@ -374,7 +339,6 @@ hr:after{
border-radius: 16px; border-radius: 16px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
border: 1px solid #673ab7;
border: 2px solid var(--primary,#673ab7); border: 2px solid var(--primary,#673ab7);
width: 320px; width: 320px;
} }
@ -382,7 +346,7 @@ hr:after{
text-align: center; text-align: center;
flex: 1; flex: 1;
border: none; border: none;
border-radius: 16px;border-radius: 16px; border-radius: 16px;
height: 30px; height: 30px;
padding: 0 10px; padding: 0 10px;
} }
@ -435,7 +399,6 @@ hr:after{
border-radius: 2px; border-radius: 2px;
opacity: .8; opacity: .8;
color: #fff; color: #fff;
background-color: #673ab7;
background-color: var(--primary,#673ab7); background-color: var(--primary,#673ab7);
font-size: 14px; font-size: 14px;
} }
@ -445,7 +408,6 @@ hr:after{
} }
.action-tip{ .action-tip{
font-size: 14px; font-size: 14px;
color: #673ab7;
color: var(--primary,#673ab7); color: var(--primary,#673ab7);
} }
.action-msg{ .action-msg{
@ -464,7 +426,6 @@ hr:after{
opacity: 1; opacity: 1;
min-width: 288px; min-width: 288px;
border-radius: 4px; border-radius: 4px;
background-color: #673ab7;
background-color: var(--primary,#673ab7); background-color: var(--primary,#673ab7);
box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12); box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
} }
@ -476,3 +437,13 @@ hr:after{
font-size: 16px; font-size: 16px;
right: 24px; right: 24px;
} }
.btn-outline-success {
border: 2px solid var(--primary, #673ab7);
filter: invert(100%);
}
.btn-outline-success img{
width:26px;
height: 24px;
}