blog--4美化主题

基础配置(保证了简单的基础功能可运行)

• 目录结构在blog-2中

bug

• 把你的网站名/themes/hugo-theme-stack/exampleSite/目录下的config.yaml复制到网站根目录(也就是你的网站名这个目录)
• 删除网站根目录的config.toml stack主题不需要这个配置文件
• 打开网站根目录下的config.yaml进行填空
• 博主头像放在/themes/hugo-theme-stack/assets/img/下 关于那个头像下的emoji,如果你不想加上，emoji那一行留空就好
• config.yaml操作细节
  • 修改你网站根目录下的config.yaml
  • 文章位置
    • 你的文章是在网站根目录/content/posts/下
    • 你的"分类"在网站根目录/content/categories下
  • 文章不显示

            params:
                mainSections:
                      - posts
# 如果一个博文的发布时间比 Hugo 构建当前站点的时间还要晚，也就是 Hugo 认为博文的发布时间在未来，就不会渲染该篇博文。前面没有写时区的博文，就是被 Hugo 认为发布时间还未到，所以没有渲染出来。
# draft 草稿，若为真，则不现实 将 draft:true 改为 false 即可
1
2
3
4
5

- 评论区配置
1

comments:
        enabled: true  #开启评论功能设置为true
        provider: gitalk #提供平台，我这里是gitalk,当然你也可以选择其他的
#注意:提供平台选哪个下面的就填哪块区域

# gitaik配置
gitalk:
            owner: 你的GitHub用户名
            admin: 你的GitHub用户名 
            repo: 你的GitHub仓库名 #(注意不是网址!!!!!!!)
            clientID: 
            clientSecret: 
#ClientID和ClientSecret请不要随意告诉他人哦~
1
2
3
4
5
6
7
8
9
10
11
12
13

• ClientID和ClientSecret获取方法: 去GitHub开发者设置里新建一个OAuth App

Applicaton Name:随便起个名字
Homepage URL:你博客的url
Application description:描述，随便写
Authorization callback URL:你博客url
Enable Device Flow 不勾选
保存后就可以获得ClientID，在它的下面(Client Secret框里)点击Generate a new client secret
然后记得保存好，因为Client Secret你只能看到一次
1
2
3
4
5
6
7

---
title: "文章标题"
description: "简介"
date: 2022-01-29T02:02:45-05:00
image: "你同目录下的封面图片名字(带后缀并且是相对路径)"
draft: flase
# draft 草稿，若为真，则不现实 将 draft:true 改为 false 即可
categories:
    - 分类1
    - 分类2
tags:
    - 标签1
    - 标签2
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14

进阶配置

• 在 Hugo 的 Stack 主题中，config.yaml 文件的 params 部分用于设置站点的全局参数。下面是一些主要的参数及其功能和用法

#1 基本参数：这部分参数主要用于设置站点的基本信息，包括站点标题、副标题、作者、描述、版权信息等
   params:
     title: "我的博客"
     subtitle: "分享我的编程之旅"
     author: "张三"
     description: "这是我的个人博客，我在这里分享我的编程经验和技术心得。"
     copyright: "© 2023 张三"
#2 社交媒体参数：这部分参数用于设置站点的社交媒体链接，包括 GitHub、Twitter、Facebook、LinkedIn 等。例如：
   params:
     socialMedia:
       github: "https://github.com/username"
       twitter: "https://twitter.com/username"
       facebook: "https://www.facebook.com/username"
       linkedin: "https://www.linkedin.com/in/username"
#3 主题参数：这部分参数用于设置站点的主题相关的选项，包括主题色彩、字体、布局等。例如：
   params:
     theme:
       color: "#557697"
       font: "Roboto"
       layout: "wide"
#4 小部件参数：这部分参数用于设置站点的小部件相关的选项，包括启用的小部件、小部件的顺序等。例如：
   params:
     widgets:
       enabled:
         - search
         - categories
         - tags
         - recent_posts
# 5文章参数：这部分参数用于设置站点的文章相关的选项，包括文章的目录、元数据、评论等。例如：
   params:
     article:
       toc: true
       meta:
         - date
         - categories
         - tags
       comments: true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

• 2 修改并优化主题
  • 自定义图标
    • 获取yilia-plus主题中的字体。前往yilia-plus主题的GitHub仓库
    • 下载其中source-src/css目录下的fonts文件夹，并将该文件夹复制到网站根目录下的static文件夹中
  • 更改stack主题菜单的样式
    • 找到stack主题根目录下的assets/scss/partial/menu.scss 修改最后一项定义.social-menu

.social-menu {
    list-style: none;
    padding: 0%;
    display: flex;
    flex-direction: row;
    gap: 0px;
    a {
        border-radius:50%;
        display:-moz-inline-stack;
        display:inline-block;
        vertical-align:middle;
        *vertical-align:auto;
        zoom:1;
        *display:inline;
        margin:0 8px 15px 8px;
        transition:0.3s;
        text-align: center;
        color: #fff;
        opacity: 0.7;
        width: 28px;
        height: 28px;
        line-height: 26px;
        &:hover {
            opacity:1
        }
    }
    a.weibo {
        background: #aaaaff;
        border:1px solid #aaaaff;
        &:hover {
            border:1px solid #aaaaff;
        }
    }
    a.segmentfault {
        background: #009a61;
        border:1px solid #009a61;
        &:hover {
            border:1px solid #009a61;
        }
    }
    a.rss {
        background: #ef7522;
        border:1px solid #ef7522;
        &:hover {
            border:1px solid #cf5d0f;
        }
    }
    a.github {
        background: #afb6ca;
        border:1px solid #afb6ca;
        &:hover {
            border:1px solid #909ab6;
        }
    }
    a.gitee {
        background: #c8171e;
        border:1px solid #c8171e;
        &:hover {
            border:1px solid #c8171e;
        }
    }
    a.facebook {
        background: #3b5998;
        border:1px solid #3b5998;
        &:hover {
            border:1px solid #2d4373;
        }
    }
    a.google {
        background: #4086f4;
        border:1px solid #4086f4;
        &:hover {
            border:1px solid #4086f4;
        }
    }
    a.twitter {
        background: #55cff8;
        border:1px solid #55cff8;
        &:hover {
            border:1px solid #24c1f6;
        }
    }
    a.linkedin {
        background: #005a87;
        border:1px solid #005a87;
        &:hover {
            border:1px solid #006b98;
        }
    }
    a.acfun {
        background: #fd4c5d;
        border:1px solid #fd4c5d;
        &:hover {
            border:1px solid #fd4c5d;
        }
    }
    a.bilibili {
        background: #e15280;
        border:1px solid #e15280;
        &:hover {
            border:1px solid #e15280;
        }
    }
    a.zhihu {
        background: #0078d8;
        border:1px solid #0078d8;
        &:hover {
            border:1px solid #0078d8;
        }
    }
    a.douban {
        background: #06c611;
        border:1px solid #06c611;
        &:hover {
            border:1px solid #06c611;
        }
    }
    a.mail {
        background: #005a87;
        border:1px solid #005a87;
        &:hover {
            border:1px solid #006b98;
        }
    }
    a.jianshu {
        background: #ff5722;
        border:1px solid #ff5722;
        &:hover {
            border:1px solid #ff5722;
        }
    }
    a.weixin {
        background: #4caf50;
        border:1px solid #4caf50;
        &:hover {
            border:1px solid #4caf50;
        }
    }
    a.qq {
        background: #34baad;
        border:1px solid #34baad;
        &:hover {
            border:1px solid #34baad;
        }
    }
    a.psn {
        background: #086ef6;
        border:1px solid #086ef6;
        &:hover {
            border:1px solid #086ef6;
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

• 3 添加字符索引。该字体的字符索引将作为stack主题中的可定制样式文件中作为用户自定义样式。前往yilia-plus主题的GitHub仓库https://github.com/JoeyBling/hexo-theme-yilia-plus，下载其中的source-src/css/fonts.scss文件，将其中的内容全部复制到stack主题根目录下的assets/scss/custom.scss文件内。
• 4 打开stack主题根目录下的layouts/partials/sidebar/left.html文件，找到{{- with .Site.Menus.social -}} 修改其下整个
  标签

        <ol class="social-menu">
            {{ range . }}
                <li>
                    <a 
                        class="{{ .Identifier }}" href="{{ .URL }}" 
                        {{ with .Name }}title="{{ . }}"{{ end }}
                        {{ if eq (default true .Params.newTab) true }}target="_blank"{{ end }}
                    >
                        <i class="icon-{{ .Params.Icon }}">i>
                    a>
                li>
            {{ end }}
        ol>
1
2
3
4
5
6
7
8
9
10
11
12
13