主题美化
修改主页
默认首页都是文章内容,可以通过修改hugo.yml
配置文件来修改首页形式,具体见papermod-features
中这三种模式的配置写法。
这里我选择了 Home-Info Mode,并且使用了一言 ,修改方法如下:
首先是hugo.yml
中修改首页格式
params:
homeInfoParams:
Title: 你好呀 o(\* ̄▽ ̄\*)ブ
# Content:
其中Content
字段依旧注释掉,然后我们在layouts\partials\home_info.html
文件中增加一言功能,文件内容如下:
{{- with $.Site.Params.homeInfoParams }}
<article class="first-entry home-info">
<header class="entry-header">
<h1>{{ .Title | markdownify }}</h1>
</header>
<section class="entry-content">
<p id="hitokoto">
<a href="#" id="hitokoto_text" target="_blank">:D 获取中...</a>
</p>
<script>
fetch("https://v1.hitokoto.cn")
.then((response) => response.json())
.then((data) => {
const hitokoto = document.querySelector("#hitokoto_text");
hitokoto.href = `https://hitokoto.cn/?uuid=${data.uuid}`;
hitokoto.innerText = data.hitokoto;
})
.catch(console.error);
</script>
</section>
<footer class="entry-footer">
{{ partial "social_icons.html" $.Site.Params.socialIcons }}
</footer>
</article>
{{- end -}}
显示效果见主页
底部增加字数和篇数
在layouts\partials\footer.html
文件中合适的位置增加代码:
{{$scratch := newScratch}}
{{ range (where .Site.Pages "Kind" "page" )}}
{{$scratch.Add "total" .WordCount}}
{{ end }}
共生产 {{ len (where .Site.RegularPages "Section" "posts") }} 篇文章,约 {{ div ($scratch.Get "total") 1000.0 | lang.FormatNumber 2 }}k 字
添加自定义 css/js
在 layouts\partials\footer.html
文件末尾添加
{{ range .Site.Params.customcss }}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
{{ range .Site.Params.customjs }}
<script type="text/javascript" src="{{ . | absURL }}"></script>
{{- end }}
{{ range $elem := .Site.Params.customjscssraw }}
{{ $elem | safeHTML }}
{{- end }}
然后使用时在hugo.yaml
文件中添加相关配置即可。
params:
...
customcss:
- "css/xx.css"
customjs:
- "js/xx.js"
customjscssraw:
- "<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css' integrity='sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=' crossorigin='anonymous'>"
- >
<script async src='https://www.googletagmanager.com/gtag/js?id=G-XXX'></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXX');
</script>
配置中 css 和 js 文件路径都是相对路径,需要将对应文件放在static
文件夹下。
使用樱花特效
在html
文件中添加如下代码:
<script src="https://api.vvhan.com/api/script/yinghua"></script>
或者在markdown
文件中添加如下代码:
<!DOCTYPE html>
<html>
<script src="https://api.vvhan.com/api/script/yinghua"></script>
</html>
构建后即可看到樱花背景效果
shortcode
高斯模糊
新建layouts\shortcodes\blur.html
文件,代码如下:
<span class="blur"> {{ (.Get 0) | markdownify }} </span>
<style>
.blur {
filter: blur(5px);
transition: filter 0.3s;
}
.blur:hover {
filter: none;
}
</style>
使用方法:
{{< blur "内容" >}}
使用效果:
这里是 高斯模糊
文本折叠
新建layouts\shortcodes\detail.html
文件,内容如下:
<details>
<summary>{{ (.Get 0) | markdownify }}</summary>
{{ .Inner | markdownify }}
</details>
使用方法:
{{< detail "标题" >}}
内容
{{< /detail >}}
使用效果:
标题
内容文本黑幕
新建layouts\shortcodes\shady.html
文件,内容如下:
<span class="shady"> {{ (.Get 0) | markdownify }} </span>
<style>
.shady {
position: relative;
display: inline-block;
}
.shady::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 1;
transition: opacity 0.3s ease-in-out;
z-index: 1;
}
.shady:hover::before {
opacity: 0;
}
.shady span {
position: relative;
z-index: 2;
color: white;
}
</style>
使用方法:
{{< shady "内容" >}}
使用效果:
这里有 文本黑幕
notice
新建layouts\shortcodes\notice.html
文件,内容如下:
{{- $noticeType := .Get 0 -}}
{{- $raw := (markdownify .Inner | chomp) -}}
{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}
{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
<div class="notice-title">{{ $icon | safeHTML }}</div>
{{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p>{{ end -}}
</div>
<style>
.notice {
position: relative;
padding: 1em 1em 1em 2.5em;
margin-bottom: 1em;
border-radius: 4px;
}
.notice p:last-child {
margin-bottom: 0;
}
.notice .notice-title {
position: absolute;
left: 0.8em;
}
.notice .notice-title .notice-icon {
width: 1.2em;
height: 1.2em;
}
.notice.notice-warning {
background: rgba(224, 108, 108, 0.15);
border-left: 5px solid #e06c6c;
}
.notice.notice-warning .notice-title {
color: #e06c6c;
}
.notice.notice-info {
background: rgba(240, 179, 117, 0.15);
border-left: 5px solid #f0b375;
}
.notice.notice-info .notice-title {
color: #f0b375;
}
.notice.notice-note {
background: rgba(108, 185, 224, 0.15);
border-left: 5px solid #6cb9e0;
}
.notice.notice-note .notice-title {
color: #6cb9e0;
}
.notice.notice-tip {
background: rgba(108, 224, 146, 0.15);
border-left: 5px solid #6ce092;
}
.notice.notice-tip .notice-title {
color: #6ce092;
}
[data-theme="dark"] .notice.notice-warning {
background: rgba(112, 67, 67, 0.15);
border-left: 5px solid #704343;
}
[data-theme="dark"] .notice.notice-warning .notice-title {
color: #704343;
}
[data-theme="dark"] .notice.notice-info {
background: rgba(112, 89, 67, 0.15);
border-left: 5px solid #705943;
}
[data-theme="dark"] .notice.notice-info .notice-title {
color: #705943;
}
[data-theme="dark"] .notice.notice-note {
background: rgba(67, 97, 112, 0.15);
border-left: 5px solid #436170;
}
[data-theme="dark"] .notice.notice-note .notice-title {
color: #436170;
}
[data-theme="dark"] .notice.notice-tip {
background: rgba(67, 112, 82, 0.15);
border-left: 5px solid #437052;
}
[data-theme="dark"] .notice.notice-tip .notice-title {
color: #437052;
}
</style>
新建data\SVG.toml
文件增加 svg 图片:
# Notice Icon
notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512" fill="hsl(0, 65%, 65%)"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zM124 296c-6.6.0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h264c6.6.0 12 5.4 12 12v56c0 6.6-5.4 12-12 12H124z"/></svg>'
notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(30, 80%, 70%)"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(200, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512" fill="hsl(140, 65%, 65%)"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'
使用方法:
{{< notice notice-note >}}
这是 note
{{< /notice >}}
{{< notice notice-info >}}
这是 info
{{< /notice >}}
{{< notice notice-warning >}}
这是 warning
{{< /notice >}}
{{< notice notice-tip >}}
这是 tip
{{< /notice >}}
使用效果:
这是 note
这是 info
这是 warning
这是 tip
时间轴
新建layouts\shortcodes\timeline.html
文件,内容如下:
{{- $date := .Get "date" -}} {{- $title := .Get "title" -}} {{- $description := .Get "description" -}} {{- $tags := .Get "tags" -}}
<div class="timeline__row">
<div class="timeline__time">
<div class="timeline__time">{{ $date }}</div>
<div class="timeline__split-line"></div>
</div>
<div class="timeline__content">
<div class="timeline__tags">
{{- with split $tags ", " -}} {{- range . }}{{- if eq . "样式" }}
<span class="timeline__tag timeline__tag-style">{{ . }}</span> {{- else if eq . "文章" }}
<span class="timeline__tag timeline__tag-article">{{ . }}</span> {{- else if eq . "页面" }}
<span class="timeline__tag timeline__tag-page">{{ . }}</span> {{- else }}
<span class="timeline__tag">{{ . }}</span> {{- end }} {{- end }} {{- end }}
</div>
<div class="timeline__title">{{ $title | markdownify }}</div>
<div class="timeline__description">
{{ $description | markdownify}}
</div>
</div>
</div>
<style>
.timeline {
display: flex;
flex-direction: column;
}
.timeline__row {
display: flex;
padding-left: 4%;
height: 90px;
}
.timeline__time {
flex: 0 0 110px;
color: #5d5d5d;
font-size: 17px;
text-transform: uppercase;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem 0;
}
.timeline__time-text {
margin: 0;
}
.timeline__split-line {
position: absolute;
top: 0.5rem;
right: -20px;
height: 100%;
width: 2px;
background-color: #84c4e240;
z-index: 0;
}
.timeline__split-line:before {
content: "";
position: absolute;
top: 24%;
right: -4px;
transform: translateY(-50%);
width: 10px;
height: 10px;
background-color: #c9e5f2;
box-shadow: 0 0 0 4px var(--theme);
border-radius: 50%;
border: 0px solid #84c4e2;
z-index: -1;
}
.timeline__content {
flex: 1;
margin-left: 2.5rem;
padding: 0.5rem 0 1.2rem 0;
}
.timeline__title {
margin: 0;
margin-bottom: 2px;
padding-top: 3px;
margin-left: 0.5rem;
color: var(--content);
font-family: var(--font-family-teshu);
font-size: 19px;
font-weight: 600;
width: fit-content;
display: inline-block;
vertical-align: middle;
/* 垂直居中对齐 */
}
.timeline__tags {
display: inline-block;
padding: 0;
margin-left: 0.3rem;
align-items: center;
gap: 0.3rem;
}
.timeline__tag {
display: inline-block;
color: var(--secondary);
background-color: #84c4e230;
border: 1.5px solid #84c4e230;
border-radius: 999px;
padding: 0rem 0.5rem;
font-size: 12px;
white-space: nowrap;
line-height: 1.4rem;
opacity: 0.8;
vertical-align: middle;
/* 垂直居中对齐 */
}
.timeline__description {
font-size: 15px;
line-height: 1.6;
color: #5d5d5d;
overflow: hidden;
text-overflow: ellipsis;
margin: 0.5rem 0 0.4rem 1.5rem;
/* 添加 1.5rem 的左侧内边距 */
}
/* 为类名为 "timeline__tag-style" 的标签定义颜色 */
.timeline__tag-style {
background-color: #c581da;
/* 替换为你希望的颜色 */
border-color: #c581da;
/* 与背景色相同或不同,根据需要自定义 */
color: #ffffff;
/* 根据需要选择文本颜色 */
}
/* 为类名为 "timeline__tag-article" 的标签定义颜色 */
.timeline__tag-article {
background-color: #92d392;
/* 替换为你希望的颜色 */
border-color: #92d392;
/* 与背景色相同或不同,根据需要自定义 */
color: #000000;
/* 根据需要选择文本颜色 */
}
/* 为类名为 "timeline__tag-page" 的标签定义颜色 */
.timeline__tag-page {
background-color: #707070;
/* 替换为你希望的颜色 */
border-color: #707070;
/* 与背景色相同或不同,根据需要自定义 */
color: #ffffff;
/* 根据需要选择文本颜色 */
}
@media screen and (max-width: 768px) {
.timeline__time {
font-size: 14px;
/* 在小屏幕上使用较小的字体大小 */
}
.timeline__title {
font-size: 16px;
/* 在小屏幕上使用较小的字体大小 */
}
.timeline__description {
font-size: 14px;
/* 在小屏幕上使用较小的字体大小 */
}
}
</style>
使用方法:
{{< timeline date="2023-06-25" title="Hello Again" description="博客部署至[腾讯云轻量级服务器](https://curl.qcloud.com/wNpIBPJp)" tags="博客" >}}
{{< timeline date="2023-06-21" title="Hello Hugo" description="博客在本地搭建完成" tags="博客" >}}
使用效果: