返回

魔改你的hugo

整烂活有一手的

友链

所使用的主题目前已经实现友链,只不过并没有作为主分支,如果需要使用友链功能的话需要使用:

https://github.com/CaiJimmy/hugo-theme-stack/pull/375/commits/daf8de79a295d63f84bf7330d407e1b06ca0328e

在魔改完之后,在content/page里添加links.md即可。也别忘了再添加完links.md之后在config.yaml中添加相关内容和links页面在左侧导航的权重:

menu:
    main:
        - identifier: home
          name: Home
          url: /
          weight: -100
          params:
              ### For demonstration purpose, the home link will be open in a new tab
              newTab: true
              icon: home
        - identifier: links
          name: Links
          url: /links
          weight: -75
          pre: link

网站详情

这里魔改了友链的格式

ピノキオピー - 転生林檎 feat. 初音ミク

Music, Lyrics / ピノキオピー Animation, Video Director / えいりな刃物 Vocal / 初音ミク

也就当是学习自定义hugo shortcode的方式了

写shortcode

添加文件:layouts\shortcodes\articlelinks.html 该文件为go的template,我们添加如下内容:

<a target="_blank" href={{ .Get "url" }} title={{ .Get "name" }} class="article-link">
    <div class="article-link-div">
        <div class="article-link-avatar">
            <img class="article-avatar" src={{ .Get "avatar" }} />
        </div>
        <div class="article-link-info">
            <i class="fa fa-link" aria-hidden="true"></i>
            <i class="article-name">{{ .Get "name" }}</i>
            <p class="article-bio">{{ .Get "bio" }}</p>
        </div>
    </div>
</a>

如果使用过模板的话应该不是很难理解,具体的函数定义可以参考该网站:https://gohugo.io/templates/

接下来是样式:

添加文件:assets\scss\partials\layout\articlelinks.scss

写入如下内容:

// 头像边框颜色
$avatar-border-color: #566a82;
$avatar-border-color-dark: #C0C0C0;

// style-card 背景色
$article-link-background-color: #51a8ca10;
$article-link-background-color-dark: #69697141;

// 友链 name 原始色
$article-link-color: #11a1a2;
$article-link-color-dark: #ffffff;

// 友链 name 气泡响应对比色
$article-link-hover-color: #ea4e2f;
$article-link-hover-color-dark: rgb(241, 213, 159);

// bio 简介上下文
$context-color: #404040;
$context-color-dark: #c0c0c0;

// 友链头像及头像边框的样式
.article-avatar {
    border-right-color: #566a82;
        border-right-style: inset;
        border-right-width: 3.6px;

    [data-scheme=dark] & {
        border-right-color: #C0C0C0;
    }
    object-fit: cover;

}

.article-link-div {
    // 实现卡片双栏排列效果
    height: 175px;
    margin-top: auto;
    margin-inline-start: 4.5%;
    width: 90%;
    display: flex;

    // 控制上下连续排列的卡片之间的行距
    margin-bottom: 11px;

    // 卡片圆角
    border-radius: 7px 7px 7px 7px;

    // 卡片阴影
    -webkit-box-shadow: 0px 14px 32px 0px rgba(231, 224, 224, 0.15);
    -moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0.7px 1px 6px 0px rgba(0, 0, 0, 0.16);

    // 卡片背景色
    background: $article-link-background-color;

    [data-scheme=dark] & {
        background: $article-link-background-color-dark;
    }

    // 卡牌气泡响应动画
    -webkit-transition: transform 0.4s ease;
    -moz-transition: transform 0.4s ease;
    -o-transition: transform 0.4s ease;
    transition: transform 0.15s ease;

    &:hover {
        transform: scale(1.03);
    }
}


.article-link-avatar {
    width: 300px;
    float: left;
    margin-right: 30px;
    display: flex;

}

// name 特效样式, hover 气泡效果,友链 name 变色
.article-link-info {
    margin-top: 13px;
    margin-right: 18px;
    color: $article-link-color;

    [data-scheme=dark] & {
        color: $article-link-color-dark;
    }

    &:hover {
        color: $article-link-hover-color;

        [data-scheme=dark] & {
            color: $article-link-hover-color-dark;
        }
    }
}

// name 文字样式
.article-name {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-style: normal;
    font-family: auto;
    font-size: 20px;

}

// bio 文字样式
.article-bio {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-top: auto;

    // font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
    font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    font-size: 16px;

    color: $context-color;

    [data-scheme=dark] & {
        color: $context-color-dark;
    }

}

// 响应式页面,允许根据不同的尺寸调整样式
@media screen and (max-width: 720px) {
    .article-link-div {
        width: 92%;
        margin-right: auto;
    }

    .article-bio {
        margin: auto;
        align-content: center;
        justify-content: left;
    }

    .article-link-avatar {
        width: 84px;
        margin: auto;
    }

    .article-name {
        font-size: 14px;
        font-style: normal;
        font-family: 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
    }
}

这就是纯纯的css了,这里魔改了友链的格式。

完成上述两步之后还需要参考一下友链的头文件修改:

在assets/scss/partials/style.scss中添加:

@import "partials/layout/articlelinks.scss";

一个蛋疼的倒计时

这里的倒计时是作为widget设计的(因为这个主题主页具有右侧的widget,因此这样做比较美观)

写scss和html

这里的样式参考了网上的一些样式。

在assets\scss\partials\widgets.scss中最后添加:

.widget.timeleft {
    .timeleft-content{
        font-size:35px;
        color: var(--card-text-color-main);
        font-family: 'Courier New', Courier, monospace;
    }

    div.timeleft-card {
        width: 350px;
        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
        text-align: center;
    }

    div.timeleft-left{
        background-color: #4CAF50;
        color: var(--card-text-color-main);
        padding: 10px;
        font-size: 80px;
        border-radius: 15px;
    }

    div.timeleft-now{
        padding: 10px;
        color: var(--card-text-color-main);
        font-size: 30px;
    }
}

作为倒计时卡片的样式,之后是html内容:

这里需要新建这样的文件:layouts\partials\widget\timeleft.html

<section class="widget timeleft">
    <div class="widget-icon">
        {{ partial "helper/icon" "clock" }}
    </div>
    <h2 class="widget-title section-title">{{ T "widget.timeleft.title" }}</h2>
    <div class="timeleft-content">
        {{ .Site.Params.widgets.timeleft.content}}
    </div>
    <div class="timeleft-card">
        <div class="timeleft-left">
        {{ $end := .Site.Params.widgets.timeleft.time | time}}{{ $diff := now.Sub $end}}{{ $hour := $diff.Hours}}{{ $day:= div $hour -24}}{{ int $day}}
            </div>
    <div class="timeleft-now">
        {{ time.Format "Monday, Jan 2, 2006" now }}
    </div>
    </div>
</section>

大多数是go的语法,主要的是有一个.Site.Params.widgets.timeleft.content,这个是获得config.yaml中的参数,没错,我们的时间可以在config中设定。

细枝末节

首先是config中设定:

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

        archives:
            limit: 5

        tagCloud:
            limit: 10

        timeleft:
            content: "距离考研还有:"
            time: "2022-12-24"
            sentence: true

前面是已经有的,在此基础上我们加入timeleft和相关的参数,最后一个sentence本来是想用来显示每日一句的,但是目前go语言不过关,暂且不搞了。

在完成上述内容之后可以看到倒计时已经出现在主页右侧了,但是有一个问题,没有“倒计时”三个字,这里需要在语言文件中设定一下本土化内容:在themes\hugo-theme-stack\i18n\zh-CN.yaml

中对应的位置添加上如下内容即可:

widget:
    archives:
        title:
            other: 归档

        more:
            other: 更多

    tagCloud:
        title:
            other: 标签云
    
    timeleft:
        title:
            other: 倒计时

最后实现的结果如图所示:

image-20220712222949465
image-20220712222949465

Licensed under CC BY-NC-SA 4.0
豫ICP备2021032923号
Built with Hugo
Theme Stack designed by Jimmy