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\partials\article.scss 文件，添加瀑布流效果

/* Default article style */
.article-list {
    // display: flex;
    flex-direction: column;
    column-fill: balance;
    
    @media screen and (min-width: 1600px){
        column-count: auto;
        column-gap: var(--section-separation);
        column-width: 350px;
        max-width: 1500px;
        margin: auto;
        }

    article {
        // 
            
        display: inline-block;   //
        width: 100%;             
        break-inside: avoid;     

        // display: flex;
        flex-direction: column;
        box-sizing:border-box;
        position: relative;

        background-color: var(--card-background);
        box-shadow: var(--shadow-l1);
        border-radius: var(--card-border-radius);
        overflow: hidden;

        transition: box-shadow 0.7s ease;
        transition: 0.5s;

        @media screen and (min-width: 1600px){
            // width: 32%;
            width: 100%;
            header .article-image{
                img{
                    position: relative;
                    right:auto;
                    width:100%;
                    height:40%;
                    max-height: 250px;
                }
            }
            header .article-home-details{
                width: 100%;
            }
            header .article-details .article-home-title{
                @include respond(xl) {
                    font-size: 2rem;
                }
            }
        }

        &:hover {
            box-shadow: var(--shadow-l2);
            border-radius: 45px;
            @include respond(md) {
                --main-top-padding: 25px;
                --article-font-size: 2.1rem;
            }
        }
            
        &:not(:last-of-type) {
            margin-bottom: var(--section-separation);
            
        }

        .article-image {
            img {
                position: absolute;
                right:0;
                display:flex;
                width:40%;
                height:100%;
                object-fit: cover; 
                object-position: 50% 50%;
                overflow: auto;

                @include respond(xl) {
                    height: 100%;
                }
            }
        }

        @for $i from 1 through length($defaultTagBackgrounds) {
            &:nth-child(#{length($defaultTagBackgrounds)}n + #{$i}) {
                .article-category a {
                    background: nth($defaultTagBackgrounds, $i);
                    color: nth($defaultTagColors, $i);
                }
            }
        }
    }
}

.article-details {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: var(--card-padding);
}

.article-title {
    font-weight: 600;
    margin: 10px 0;
    color: var(--card-text-color-main);
    font-size: 2.2rem;

    @include respond(xl) {
        font-size: 3rem;
    }

    a {
        color: var(--card-text-color-main);

        &:hover {
            color: var(--card-text-color-main);
        }
    }

    & + .article-subtitle {
        margin-top: 1;
    }
}

.article-subtitle {
    font-weight: normal;
    color: var(--card-text-color-secondary);
    margin: 5px 0;
    line-height: 1.5;

    font-size: 1.75rem;
    @include respond(xl) {
        font-size: 2rem;
    }
}

.article-time {
    display: flex;
    align-items: center;
    color: var(--card-text-color-tertiary);
    gap: 15px;
    margin-top: 10px;
    flex-wrap: wrap;

    svg {
        vertical-align: middle;
        margin-right: 15px;
        width: 20px;
        height: 20px;
        stroke-width: 1.33;
    }

    time {
        font-size: 1.4rem;
    }

    & > div {
        display: inline-flex;
        align-items: center;
    }
}

.article-category,
.article-tags {
    a {
        color: var(--accent-color-text);
        background-color: var(--accent-color);
        padding: 6px 14px;
        border-radius: 16px;
        display: inline-block;
        font-size: 1.3rem;
        margin-right: 7px;
        margin-bottom: 7px;
        transition: background-color 0.5s ease;

        opacity:1;
        transition:0.3s;

        &:hover {
            color: var(--accent-color-text);
            background-color: var(--accent-color-darker);
        }
        @media screen and (min-width: 1600px){
            border-radius: 3px;
            padding: 4px 10px;
        }
    }
}
/*
.article-details:hover .article-category a {
    opacity:0;
    height:0px;
}
*/
/* Compact style article list */
.article-list--compact {
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow-l1);
    background-color: var(--card-background);
    --image-size: 50px;

    @include respond(md) {
        --image-size: 60px;
    }

    & + .pagination {
        margin-top: var(--section-separation);
    }

    article {
        & > a {
            display: flex;
            align-items: center;
            padding: var(--small-card-padding);
        }

        &:not(:last-of-type) {
            border-bottom: 1.5px solid var(--card-separator-color);
        }

        .article-details {
            flex-grow: 1;
            padding: 0;
            padding-right: 15px;
            min-height: var(--image-size);
        }

        .article-title {
            margin: 0;
            font-size: 1.6rem;

            @include respond(md) {
                font-size: 1.8rem;
            }
        }

        .article-image {
            height: 100%;
            img {
                width: var(--image-size);
                height: var(--image-size);
                object-fit: cover;
            }
        }

        .article-time {
            font-size: 1.4rem;
        }

        .article-preview {
            font-size: 1.4rem;
            color: var(--card-text-color-tertiary);
            margin-top: 10px;
            line-height: 1.5;
        }
    }
}

/* Tile style article list */
.article-list--tile {
    display: flex;
    height: auto;
    width: 100%;
    article {
        border-radius: var(--card-border-radius);
        overflow: hidden;
        position: relative;
        height: 350px;
        width: 250px;
        box-shadow: var(--shadow-l1);
        transition: box-shadow 0.3s ease;
        background-color: var(--card-background);

        &:hover {
            box-shadow: var(--shadow-l2);
        }

        &.has-image {
            .article-details {
                background-color: rgba(#000, 0.25);
            }

            .article-title {
                color: #fff;
            }
        }

        .article-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .article-details {
            border-radius: var(--card-border-radius);
            position: relative;
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            z-index: 2;
            padding: 15px;

            @include respond(sm) {
                padding: 20px;
            }
        }

        .article-title {
            font-size: 2rem;
            font-weight: 500;
            color: var(--card-text-color-main);

            @include respond(sm) {
                font-size: 2.2rem;
            }
        }
    }
}



///
/// article  主页显示
.article-home-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width:60%;

    padding: var(--card-padding);
}

.article-home-title {
    font-weight: 600;
    margin: 10px 0;
    color: var(--card-text-color-main);
    font-size: 2.2rem;
    transition: 0.5s;

    overflow: hidden;
    width: fit-content;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;

    @include respond(xl) {
        font-size: 2.7rem;
    }

    a {
        color: var(--card-text-color-main);

        &:hover {
            color: var(--card-text-color-main);
        }
    }

    & + .article-home-subtitle {
        margin-top: 1;
    }
}

.article-home-details:hover .article-home-title {
    font-size: 2.4rem;
}

.article-home-subtitle {
    font-weight: normal;
    color: var(--card-text-color-secondary);
    margin: 5px 0;
    line-height: 1.5;
    opacity:0;
    height: 0px;
    transition:0.5s;

    overflow:hidden;

    font-size: 1.75rem;
    @include respond(xl) {
        font-size: 2rem;
    }
}

.article-home-details:hover .article-home-subtitle {
    opacity:1;
    height: 5.4rem;
}

字体

更换字体

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

调整字体大小

位置 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);

评论功能

吆西，直接参照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