Home/Hugo主题github-style的优化全记录

Created Sun, 15 May 2022 22:19:13 +0800 Modified Fri, 23 Sep 2022 05:29:28 +0800
797 Words
blog hugo

github-style是最近发现的可爱主题，仿造github的个人主页构建博客，个人非常喜欢！但该项目的各种功能较精简，正好借此机会熟悉一下hugo的主题构建，加上一些花里胡哨的美化优化✨

功能优化

新增双栏模式

Markdown主题格式

  • 图片大小！现在的体验不太好
  • 修改成其他css效果

博文页标题添加breadcrumbs面包屑跳转

  • 已完成～

博文页添加目录TOC

固定侧边栏

增加Tags栏

增加Tags页面

  • 目前Tags页面的格式和Posts相同
  • Tag Created日期修改
  • 宽度变窄时Tags选项的消失

增加分类Categories

更改搜索search方式

添加About关于我页面

Beautify

全局字体更改

即然用了这么geek的主题，改成mono字体看起来的效果会更舒服，此处我改成了Menlo字体。

在themes/github-style/static/css/github-style.css中的body内添加font-family

body {
  margin: 0;
  font-family:  Menlo, "Powerline Consolas", "PT Mono";
}

个人简介部分的字体需要在themes/github-style/layouts/partials/overview.html中更改。定位以下位置，添加style=内容

<article class="markdown-body entry-content container-lg f5" style="font-family: Menlo;">
    {{- .Content -}}
</article>

鼠标点击爱心特效💗

打开themes/github-style/layouts/partials/script.html，添加

<script src="https://cdn.jsdelivr.net/gh/ITJoker233/ITJoker233.github.io@latest/CDN/js/love.min.js"></script>
<script type="text/javascript" src="https://demo.hellozwh.com/source/canvas-nest.min.js"></script>

标题打字机效果

在themes/github-style/static/css/github-style.css中增加打字机效果

.wrapper {
  height: auto;
  /*This part is important for centering*/
  display: grid;
  place-items: left;
}
.typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: Menlo, monospace;
  /* font-size: 2em; */
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

在themes/github-style/layouts/partials/user-profile.html中

<div
            class="vcard-names-container float-left col-10 col-md-12 pt-1 pt-md-3 pb-1 pb-md-3 js-sticky js-user-profile-sticky-fields"
            data-original-top="0px" style="position: sticky;">
            <h1 class="wrapper vcard-names pl-2 pl-md-0">
              <span class="p-name vcard-fullname d-block overflow-hidden">{{ .Site.Params.author }}</span>
              {{ if .Site.Params.github }}
              <span class="typing-demo p-nickname vcard-username d-block">{{ .Site.Params.github }}</span>
              {{ end }}
            </h1>
          </div>
        </div>
0%