mirror of
https://github.com/yv1ing/MollyBlog.git
synced 2025-09-16 14:53:45 +08:00
new: Added friends page and adjust page style
This commit is contained in:
22
config.yaml
22
config.yaml
@@ -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
13
config/mFriend.go
Normal 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"`
|
||||
}
|
||||
@@ -5,4 +5,5 @@ type mSite struct {
|
||||
Menu mMenu `yaml:"menu"`
|
||||
Post mPost `yaml:"post"`
|
||||
About mAbout `yaml:"about"`
|
||||
Friend mFriend `yaml:"friend"`
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
43
templates/default/assets/css/friend.css
Normal file
43
templates/default/assets/css/friend.css
Normal 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);
|
||||
}
|
||||
@@ -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 * {
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
80
templates/default/html/friend.html
Normal file
80
templates/default/html/friend.html
Normal 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 }}
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user