Hugo Themes

Prev/Next: All Themes

Virgo

Just for fun.

  • Author: Jack Liu
  • Minimum Hugo Version: 0.41.0
  • GitHub Stars: 49
  • Updated: 2023-05-25
  • License: MIT
  • Tags: Blog
Download Demo
Virgo

🎨 hugo-theme-virgo

简介

一个简单纯净的主题，欢迎使用。🎉🎉🎉

Preivew

‘她’包含：

  • 两种模式：纯净、酷爽，
  • 内置但不限于精美的本地字体，
  • 高亮的层级目录，以及
  • 简单强大的本地文章实时搜索功能等。

更新日志 

- 2023-03-23 14:58 增加 utterances 评论插件
- 2023-03-22 16:08 更新主页快捷联系选项，增加知乎和简书
- 2023-03-21 17:58 更新导航页面文件结构 - `nav.md` 或 `nav/index.md`
- 2023-03-19 00:05 优化导航页面快速跳转

快速开始

首先，下载该主题。

cd YOUR_SITE_DIR	# 本地站点目录
git clone https://github.com/loveminimal/hugo-theme-virgo.git themes/virgo
# OR
cd YOUR_SITE_DIR
git submodule add https://github.com/loveminimal/hugo-theme-virgo.git themes/virgo

💡 使用哪种方式呢？如果你有这个疑问，那么就选择第一种。

然后，更新你站点的 config.toml 内容，如下（后续可按需修改）：

baseURL = 'https://ovirgo.com/'
languageCode = 'zh-cn'
title = 'Virgo'

# 启用主题
theme = 'virgo'

hasCJKLanguage = true
summaryLength = 80
paginate = 11
enableGitInfo = true

[params]
    author = 'Jack'
    slogan = 'Life should be interesting.' # 'Life is just a joker.'

    # 页面语言，默认中文
    en = false
    # 英文首页标题，默认 'Virgo'
    homeTitleEn = 'Virgo'
    # 中文首页标题，默认 ‘一晌贪欢’
    homeTitleZh = '一晌贪欢'

    # 激活暗色模式，
    # 由于静态页面的限制，我们使用浏览器本地存储来记忆该状态，
    # 如果设置为 `true` 后，默认不是暗色模式，清除浏览器缓存后刷新页面即可
    dark = false

    # 文章列表页单列显示
    isSingleColumnOfPostList = true

    # 是否显示相邻页链接
    isShowPrevNextLink = true

    # 激活页面加载时的过渡动画
    hasActiveAnimate = true

    # 激活 cool 模式，酷爽但是消耗资源也更多，
    # 如果想更换页面背景，只需要将图片命名为 `default.jpg` 后，置于 `/static/imgs/bg` 文件夹中即可，
    # 浏览器有缓存，更换后强制页面刷新（快捷键为 Ctrl+Shift+R）一下即可
    hasActiveCool = true

    # 展开/折叠代码块，默认不折叠，
    # 设置为 `true` ，则默认折叠所有代码块，
    # 提示，在移动设备中，系统设置为永久折叠代码块
    # （该项设置不重要，完全是个人喜好）
    hasFoldAllCodeBlocks = false

    # 如下导航链接，你应该创建对应的 `.md` 文件，以生成对应的页面
    # -----------------------------------
    # Nav - nav.md or nav/index.md 
    # Search - search.md or search/index.md
    # Archive - archive.md or archive/index.md
    # Wiki - posts/wiki.md or wiki/index.md
    # About - about.md or about/index.md
    # -----------------------------------
    # 菜单选项定制，使用 `00、01、23` 等进行选项顺序调整
    # 🐶🎉👀💡👓🐌
    [params.menu]
        [params.menu.00]
            active = true
            path = '/nav'
            en = 'Nav'
            zh = '导航'
            icon = '🎯'
        [params.menu.11]
            active = true
            path = '/search'
            en = 'Search'
            zh = '搜索'
            icon = '🔎'
        [params.menu.22]
            active = true
            path = '/posts'
            en = 'Posts'
            zh = '文章'
            icon = '📜'
        [params.menu.33]
            active = true
            path = '/archive'
            en = 'Archive'
            zh = '归档'
            icon = '🎉'
        [params.menu.44]
            active = true
            path = '/posts/wiki'
            en = 'Wiki'
            zh = '百科'
            icon = '🚀'
        [params.menu.55]
            active = true
            path = '/about'
            en = 'About'
            zh = '关于'
            icon = '🐌' 
    
    # 首页图片/文字
    [params.img]
        # 如果你不想显示图片，想显示一段话，只需要
        # 设置 `noImgButWords` 为 true 即可
        notImgButWords = false
        # 内置了 `girl.jpg, wukong.jpg, and tux.jpg, cat.svg ……`，当然你可以
        # 把自己喜欢图片放在 `static/imgs/` 目录中，并在 `src` 引用它，
        # 你还可以通过 `width` 调整引入图片的显示大小，
        # 如果，将 `width` 设置为 '' 或 0 ，
        # 将默认使用图片自身分辨率尺寸
        src = 'cat.svg'
        width = 0
        # words = "Stay hungry, Stay foolish. <br>Your time is limited, so don't waste it living someone else's life. <br>Have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary. <br>-- Steve Jobs."
        # words = "多少事，从来急；<br>天地转，光阴迫。<br>一万年太久，只争朝夕。<br>-- 教员"
        words = "“照顾好自己的身体和情绪，<br>这场人生，<br>你就赢了一大半，<br>其余的其余，<br>人生自有安排。”"

    [params.contact]
        icp = '<你的备案号>'                        # 备案号，如果你不想显示，设置为 '' 空即可
        icplink = '//beian.miit.gov.cn'             # 备案链接
        weibo = '<YOUR_CUSTOM_ID>'                  # e.g. https://weibo.com/u/<YOUR_CUSTOM_ID>
        wechat = 'imgs/bg/wechat.jpg'               # 微信二维码地址，位于 static 目录下
        # zhihu = '<YOUR_CUSTOM_ID>'                # e.g. https://www.zhihu.com/people/<YOUR_CUSTOM_ID>
        # jianshu = '<YOUR_CUSTOM_ID>'              # e.g. https://www.jianshu.com/u/<YOUR_CUSTOM_ID>
        email = '<YOUR_CUSTOM_ID>@outlook.com'
        github = '<YOUR_CUSTOM_ID>'                 # e.g. https://github.com/<YOUR_CUSTOM_ID>
        bilibili = '<YOUR_CUSTOM_ID>'                # e.g. https://space.bilibili.com/<YOUR_CUSTOM_ID>
        # twitter = '<YOUR_CUSTOM_ID>'              # e.g. https://twitter.com/<YOUR_CUSTOM_ID>
        # facebook = '<YOUR_CUSTOM_ID>'             # e.g. https://facebook.com/<YOUR_CUSTOM_ID>
        # instagram = '<YOUR_CUSTOM_ID>'            # e.g. https://www.instagram.com/<YOUR_CUSTOM_ID>
        # youtube = '<YOUR_CUSTOM_ID>'              # e.g. https://www.youtube.com/channel/<YOUR_CUSTOM_ID>
        # telegram = '<YOUR_CUSTOM_ID>'             # e.g. https://web.telegram.org/k/#@<YOUR_CUSTOM_ID>
        color = '#696969'                           # 图标颜色，默认为浅灰色
        slogan = 'Find me via : )'                  # 联系标语，不想显示，可以置空

    # 在开发环境下（http://localhost:1313/），不再启用评论插件，
    # 如果想在开发环境下启用它，修改服务端口即可，如下
    # hugo server -p=1314
    [params.utterances]
        active = true                             # 是否启用评论插件
        repo = "<YOUR_GITHUB_REPO>"               # 输入你的仓库名称
        issueTerm = "pathname"
        theme = "github-light"
        crossorigin = "anonymous"

# 以下为 Markdown 解析擎的一些设置，
# 建议保持不变
[markup]
    [markup.asciidocExt]
        preserveTOC = true
    [markup.highlight]
        # 代码块显示风格、行号显示
        style = "github"
        lineNos = false
    [markup.tableOfContents]
        endLevel = 3
        ordered = false
        startLevel = 2
    [markup.goldmark]
        [markup.goldmark.renderer]
            unsafe = true

现在，你就可以运行 hugo server -D 开始你的折腾之旅了。

导航页

如果，你想使用导航页并正确显示，那么就应该严格按照下面这种格式搭建你的 nav.md 文件结构：

---
title: "Nav"
draft: false
---

<div class="nav">

## 🌞 *分类 ONE*
- [mineitem one](/)
- [mineitem two](/archive)
- [mineitem three](https://nav-item-three.com)
 
## 🔨 *分类 TWO*
- [toolitem three](https://nav-item-three.com)

## 📑 *分类 THREE*
- [docitem one](/)
- [docitem two](/archive)
- [docitem three](https://nav-item-three.com)

</div>

## 🔖 *标签 BOOKMARKs*

<div class="bookmark">

- bookmark item one https://bookmark-item-one.com
- bookmark item two https://bookmark-item-two.com
- bookmark item three https://bookmark-item-three.com

</div>

为什么要做格式方面的限制呢？

众所周知，Markdown 对 Table 的支持很一般，鉴于导航页的内容主要是外链和书签，使用列表管理是最方便的。另外，我们会使用 JS 进行内容项的统计，所以就需要使用者遵守格式，不然可能页面显示可能会不正常。

标记语法增强

> 使用 JS 对 markdown 做出的一些增强性修改

不止一次吐槽过 markdown 虽然是纯文本性质的，但是其某些标记语法真的是让人不敢恭维，直观性和表现力都是一般。不过，从另一个方面来说，本来就是轻量级的标记语言，不可能承载太多。

本来想直接修改 markdown 引擎来实现，研究了一下，还要颇费一番工夫。鉴于仅满足于个人使用，用一些曲线方式使用 js 来实现反而更加简单些。

此处就记录一下针对 hugo-theme-virgo 做的一些魔改。

行内格式

Markdown 中的行内格式有以下几种：

语法效果转译 html 标签
**加粗**加粗<strong>加粗</strong>
*斜体*斜体<em>斜体</em>
~~删除线~~删除线<del>删除线</del>
` 行内代码行内代码<code>行内代码</code>
—下划线<u>下划线</u>

是的，markdown 中没有下划线的标记语法。

本来想用行内代码的标记格式做魔改，鉴于博文中出现行内的代码的概率较高，遍历起来相对更耗性能（虽然并没有多少），故决定选择 *斜体* 语法标记，其使用频率不多，且其对应的 Org Mode 中可以直接显为粗体显示。

新增语法效果
*_下划线*_下划线
*=高亮*=高亮

| *-高亮* | -高亮 | ❌
| *=吐槽系* | =吐槽系 | ❌

如此，我们便增加了 _下划线 和 =高亮 两种语法标识了。另外，在文章中，尤其是一些摘录和转载的文章中，我们需要做一些随笔，之前我们是使用 <div class="oh-essay">...</div> 这种标签插入，如上表，我们也对其做了语法标识。

如上，所示，更改了一些语法标记，因为有的 Markdown 引擎中使用 ==高亮== 来高亮文本，我们这里就用 *=高亮* 来表示，以做到在观感上统一。

另外，我们不再使用 *=吐槽系* 来表示个人在摘录或编辑中的个人想法展示，主要是由于在不支持当前语法标记的主题中，它只能以斜体展示，不容易和正文内容作区分。我们使用 >:: 吐槽系 或 > :: 吐槽系 来表示，如此在不支持的情况下，可以解析为引用样式，便于区分。

之前我们做了一些 snippet 进行 html 标签的插入，以实现以上效果，但是这就限定在了某些编辑器中，些许背离了纯文本输入的理念，以上小小的增强，使得我们可以任何文本编辑器中进行方便的文本输入。

>:: 好吧，尽管它们只能在 `hugo-theme-virgo` 中才有效果 😅
> ::好吧，尽管它们只能在 `hugo-theme-virgo` 中才有效果 😅
> :: 好吧，尽管它们只能在 `hugo-theme-virgo` 中才有效果 😅

上述语法标记是等价的，会被解析为如下样式：

🗨️ | 好吧，尽管它们只能在 hugo-theme-virgo 中才有效果 😅

代码块折叠

在 Markdown 中，包裹代码块很方便。但有时候在博文中，我们可能引入较多的代码片段，这会导致正文内容的间断，所以，允许其进行折叠，可以在 config.tom 中，使用 hasFoldAllCodeBlocks: true 进行初始化。

既然已经可以折叠了，这里我们不妨用它再做一个更通用的折叠板（默认折叠），原理也很简单，利用 lang 判别。

如果其为 _lang 这种格式，则表示轻量级代码折叠 - 不换行；如果使用 __lang 则折叠板中内容会自动换行。

Wiki 链接及图片语法渲染

最近使用 Obsidian ，其使用的链接及图片格式为 Wiki 语法，如下：

名称描述
链接[[link]]
链接（带描述）[[link | desc]]
图片![[path/to/img]]
图片（带尺寸）![[path/to/img | 200]]

Hugo 默认的 Markdown 引擎是不支持渲染这种语法的，我们这里做了一下增强，现在你可以畅快地使用 Obsidian 来编辑你的博客了。

= 图片和链接，好像 Wiki 的这种语法写起来更加简洁。其实，还是使用 <img> 标签的通用性更好些，不过许多软件的即时渲染又不支持，就很伤。

结语

制作主题，对 ‘强迫症’ 来说，真的是 ……

See Also