new: Added friends page and adjust page style

This commit is contained in:
2024-12-19 15:21:36 +08:00
parent 4491e806e0
commit 2fa6e78626
16 changed files with 240 additions and 148 deletions

View File

@@ -54,6 +54,9 @@ site:
- name: Archive
icon: fa-solid fa-box-archive
url: /archive
- name: Friends
icon: fa-solid fa-user-group
url: /friend
- name: About
icon: fa-solid fa-circle-info
url: /about
@@ -71,20 +74,29 @@ site:
number: 10
archive:
title: Archive
number: 10
number: 15
search:
title: Search
number: 10
number: 15
category:
title: Category
number: 10
number: 15
tag:
title: Tag
number: 10
number: 15
# about config
about:
title: About me
title: About
src: _blog/src/about
dst: _blog/dst/about
filename: index
# friends link
friend:
title: Friends
list:
- name:
link:
avatar:
description:

13
config/mFriend.go Normal file
View File

@@ -0,0 +1,13 @@
package config
type mFriend struct {
Title string `json:"title"`
List []mFriendItem `json:"list"`
}
type mFriendItem struct {
Name string `yaml:"name"`
Link string `yaml:"link"`
Avatar string `yaml:"avatar"`
Description string `yaml:"description"`
}

View File

@@ -5,4 +5,5 @@ type mSite struct {
Menu mMenu `yaml:"menu"`
Post mPost `yaml:"post"`
About mAbout `yaml:"about"`
Friend mFriend `yaml:"friend"`
}

View File

@@ -496,3 +496,21 @@ func (ma *MApp) RSSHandler(ctx *gin.Context) {
ctx.String(http.StatusNotFound, "RSS Not Found")
}
}
func (ma *MApp) FriendHandler(ctx *gin.Context) {
resData := gin.H{
"site_info": gin.H{
"logo": ma.Config.MSite.Info.Logo,
"title": ma.Config.MSite.Info.Title,
"author": ma.Config.MSite.Info.Author,
"language": ma.Config.MSite.Info.Language,
"copyright": template.HTML(ma.Config.MSite.Info.Copyright),
},
"menu": ma.Config.MSite.Menu,
"friend": gin.H{
"title": ma.Config.MSite.Friend.Title,
"list": ma.Config.MSite.Friend.List,
},
}
ctx.HTML(http.StatusOK, "friend.html", resData)
}

View File

@@ -7,6 +7,7 @@ func (ma *MApp) loadRoutes() {
ma.engine.GET("/rss", ma.RSSHandler)
ma.engine.GET("/about", ma.AboutHandler)
ma.engine.GET("/search", ma.SearchHandler)
ma.engine.GET("/friend", ma.FriendHandler)
ma.engine.GET("/archive", ma.ArchiveHandler)
ma.engine.GET("/post/:hash", ma.PostHandler)
ma.engine.GET("/tag/:hash", ma.TagHandler)

View File

@@ -16,9 +16,10 @@ tr, th, td {
color: var(--primary-text-color);
}
.about-title-wrap {
text-align: center;
.root-container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.about-title {
@@ -27,7 +28,6 @@ tr, th, td {
.about-content {
line-height: 1.6;
max-width: 1000px;
color: var(--primary-text-color);
}

View File

@@ -0,0 +1,43 @@
.friend-title {
color: var(--primary-color);
}
.friend-item {
margin-top: 20px;
padding: 10px;
display: flex;
align-items: center;
color: var(--primary-text-color);
border: var(--secondary-text-color) 1px dashed;
border-radius: 4px;
}
.friend-item:hover {
cursor: pointer;
border: var(--primary-color) 1px solid;
}
.friend-avatar {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 50%;
}
.friend-info-wrap {
padding-left: 10px;
}
.friend-name {
font-size: 18px;
font-weight: bolder;
}
.friend-description {
width: 200px;
font-size: 14px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--secondary-text-color);
}

View File

@@ -40,8 +40,8 @@
width: 100%;
height: 100%;
opacity: 0.4;
mask-image: radial-gradient(at 100% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: radial-gradient(at 100% 0%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
mask-image: radial-gradient(at 100% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-image: radial-gradient(at 100% 100%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
.tag-word-cloud-canvas * {

View File

@@ -2,24 +2,3 @@ function search() {
const keyword = document.getElementById("index-search-input").value;
window.location.href = "/search?keyword=" + keyword;
}
function typeWriter(element_id, text) {
const element = document.getElementById(element_id);
let i = 0;
element.innerHTML = '';
function type() {
if (i < text.length) {
const minSpeed = 50;
const maxSpeed = 200;
const randomSpeed = Math.floor(Math.random() * (maxSpeed - minSpeed + 1)) + minSpeed;
element.innerHTML += text.charAt(i);
i++;
setTimeout(type, randomSpeed);
}
}
type();
}

View File

@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .site_info.title }}</title>
<title>{{ .site_info.title }} | {{ .about.title }}</title>
<link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
<link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
<link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
@@ -19,29 +19,31 @@
<body>
<div class="root-container">
<!-- body -->
<!-- menu -->
<div class="container p-3">
<div class="row pt-lg-3">
<div class="col-8 mx-auto">
<div class="about-title-wrap">
<h3 class="about-title"># {{ .about.title }}</h3>
<div class="row pt-3">
<div class="col-12 col-md-9 mx-auto post-menu">
<div class="col">
{{ range $i, $v := .menu.Items }}
<span class="main-menu-item">
<i class="{{ $v.Icon }} m-icon"></i>
<a class="main-menu-link" href="{{ $v.Url }}"> {{ $v.Name }} </a>
</span>
{{ end }}
</div>
</div>
</div>
<div class="about-content-wrap">
<!-- body -->
<div class="container p-3">
<div class="row pt-lg-3">
<div class="col mx-auto">
<h3 class="about-title"># {{ .about.title }}</h3>
<div class="about-content">
{{ .about.content }}
</div>
</div>
</div>
</div>
</div>
<!-- post footer -->
{{ if .about.success }}

View File

@@ -4,30 +4,19 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .site_info.title }}</title>
<title>{{ .site_info.title }} | {{ .history_post.title }}</title>
<link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
<link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
<link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/global.css">
<link rel="stylesheet" href="../assets/css/archive.css">
<script src="../assets/js/lib/typed.umd.js"></script>
<script src="../assets/js/lib/jquery.min.js"></script>
<script src="../assets/js/lib/bootstrap.min.js"></script>
<script src="../assets/js/lib/fontawesome.all.min.js"></script>
</head>
<body>
<div class="root-container">
<!-- header -->
<div class="container p-3">
<div class="row pt-3 pt-md-4 pt-lg-5">
<div class="col main-logo">
<div class="main-logo-img" style="background-image: url('{{ .site_info.logo }}');"></div>
<div class="main-logo-txt">
{{ .site_info.title }}
</div>
</div>
</div>
</div>
<div class="d-block d-md-none" style="height: 30px;"></div>
<!-- menu -->
<div class="container p-3">
@@ -41,6 +30,13 @@
{{ end }}
</div>
</div>
</div>
<!-- body -->
<div class="container p-3">
<div class="row pt-lg-3">
<h3 class="history-post-title"># {{ .history_post.title }}</h3>
<div class="row pt-4">
<div class="search-wrap">
<input class="search-input" id="archive-search-input" type="text">
@@ -50,15 +46,8 @@
</button>
</div>
</div>
</div>
<!-- body -->
<div class="container p-3">
<div class="row pt-lg-3">
<h4 class="history-post-title"># {{ .history_post.title }}</h4>
<div class="col-12 col-lg-9">
<div>
<div class="row pt-4">
<div class="col">
{{ range $i, $v := .history_post.posts }}
<div class="row history-post-item">
<div class="col history-post-item-wrap">
@@ -83,23 +72,6 @@
{{ end }}
</div>
</div>
<!-- special info -->
<!-- motto -->
<div class="col-lg-3 d-none d-lg-grid carousel slide special-info-area">
<div id="archive-motto-container"></div>
</div>
{{ .site_info.motto_html }}
<script>
const options = {
strings: motto,
typeSpeed: 30,
startDelay: 100,
showCursor: false,
};
new Typed("#archive-motto-container", options);
</script>
</div>
<div class="row pt-3 pt-lg-4">

View File

@@ -16,17 +16,7 @@
</head>
<body>
<div class="root-container">
<!-- header -->
<div class="container p-3">
<div class="row pt-3 pt-md-4 pt-lg-5">
<div class="col main-logo">
<div class="main-logo-img" style="background-image: url('{{ .site_info.logo }}');"></div>
<div class="main-logo-txt">
{{ .site_info.title }}
</div>
</div>
</div>
</div>
<div class="d-block d-md-none" style="height: 30px;"></div>
<!-- menu -->
<div class="container p-3">
@@ -44,9 +34,9 @@
<!-- body -->
<div class="container p-3">
<div class="row pt-lg-3">
<h4 class="categorized-post-title"># {{ .categorized_post.title }}</h4>
<div class="col-12">
<div>
<h3 class="categorized-post-title"># {{ .categorized_post.title }}</h3>
<div class="row">
<div class="col pt-4">
{{ range $i, $v := .categorized_post.posts }}
<div class="row categorized-post-item">
<div class="col categorized-post-item-wrap">

View File

@@ -0,0 +1,80 @@
{{ define "friend.html" }}
<html lang="{{ .site_info.language }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ .site_info.title }} | {{ .friend.title }}</title>
<link rel="icon" type="image/x-icon" href="{{ .site_info.logo }}"/>
<link rel="stylesheet" href="../assets/css/lib/fontawesome.all.min.css">
<link rel="stylesheet" href="../assets/css/lib/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/lib/xcode-dark.css">
<link rel="stylesheet" href="../assets/css/global.css">
<link rel="stylesheet" href="../assets/css/friend.css">
<script src="../assets/js/lib/typed.umd.js"></script>
<script src="../assets/js/lib/jquery.min.js"></script>
<script src="../assets/js/lib/bootstrap.min.js"></script>
<script src="../assets/js/lib/fontawesome.all.min.js"></script>
</head>
<body>
<div class="root-container">
<div class="d-block d-md-none" style="height: 30px;"></div>
<!-- menu -->
<div class="container p-3">
<div class="row pt-lg-3">
<div class="col mx-auto">
{{ range $i, $v := .menu.Items }}
<span class="main-menu-item">
<i class="{{ $v.Icon }} m-icon"></i>
<a class="main-menu-link" href="{{ $v.Url }}"> {{ $v.Name }} </a>
</span>
{{ end }}
</div>
</div>
</div>
<!-- body -->
<div class="container p-3">
<div class="row pt-3">
<div class="col mx-auto">
<h3 class="friend-title"># {{ .friend.title }}</h3>
<div class="friend-content">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
{{ range $i, $v := .friend.list }}
<div class="col">
<div class="friend-item" onclick="goto('{{ $v.Link }}')">
<img class="friend-avatar" src="{{ $v.Avatar }}">
<div class="friend-info-wrap">
<div class="friend-name">
{{ $v.Name }}
</div>
<div class="friend-description">
{{ $v.Description }}
</div>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
{{ .site_info.copyright }}
</div>
<script>
function goto(path) {
window.location.href = path;
}
</script>
</body>
</html>
{{ end }}

View File

@@ -17,10 +17,11 @@
</head>
<body>
<div class="root-container">
<div class="d-block d-md-none" style="height: 30px;"></div>
<!-- menu -->
<div class="container p-3">
<div class="row pt-3 pt-md-4 pt-lg-5">
<div class="row pt-lg-3">
<div class="col-12 col-md-9 mx-auto post-menu">
{{ range $i, $v := .menu.Items }}
<i class="{{ $v.Icon }} m-icon"></i>

View File

@@ -16,17 +16,7 @@
</head>
<body>
<div class="root-container">
<!-- header -->
<div class="container p-3">
<div class="row pt-3 pt-md-4 pt-lg-5">
<div class="col main-logo">
<div class="main-logo-img" style="background-image: url('{{ .site_info.logo }}');"></div>
<div class="main-logo-txt">
{{ .site_info.title }}
</div>
</div>
</div>
</div>
<div class="d-block d-md-none" style="height: 30px;"></div>
<!-- menu -->
<div class="container p-3">
@@ -38,6 +28,13 @@
{{ end }}
</div>
</div>
</div>
<!-- body -->
<div class="container p-3">
<div class="row pt-lg-3">
<h3 class="search-post-title"># {{ .search_post.title }}</h3>
<div class="row pt-4">
<div class="search-wrap">
<input class="search-input" id="search-search-input" type="text">
@@ -47,15 +44,8 @@
</button>
</div>
</div>
</div>
<!-- body -->
<div class="container p-3">
<div class="row pt-lg-3">
<h4 class="search-post-title"># {{ .search_post.title }}</h4>
<div class="col-12 col-lg-9">
<div>
<div class="row pt-4">
<div class="col">
{{ range $i, $v := .search_post.posts }}
<div class="row search-post-item">
<div class="col search-post-item-wrap">

View File

@@ -17,17 +17,7 @@
</head>
<body>
<div class="root-container">
<!-- header -->
<div class="container p-3">
<div class="row pt-3 pt-md-4 pt-lg-5">
<div class="col main-logo">
<div class="main-logo-img" style="background-image: url('{{ .site_info.logo }}');"></div>
<div class="main-logo-txt">
{{ .site_info.title }}
</div>
</div>
</div>
</div>
<div class="d-block d-md-none" style="height: 30px;"></div>
<!-- menu -->
<div class="container p-3">
@@ -44,9 +34,9 @@
<!-- body -->
<div class="container p-3">
<div class="row pt-lg-3">
<h4 class="tagged-post-title"># {{ .tagged_post.title }}</h4>
<div class="col-12 col-md-8">
<div>
<h3 class="tagged-post-title"># {{ .tagged_post.title }}</h3>
<div class="row">
<div class="col pt-4">
{{ range $i, $v := .tagged_post.posts }}
<div class="row tagged-post-item">
<div class="col tagged-post-item-wrap">