Blog更改日志

TODO

从 HugoTex theme 更换到 stack theme
更改点击home会在新页面弹出 ——> 本页刷新
更改文章的归档类别，精简 categories
Google 百度等收录网页
更换挂载服务商

~~垃圾gitee~~（ gitee page 显示index.json可能含有违规内容，删去，导致blog的搜索功能失效）
添加字数统计
- 单文章字数统计
- footer 总字数和文章数统计
添加音乐
添加更多Markdown支持

shortcode

文字居中
- 支持表情
- 支持github格式的 !!! note 和 !!! danger
- github 风格的 chackbox ，明显的蓝色 √
- 将KaTex支持升级
- 支持使用 Font awesome
页面美化
- 折叠式侧边栏
- 字体
  - 更换字体
  - 调整字体大小
- 颜色
  - 页面配色
    - 底色
    - 滑块颜色
  - link 颜色
  - ~~赛博朋克块阴影~~ (不要了)
- 头像与名称居中显示
- 调整页面比例，比较喜欢缩放到80%~90%
- 增加网站icon
- 使用物色到的icon
  - 字数统计、显示时间的icon
- 修改 card 圆角 10 $\Rightarrow$ 7
- 圆角 tag --tag-border-radius: 4px; $\Rightarrow$ 20
社交
- 编写自己的 about
- 添加评论功能
- 完善其他跳转信息，如脸书~~可是我没有~~、知乎等账号链接
- 添加友链

记录

HugoTex theme 更换到 stack theme

添加字数统计

单文章字数统计 : 借鉴小球飞鱼，改layouts\partials\article\components\details.html

        {{ if .Site.Params.article.readingTime }} 
            <div>
                {{ partial "helper/icon" "文本" }} 
                <time class="article-words">
                    {{ .WordCount }}字
                </time>
            </div>

并在config.yaml设置hasCJKLanguage: true

总字数和文章数统计 : Hugo 总文章数和总字数

页面美化

字体

更换字体

看对应部分，简单的复制粘贴 (不过之后想换成方正新书宋或者冬青黑，英文标题部分用贝连体)

调整字体大小

位置 assets\scss\variables.scss 中

--article-font-size: 1.7rem; $\Rightarrow$ 1.9

颜色

页面配色

底色 :

light ☞ 改了一圈仅将背景色弄浅了一点
dark ☞ --body-background: #1e202b; 颜色是从中国传统色漆黑调浅

滑块颜色:

light --scrollbar-thumb: hsla(170, 94%, 55%, 0.575);
dark --scrollbar-thumb: #c91f37; 赫赤色

link 颜色

从灰色改为 --link-background-color: 1, 255, 179;

赛博朋克块阴影

--shadow-l1: 1.4px -1.4px 0px rgba(67, 255, 230, 0.719), 0px 3px 10px rgba(0, 0, 0, 0.04), 0px 1.4px 1px rgba(253, 25, 113, 0.397);

更多markdown支持

在文档末添加如下，就可以使用 Font awesome 5 的非Pro icon , 使用方式也很便捷，直接在Font awesome 里面找，点复制粘贴过来就可以了。

<head> 
    <script defer src="https://use.fontawesome.com/releases/v5.11.0/js/all.js"></script> 
    <script defer src="https://use.fontawesome.com/releases/v5.11.0/js/v4-shims.js"></script> 
</head> 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.0/css/all.css">

不花钱没必要使用Font awesome 6 ，不如去阿里弄得iconfont 去淘 icon，下面是后来的配置，两方面都能使用。

<head>
    <script src="https://kit.fontawesome.com/cbd1a514ae.js" crossorigin="anonymous"></script> #Font awesome 的kit，注册后创建一个
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3178786_wcuwkyqh11.css"> #iconfont 账号的项目，注册后创建一个
</head>

但是有一些问题，比如

1. 不能很好的显示彩色icon (包括font awesome)，后面的两个icon是下面彩色icon现在的显示情况。

1. 每次往iconfont项目库里添加新icon，都要更新项目库，把项目库新地址复制过来，有点麻烦。


# 在head里添加
<script src="https://at.alicdn.com/t/font_3178786_idyehkf29xd.js"></script>

----------------

# 上面两个彩svg的引用代码
<div>
  <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-xinxi"></use>
  </svg>
  <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-10"></use>
  </svg>
</div>

----------------

<style type="text/css">
    .icon {
       width: 1em; height: 1em; # 可以通过这种方式控制icon大小
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

如果是做前端，还稍微可以接受。对于写markdown笔记，这么做实在是太麻烦了点(强迫症震怒)，看到有使用 vue 封装简化操作的（有一点探索过头了，活该是有追求的前端干的事）。但无论怎么说，在markdown里用这么多HTML语句和初衷有些本末倒置。

Shortcode

⭕ 能用 | ❌ 一番尝试后失败

一开始想将Feelit上的shortcode抄过来，具体是admonition⭕ music typeit，把\layouts\shortcodes\复制进来没法正常用，自定义 Hugo Shortcodes 简码写的很详细，搬过来align⭕ quote⭕,

水水水

This is a tip

一个技巧横幅

Typeit❌

评论功能

吆西，直接参照waline文档，先注册个 LeanCloud , 注意是国际版，然后再GitHub登录下Vercel ，是从快速上手–Vercel 部署点击过去（球球网你让我登录！）

waline文档快速上手中除了 HTML引入(客户端) 以外的照着做就好，之后在config.yaml 里改前端配置

    comments:
        enabled: true
        provider: waline

        waline:
            serverURL: //你通过vercel获得的waline服务器地址
            lang: 'zh-CN'
            visitor: true
            avatar: 
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
                - https://cdn.jsdelivr.net/gh/norevi/waline-blobcatemojis@1.0/blobs
                - https://cdn.jsdelivr.net/gh/norevi/blob-emoji-for-waline@2.0/blobs-gif

            requiredMeta:
                - name
                - email
                - url
            placeholder:
            locale:
                admin: Admin