Hugo Cactus｜给主题来场 makeover

Waline({
el: '#waline',
serverURL: 'Vercel分配或自定义的域名',
emoji:['https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs','https://cdn.jsdelivr.net/gh/Saidosi/azuki-emoji-for-waline@1.0/azukisan'],
avatar: 'monsterid',
placeholder:"欢迎留言！(^-^)/（但会删除不友善发言）\n*无需登录，邮箱可接收回复提示",
requiredMeta:['nick','mail'],  <!-- 设置必填项 -->
}
);

[[menu.main]]
name = "About"
url = "/about"
weight = 4

---
title: About
layout: about #指定套用的模板
---

<main>
<div class="article">  <!-- 后面好稍微修改一下样式 -->
{{ $aboutPage := .Page.GetPage "about/index" }}  <!-- 引入index.md的内容 -->
{{ .Content }}
</div>

<div class="container comment-waline">
{{ partial "comments.html" . }}
</div>
</main>

{{ partial "header.html" . }}
<div class="a-layouts">
<div class="left-sidebar"> 
	<section id="a-posts">
		{{ $allposts:= where site.RegularPages "Type" "in" site.Params.mainSections}}
		{{ $groupedPosts := $allposts.GroupByDate "2006" }}  <!-- 分组 -->
		{{ range $group := $groupedPosts }}
		<span class="ah3">{{ $group.Key }}</span>  <!-- ah3是我自定义的标题样式，给h3换了个颜色 -->
		<ul class="allpost-list">
			{{ range $pagebyyear := $group.Pages }}
			<li class="post-item">
				<div class="meta">
					<time datetime="{{ $pagebyyear.Date }}" itemprop="datePublished">{{ $pagebyyear.Date.Format "2006-01-02" }}</time></div>
				<span><a href="{{ $pagebyyear.Permalink }}">{{ $pagebyyear.Title }}</a></span>
			</li>
			{{ end }}
		</ul>
	{{ end }}
	</section>
</div>

 <!-- 下面是右侧的分类和标签 -->
 
<div class="right-sidebar">
	<section id="a-categories">
		<span class="h2">Categories</span>
		<ul class="category-list">
			{{ range $name,$taxo := .Site.Taxonomies.categories }}
			<li><a href="{{ $taxo.Page.Permalink }}">
			{{ $name | humanize }}</a>
			</li>
			{{end}}
		</ul>
	</section>
	<section id="a-tags">
		<span class="h2">Tags</span>
		<ul class="tag-list">
			{{ range $key,$value := .Site.Taxonomies.tags }}
			<li>
			<a href="{{ $value.Page.Permalink }}">
			#{{ $key | humanize }}</a> [{{ len $value.Pages }}] <!-- 效果：#tag [1] -->
			</li>
			{{end}}
		</ul>
	</section>
	</div>
</div>
{{ partial "footer.html" . }}
</div>
<link rel="stylesheet" href={{ "archive.scss" | relURL}}>  <!-- 引入样式 -->

.a-layouts {
display: flex;
justify-content: wrap;
}

.left-sidebar {
flex: 7; /* 左侧栏占据较大可用空间 */
padding:0 10px 0 0;
margin-right: 20px;
}

.right-sidebar {
flex: 3; /* 右侧栏占据更少可用空间 */
padding: 0 10px;
}

@media (max-width: 480px) {

.a-layouts {
flex-direction: column;
}

.left-sidebar {
order:2; /* 数字大的会显示在后面，让文章列表靠下显示 */
}

.right-sidebar {
order:1;
}

.category-list,
.tag-list {
margin-bottom: 0;
display: flex;
flex-wrap: wrap;
}

.category-list li,
.tag-list li {
flex:auto;
white-space: nowrap;
align-self:center;
display: inline-block; /*横向展示*/
}

- name: "这是一个没有指向的友链"
  url: "https://example.com"
  desc:

<section id="friendspagedesc">
	<div class="pagedesc" >
	<p><img src="https://www.nyan.cat/cats/original.gif" alt="nyancat" width="45"></p>  <!-- 突然想加个彩虹猫 -->
	<p>这里还空空如也(´❛-❛`)请和我交换友链吧！</p>
	<p>目前使用的样式非常简单，只需要博客名字和网址就可以</p>
	<p><del>如果哪天换了样式我会自己去翻简介的！</del></p>
	</div>
</section>

<hr style="border: 0; height: 1px; background-color: #ccc; margin: 20px auto; width:50%"/> <!--设置正文与评论区分割线为浅灰色-->

<section id="friends">
	<ul class="friends-list">
		{{ range $friend := $.Site.Data.friends }}  <!-- /data目录下的文件 -->
		<li class="friends-item">
			<a href="{{ $friend.url }}"target="_blank" rel="noopener">{{ $friend.name }}</a>
			{{ $friend.desc }}
		</li>
		{{ end }}
	</ul>
</section>

<style>

.pagedesc{
margin: 20px;
padding:0 10px;
color:$color-text;
line-height: 1rem;
}

.pagedesc p{
text-align: center;  <!-- 段落居中 -->
}

#friends{
margin: 10px 20px;
padding:0 10px;
}

.friends-list {
list-style: none;
display: flex;
justify-content:center;
flex-wrap: wrap;
margin-bottom: 20px;
}

.friends-list li {
padding:0 20px; /* 项目之间的间距 */
display: inline-block;
font-size: 1em;
line-height: 2rem;
}

.friends-list li a {
text-decoration: none; /* 不显示链接的下划线 */
color:$color-link;
}

</style>