Git Product home page Git Product logo

hugo-theme-virgo's Introduction

🎨 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> 标签的通用性更好些,不过许多软件的即时渲染又不支持,就很伤。

结语

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

hugo-theme-virgo's People

Contributors

loveminimal avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.