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 即可

- 评论区配置

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

# gitaik配置
gitalk:
            owner: 你的GitHub用户名
            admin: 你的GitHub用户名 
            repo: 你的GitHub仓库名 #(注意不是网址!!!!!!!)
            clientID: 
            clientSecret: 
#ClientID和ClientSecret请不要随意告诉他人哦~

• 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你只能看到一次

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

进阶配置

• 在 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

• 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;
        }
    }
}

• 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>标签

        <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>