↓跳到主要内容
  1. Posts/

Congo主题调整

·3240 字· 13 分钟
博客装修 Hugo
目录

这篇文章提供了一些在Congo中可用的基本Markdown格式的示例

全局 #

字体 #

由默认字体更改为霞鹜文楷，使用的是网络字体仓库。在 /layouts/partials 中新建 extend-head.html 文件，内容修改为：

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/style.css" />
  <style>
    body {
      font-family: "LXGW WenKai Screen";
      font-weight: normal;
    }
  </style>
</head>
<body>
  
</body>
</html>

颜色 #

选中字体（背景）颜色 #

在 /assets/css/custom.css 中添加：

/* 设置选中字体的区域背景颜色 */
::selection {
  color: #ffffff;
  background: #8a3d9f95;
}

鼠标移动到链接上 #

在 /assets/css/custom.css 中添加：

a:hover {
  color: inherit !important;   /* 改字体颜色,inherit是不改颜色 */
  background-color: #7c72ce7e !important;   /* 改背景颜色 */
}

正文背景半透明 #

在 /assets/css/custom.css 中添加：

main {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 2rem;
  border-radius: 10px;
}

twikoo评论 #

  1. 在 /config/_default/params.toml 中设置：

    [article]
  showComments = true

  2. 在 /layouts/partials/comments.html 中添加：

    {{ if .IsPage }}
  <div id="tcomment"></div>
  <script src="//cdn.jsdelivr.net/npm/twikoo@1.6.43/dist/twikoo.all.min.js"></script>
  <script>
  twikoo.init({
    envId: '修改这里', // 例如 'https://xxx.vercel.app'
    el: '#tcomment'
  });
  </script>
{{ end }}

  3. 关于评论区表情的设置参考了Twikoo評論系統的個性化設置这篇文章，写得非常详细因此我直接照抄了

背景图片 #

  1. 新建 static/background 文件夹，将背景图片放进去

  2. 在 /layouts/partials/extend-head.html 中添加：

    <style>
  /* 背景图层 */
  #bg-fixed {
    background: url('{{ "background/背景图名字" | relURL }}') no-repeat center center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
  }
</style>

互动粒子效果 #

  1. 打开 https://vincentgarreau.com/particles.js/，按个人喜好调整粒子效果，注意 interactivity>detect_on 必须从 canvas 改成 window

  2. 点击屏幕中间的 Download，下载到本地后解压，将其中的 particles.min.js 文件复制到 static/background 文件夹

  3. 点击右上角设置框倒数第二行 Download current config(json)，下载到本地后将particlesjs-config.json 文件复制到 static/background 文件夹

  4. 在 /layouts/partials/extend-head.html 中添加：

<!-- 固定背景容器 -->
<div id="bg-fixed"></div>

<!-- 粒子特效容器 -->
<div id="particles-js"></div>

<!-- 粒子特效脚本 -->
<script src="{{ "background/particles.min.js" | relURL }}"></script>
<script>
  particlesJS.load('particles-js', '{{ "background/particlesjs-config.json" | relURL }}', function() {
    console.log('particles.js loaded - callback');
  });
</script>

<style>
  /* 粒子特效图层 */
  #particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
</style>

鼠标图案 #

  1. 新建 static/cursors 文件夹，鼠标图片放进去，图片大小最好不超过32x32
  2. 在 /assets/css/custom.css 中添加：
/* 鼠标指针自定义，放在`static/img`内或者引用外部网站链接。 */
/* 默认鼠标指针：图案1 */
body {
  cursor: url(/cursors/pointer_resized.png), default;
}

/* 链接、按钮、SVG 图标、评论按钮：图案2 */
a:hover,
button,
svg,
input[type="submit"],
.tk-preview-btn,
.tk-submit {
  cursor: url(/cursors/link_resized.png), pointer !important;
}

/* 文本输入、评论框、可选择文字区域：图案3 */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea{
  cursor: url('链接'), text;
}

页脚 #

版权信息 #

  1. 在 /config/_default/params.toml 中设置：

    [footer]
showCopyright = true

  2. 在 /config/_default/language.xx.toml 中修改内容：

    copyright = "禁止无断转载"

驱动信息 #

  1. 在 /config/_default/params.toml 中设置：

    [footer]
showThemeAttribution = true

  2. 在 i18n/xx.yaml (对应的语言文件)中修改内容：

    footer:-
powered_by: "Powered by {{ .Hugo }} &amp; {{ .Congo }}"

返回顶部按钮 #

在 /config/_default/params.toml 中设置：

[footer]
  showThemeAttribution = true

外观切换图标 #

在 /config/_default/params.toml 中设置：

[footer]
  showAppearanceSwitcher = true

页面 #

主页 #

主页显示头像、简介、最近文章 #

在 /config/_default/params.toml 中修改：

[homepage]
layout = "profile" # valid options: page, profile, custom
showRecent = true

移动端折叠菜单栏 #

在 /config/_default/params.toml 中修改：

[header]
  layout = "hybrid" # valid options: basic, hamburger, hybrid, custom

归档/列表 #

分类标签 #

在 /config/_default/params.toml 中设置：

[list]
  showTaxonomies = true

摘要 #

方法一 #

  1. 在 /config/_default/params.toml 中设置：

    [list]
  showSummary = true

  2. 在 Front Matter 中加入:

    Summary: ""
方法二（会覆盖方法一） #

在文章开头加入：

这是摘要

<!--more-->

略缩图 #

新建文档时，Git Bash输入命令 hugo new posts/文章标题/index.zh-Hans.md ，在 posts/文章标题文件夹中放入图片并命名为 thumb.jpg

文章 #

字数统计 #

  1. 在**/config/_default/params.toml** 中设置：

    [article]
showWordCount = true

  2. 将 /layouts/partials/meta/word-count.html 修改为：

    <span>
  {{- $words := .Content | plainify | countwords -}}
  {{- i18n "article.word_count" (dict "Count" $words) | markdownify | emojify -}}
</span>

阅读时间 #

将 /layouts/partials/meta/reading_time.html 修改为：

{{- $words := .Content | plainify | countwords -}}
{{- $minutes := div (add $words 264) 265 -}} {{/* 向上取整 */}}
<span title="{{ i18n "article.reading_time_title" }}">
  {{- if lt $minutes 1 }}
    {{ i18n "article.reading_time_less_than_one" | emojify }}
  {{- else }}
    {{ i18n "article.reading_time" (dict "Count" $minutes) | emojify }}
  {{- end }}
</span>

分类标签 #

在 /config/_default/params.toml 中设置：

[article]
  showTaxonomies = true

更新时间 #

  1. 在 /config/_default/params.toml 中设置：

    [article]
  showDateUpdated = true

  2. 在 /config/_default/config.toml 中添加：

    enableGitInfo = true

显示目录 #

  1. 在 /config/_default/params.toml 中设置：

    [article]
  showTableOfContents = true

  2. 在 /config/_default/markup.toml 中修改：

    [tableOfContents]
  startLevel = 2
  endLevel = 4

目录高度 #

在 /assets/css/custom.css 中添加：

/* 文章目录高度 */
.toc {
   /* vh是屏幕，100vh即满屏，如果改成px则是固定高度不随屏幕变化 */
  max-height: 50vh;
  /* 内容高于目录框则显示滚动条 */
  overflow-y: auto;
   /* 目录底部内边距 */
  padding-bottom: 50px;
}

代码块复制按钮 #

  1. 在 /config/_default/params.toml 中设置：

    enableCodeCopy = true

  2. 在 /config/_default/params.toml 中添加：

    [highlight]
  noClasses = false
   codeFences = true
  guessSyntax = true

  3. 在 /config/_default/language.xx.toml 中修改内容：

    code:
  copy: "Copy"
  copied: "Copied"

文末作者信息 #

在 /config/_default/params.toml 中设置：

[article]
  showAuthor = false

长链接自动换行 #

在 /assets/css/custom.css 中添加：

/* 让长链接或长单词在小屏幕自动换行 */
a,
p,
code,
pre,
pre code,
.content,
.article-content {
  word-break: break-word;
  overflow-wrap: break-word;
}

.card,
.card * {
  word-break: break-word;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

友链 #

目标效果是一行三栏卡片式摆放，参考了菜菜子的这篇文章Hugo + Blowfish｜自装样式记录，但是congo主题自带的一些效果，会导致一些bug，所以折磨gpt做了一些修改，还加了点特效

卡片样式 #

  1. 新建 layouts/shortcodes/friend.html ：

    {{- $name := .Get "name" | default (.Get 0) -}}
{{- $url := .Get "url" | default (.Get 1) -}}
{{- $avatar := .Get "avatar" | default (.Get 2) -}}
{{- $bio := .Get "bio" | default (.Get 3) -}}

<a href="{{- $url -}}" title="{{- $name -}}" class="friend-link" target="_blank" rel="friend">
    <div class="friend-link-div">
        <div class="friend-link-avatar">
            <img src={{ .Get "avatar" }} class="friend-avatar" loading="lazy" alt="Avatar">
        </div>
        <div class="friend-link-info">
            <i class="fa fa-link" aria-hidden="true"></i>
            <i class="friend-name">{{ $name }}</i>
            <p class="friend-bio">{{ $bio }}</p>
        </div>
    </div>
</a>

  2. 在 /assets/css/custom.css 中添加：

    /* ---------- 友链卡片样式开始 ---------- */
.friend-link {
  display: block;
  width: 100%;
  margin: 0.5rem auto; /* 改卡片纵向距离 */
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  text-decoration: none !important;
  color: inherit !important;
  transition: transform 0.2s ease;
}

.friend-link:hover {
  background-color: #fff !important;
  border-radius: 12px;
}

.friend-link-div {
  display: flex;
  align-items: center;
  padding: 0px 16px; /* 调整卡片内边距 */
}

.friend-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 10px;
}

/* 鼠标放上去头像旋转 */
.friend-avatar {
  transition: transform 0.5s ease;
}
.friend-link:hover .friend-avatar {
  transform: rotate(360deg);
}

.friend-link-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.friend-name {
  font-size: 16px;
  font-weight: bold;
  color: #444;
  margin: 0 0 0 12px;
  font-style: normal;
}

.friend-bio {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 0 12px;
}

/* 夜间模式 */
.dark .friend-link {
  background-color: #99a5be !important;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.05);
}

.dark .friend-name {
  color: #ddd;
}

.dark .friend-bio {
  color: #f5f5f5;
}

.dark .friend-avatar {
  border-color: #444;
}

/* 自适应屏幕一行多栏展示 */
.friend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: 1rem; /* 横向间距 */
  row-gap: 0rem;   /* 纵向间距 */
}

  3. 在 md 文档正文中调用：

    <div class="friend-grid">
/*每个短代码都要用 {{ 开头，用 }} 结束，所以记得把斜杠去掉*/
{/{< friend name="名字" url="地址" avatar="头像" bio="简介" >}/}
{/{< friend name="名字" url="地址" avatar="头像" bio="简介" >}/}
</div>

短代码应用 #

高亮 #

盼望着，盼望着，东风来了，春天的脚步近了。

<mark>盼望</mark>

折叠 #

点我展开 我是第一段
我是第二段 
<details>
<summary>点我展开</summary>
我是第一段<br>
我是第二段
</details>

模糊 #

这段文字默认模糊
鼠标放上去会变清晰

<p class="blur-text">这段文字默认模糊<br>鼠标放上去会变清晰</p>

在 /assets/css/custom.css 中添加：

/* 文字模糊效果 */
.blur-text {
  filter: blur(3px);
  transition: filter 0.3s ease;
  cursor: url(/cursors/link_resized.png), pointer !important;
}
.blur-text:hover {
  filter: blur(0);
}

卡片 #

外面在下雨
就很适合
在家里睡觉 
//调用时去掉两个括号中间的斜杠
{/{<card>}/}外面在下雨<br>就很适合<br>在家里睡觉{/{</card>}/}

在 /assets/css/custom.css 中添加：

/* 文字卡片样式 */
.card {
  background-color: #fff;        /* 白底 */
  border-radius: 12px;           /* 圆角 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  /* 轻微阴影 */
  padding: 1rem 1.5rem;          /* 内边距 */
  margin: 1.5rem 0;              /* 上下外边距，避免紧贴其他内容 */
  transition: box-shadow 0.3s ease;
}

图片轮播 #

/* 在md文档内调用时删除斜杠 */
{/{< imgloop "图片1,图片2,图片3" >}/}

  1. 在 /config/_default/params.toml 中添加：

    enableimgloop = true

  2. 新建 layouts/shortcodes/imgloop.html ：

    {{ if .Site.Params.enableimgloop }}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {{$itItems := split (.Get 0) ","}}
            {{range $itItems }}
            <div class="swiper-slide">
                <img src="{{.}}" alt="">
            </div>
            {{end}}
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
     <!-- Initialize Swiper -->
     <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
        //自动调节高度
        autoHeight: true,
        //键盘左右方向键控制
        keyboardControl : true,
        //鼠标滑轮控制
        mousewheelControl : true,
        //自动切换
        //autoplay : 5000,
        //懒加载
        lazyLoading : true,
		lazyLoadingInPrevNext : true,
		//无限循环
		loop : true,
        });
        </script>
{{ end }}

  3. 在 /assets/css/custom.css 中添加：

    /* 图片轮播 */
.swiper-container {
    max-width: 820px;
    margin: 2em auto;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background-color: #fff;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    margin: 0 !important;
}

B站视频 #

/* 在md文档内调用时删除斜杠 */
{/{< bilibili BV1XXxce2ErE 1 >}/}

新建 layouts/shortcodes/bilibili.html ：

{{ $vid := (.Get 0) }}
{{ $videopage := default 1 (.Get 1) }}
{{ $basicQuery := querify "page" $videopage "high_quality" 1 "as_wide" 1 }}
{{ $videoQuery := "" }}

{{ if strings.HasPrefix (lower $vid) "av" }}
    {{ $videoQuery = querify "aid" (strings.TrimPrefix "av" (lower $vid)) }}
{{ else if strings.HasPrefix (lower $vid) "bv" }}
    {{ $videoQuery = querify "bvid" $vid }}
{{ else }}
    <p style="color:red;">视频 BV 或 AV 号错误：{{ $vid }}</p>
{{ end }}


<style>
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<div class="video-wrapper">
  <iframe 
    src="https://player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}" 
    allowfullscreen 
    scrolling="no">
  </iframe>
</div>

html嵌套 #

加粗 #

<strong>这是加粗</strong>

换行 #

这是第一行。<br>
这是第二行。

换段 #

<p>这是第一段。</p>
<p>这是第二段。</p>

图片 #

 <img src="图片链接" alt="图片描述" style="max-width:100%;"/>

代码 #

/* 代码块 */
<pre><code>
git init
git add .
git commit -m "first commit"
</code></pre>