理解篇

去掉归档，右边有些单调，我想给它加个分类——这个主题并不带有分类组件，我查找了很多个文件，感觉修改起来很麻烦，不过我在Hugo Eureka主题的入门配置 中找到了这一部分的内容，马上开始四处搜寻同主题的装修大师们是怎么处理它，差生摩拳擦掌开始操作（抄作业）了。

在上面Eureka主题的配置指导中谈到：

section(string)：需要显示的章节，例如posts等。

而如何理解section呢？在Hugo 创建多级 Section 而我所需要的则是categories这个section，事实上很久以前我已经为这个苦恼过了：怎么样装饰我的目录呢？Stack主题的文档里本身就有谈到：给分类/标签添加图片和简介 。

分类和标签一样，只是一个文件夹，在网页上点它们的时候，我们只是进入了一个个文件夹。所以很大程度上，我想做的分类组件，不过是标签云组件的另一个样子而已，只是它同时兼具了归档的列表形式。这说明了什么？差生可以开始抄作业了。

那么右侧的目录、搜索、标签云、归档统统都是组件——Widget！那么它在哪里？又是一顿搜索发现，组件在三个不同的地方作用着：

1. 在config.yaml中调用它们。

2. 在\layouts\partials\widget文件夹中，存放着四个已有的不同组件，也是config文件中列出的可以调用的四个。（后面我突然发现自带的组件只有三个，而之前我已经根据Hugo | 看中 Stack 主题的归档功能，搬家并做修改 这篇文章，去抄了这个仓库 里的一些设置，据我印象，我直接抄了整个layouts文件夹😰）

    widgets:
      enabled:
        - toc
        - search
        - archives
        - tag-cloud
   

3. \assets\scss\partials\widgets.scss 在这个文件中，统一管理着组件样式。

也就是说，我希望增加一个组件，点进去它会跳转到分类中，首先我需要仿照其他组件，在2.中的文件夹里增加一个叫作categories.html的组件，在这个文件里，我可以调用3.这个文件中的样式，对我新增的组件进行修改。

在我其他修改当中，也存在许许多多像这样的“引用”，我猜后面还会有很多地方需要我如此理解一个功能的实现。等FreeCodeCamp大学教完我这些术语以后，我一定要倒回来润色这篇磕磕绊绊的鬼东西。快教我jpg（快去学！）

动手吧！

事后写起来很潇洒，但当时的整个操作可谓一团浆糊。尤其两天后：现在的我已经基本忘记了当时干了什么。以下写满了我乱七八糟的理解，或者是“其实我当时完全没理解，但我事后是这么理解的”、“事后我也没懂，但我还是这么做了”。健忘的人写东西真像两个不及格生相互施加费曼学习法。

在我琢磨到一半的时候，我在波澜随心起 的博客里看到了我想要的分类组件设置！！！TA就做了一个分类的组件，我应该是这个世界上点TA的组件最多的人，感激这个组件让我理解了……它们真的都是超！链！接！

这个组件的左边框部分我参考了波澜随心起 的博客的设置。我猜TA的写法一定比我的更加聪明。感谢TA的设置，我还不确定我是不是应该为这些代码打扰TA和作出说明，现在这里加粗感谢一下。

以下是我稀里糊涂的操作与思考，文末给出了两个文件的新增/完整内容，不必跟我一起绕远路。

1. 备份。
2. 据说可以用命令新建Widget——但我把\layouts\partials\widget\archives.html（归档组件的文件）直接复制了一份。改名成categories.html。

I was thinking：

我把归档组件文件和widgets.scss这个文件进行观察，用我稀薄的CSS知识确认了每部分代码是用来做什么的。页面显示的顺序是自上而下一致的，图标→组件名称→组件本身，每个部分都用了各种在widgets.scss中定义过的Class。

我想要的只是一个分类卡片，每个点进去都是一个类似标签云的超链接，标签云本身用这行代码设计了这个形式🧐：<a href="{{ .Page.RelPermalink }}" class="font_size_{{ .Count }}">。

根据我在FCC(Fight club college)学到的知识，href不只是……人家才不管啦它就是超链接！！！

1. 观察刚才复制过来的Archives.html中的结构，归档由于是以年份自动整理，所以设置的十分复杂。再观察其他几个组件，发现它们不过是纸老虎！那么保留几个文件中共有的首尾，保留归档设置里的Icon和Title部分，其他都删掉（？）。

2. 先来观察每个组件的Icon和Title吧！下面这串来自归档组件的代码指的是我们选择了“infinity”作为组件的Icon，Class是它所引用的组件名字统一的样式，中括号{{}}包裹住的部分我并没有在Widget里找到，删掉，在<h2>标签中写好组件的名字。

    <section class="widget archives">
        <div class="widget-icon">
            {{ partial "helper/icon" "infinity" }}
        </div>
        <h2 class="widget-title section-title">{{ T "widget.archives.title" }}</h2>
   

把最后一行改为：<h2 class="widget-title section-title">Categories</h2>

先前情回顾一下：
目录和标签一样，只是一个文件夹，在网页上点它们的时候，我们只是进入了一个个文件夹。所以很大程度上，我想做的分类组件，不过是标签云组件的另一个样子而已，只是它同时兼具了归档的列表形式。这说明了什么？差生可以开始抄作业了。

1. 把categories.html放在一边。让我们先在Widgets.scss中增添一段关于分类组件的样式，直接从归档组件里复制并把各种变量改名为Categories，让它短一点，所以加上Witdth，字体与超链接部分也照抄.archives-year的设置，不要count。字体太粗了？font-weight改为1，除了我不知道用来干嘛的部分，全部照抄。
2. 添加左边框。虽然我已经学了boarder的设计，但我不知道是不是可以这么用。那么，其实它看起来有点儿像Stack主题里的<h1> <h2>等各类大标题，对吗？而在article.scss中我看到，作者直接用h2, {border-left: var(--heading-border-size) solid var(--accent-color);}设计它们，我猜我可以照搬它。

不过我不管怎么设置，border-left就是不起作用，差生已经习惯了道路坎坷，于是我丝滑地换了一个方式👇
参考资料：border-width
这里提供了一个样例：border-width: 0 4px 8px 12px;可以分别设置的是上、右、下、左边框，而我只需要把三边设置为0就可以了。

.widget.categories {
    .widget-categories--list {
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        background-color: var(--card-background);
        width: 80%;
    }

    .card-category {
        border-style: solid;
        border-width: 0 0 0 12px;

        a {
            font-size: 1.4rem;
            padding: 18px 25px;
            display: flex;

            span.categories {
                flex: 1;
                color: var(--card-text-color-main);
                font-weight: 1;
            }

        }
    }
}

1. 上面就是我在widgets.scss中新增的代码，回到categories.html中把它们加上吧。我想不通要怎么样做到“我写作时加入一个分类？小组件就会自动显示出来”，但因为我的分类很少（2-3个）所以我就不管它了，直接用超链接实现。我猜它可以仿照标签云组件的写法，但我看不太懂，希望后续FFC可以教我（快学）。

2. 因为我想要的是归档的列表形式，所以仿照archives.html中widget-archive--list的写法，依次替换各种Class的名称，加入超链接。以下是完整的文件内容。

    {{- $query := first 1 (where .Site.Pages "Layout" "==" "archives") -}}
    {{- if $query -}}
        {{- $archivesPage := index $query 0 -}}
        <section class="widget categories">
            <div class="widget-icon">
                {{ partial "helper/icon" "infinity" }}  
            </div> 
            <h2 class="widget-title section-title">Categories</h2>
        <div class="widget-categories--list">
                <div class="card-category" style="border-color: #93B5C6;">
                    <a href="/categories/扭断那天鹅的脖子/">
                        <span class="categories">扭断那天鹅的脖子</span></a> 
                </div>
                <div class="card-category" style="border-color: #93b5c6b2;">
                    <a href="/categories/为沙滩插上太阳伞/">
                        <span class="categories">为沙滩插上太阳伞</span></a> 
                </div>
                <div class="card-category" style="border-color: #93b5c64b;">
                    <a href="/categories/碎片/">
                        <span class="categories">碎片</span></a> 
                </div>
        </div>
        </section>
    {{- else -}}
        {{- warnf "Archives page not found. Create a page with layout: archives." -}}
    {{- end -}}
   

I was thinking:

关于左边框的颜色，上面那位博客主到底是怎么实现它们每个都不一样的呢？这一部分我发生了大量的报错，我没有办法随心所欲地加入我的超链接，要么是左右标签总有一个忘记了，以及我到底要怎么设置才能让它们正确显示出我想要的分类名？文字到底应该包裹在哪里？
关于第一个问题，我的FCC笔记：不在Class中统一管理，而是用Style单独设计。

这里我参考了Style ，而其他问题，代码中有所显示。当然还参考了上面那位Blogger的博客。

这些花了我很长时间的问题，这些写法一定不是最优解。最佳的解决办法其实是继续学习，争取在这次假期中完成我的FreeCodeCamp大学再教育。