【Hugo】Stack主题的使用记录

已于 2024-01-15 00:13:43 修改
阅读量1.4k 收藏 9
点赞数 1
分类专栏： 个人 文章标签： Hugo Stack
于 2023-08-26 08:45:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75288929/article/details/132507563
版权

Hugo官网

运行环境

  • hugo版本：v0.117.0（扩展版）

  • go：1.21.0

  • PowerShell 7（x64）

  • Windows10

Hugo是一个使用Go编写的静态站点生成器，即网站构建工具。

静态的意思是指在内容在网站上呈现之前需要全部编译成HTML文件。而动态的站点生成器是请求哪个页面就编译生成哪个HTML页面。

在Windows上可以选用包管理器Chocolatey、Scoop、Winget来安装Hugo。

这里我选择使用winget来安装。

安装winget：从 Microsoft Store 获取应用程序安装程序。再安装Hugo扩展版。

winget install Hugo.Hugo.Extended

测试安装成功与否：hugo version。

使用 Hugo 时通常会使用Git、Go和Dart Sass 。Go环境则是主要用于Hugo的模块功能。Dart Sass 将 Sass 转译为 CSS。

Windows 10 默认是 Windows PowerShell 是 5.X 版本，在 Win10 V1903 以上版本后，打开 PowerShell 时，会提示 “尝试新的跨平台 PowerShell aka.ms/pscore6 ” 。安装新版PowerShell：

$ winget search Microsoft.PowerShell
Name               Id                           Version Source
--------------------------------------------------------------
PowerShell         Microsoft.PowerShell         7.3.6.0 winget
PowerShell Preview Microsoft.PowerShell.Preview 7.4.0.3 winget
$ winget install --id Microsoft.Powershell --source winget

初始化

我们在文档下面创建一个名为MyHugoSite的目录结构：

cd Documents
hugo new site MyHugoSite
cd MyHugoSite

提示告诉我们有关主题的获取方式、文件的添加和站点的构建。

将MyHugoSite目录初始化为Git存储库：

git init

添加主题

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

image-20230826083151941

使用git submodule命令添加一个子模块到themes文件夹下，这个主题子模块可以用作参考。当我们需要对其样式或功能做出修改时，可以将其内容部分或文件拷贝到根目录下（MyHugoSite）对应位置。

启用主题：在hugo.toml中添加一句theme='hugo-theme-stack'：

启动Hugo的开发服务器查看站点：

hugo server

按ctrl+C停止。

默认不包括草稿内容。

添加新页面：

hugo new content posts/the-first-post.md

启动服务器，且包含草稿内容：

hugo server --buildDrafts
或
hugo server -D

修改配置文件

mv hugo.toml hugo.toml.bak
cp themes/hugo-theme-stack/exampleSite/config.yaml .

2023/8/26的config.yaml

baseurl: https://example.com
# languageCode: en-us
languageCode: zh-cn
theme: hugo-theme-stack
paginate: 5
title: 影麟
copyright: 影麟

languages:
    zh-cn:
        languageName: 中文
        # 博客名
        title: 影麟
        weight: 1
        params:
            description: 影麟的个人博客

    # en:
    #     languageName: English
    #     title: Example Site
    #     weight: 2
    #     params:
    #         description: Example description
    
    # ar:
    #     languageName: عربي
    #     languagedirection: rtl
    #     title: موقع تجريبي
    #     weight: 3
    #     params:
    #         description: وصف تجريبي

# Change it to your Disqus shortname before using
disqusShortname: hugo-theme-stack

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: zh-cn

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true

permalinks:
    post: /p/:slug/
    page: /:slug/

params:
    mainSections:
        - post
    featuredImageField: image
    rssFullContent: true
    favicon:  # e.g.: favicon placed in `static/favicon.ico` of your site folder, then set this field to `/favicon.ico` (`/` is necessary)

    footer:
        since: 2020
        customText:

    # 日期格式
    dateFormat:
        published: Jan 02, 2006
        lastUpdated: Jan 02, 2006 15:04 MST

    sidebar:
        # 头像处的表情
        emoji: 🍥
        # 简介
        subtitle: 学无止境，勇攀高峰！
        avatar:
            enabled: true
            local: true
            # 位于assets/img/下的图片，头像
            src: img/avatar.png

    article:
        math: false
        toc: true
        readingTime: true
        license:
            enabled: true
            default: Licensed under CC BY-NC-SA 4.0

    comments:
        enabled: true
        provider: disqus

        disqusjs:
            shortname:
            apiUrl:
            apiKey:
            admin:
            adminLabel:

        utterances:
            repo:
            issueTerm: pathname
            label:

        remark42:
            host:
            site:
            locale:

        vssue:
            platform:
            owner:
            repo:
            clientId:
            clientSecret:
            autoCreateIssue: false

        # Waline client configuration see: https://waline.js.org/en/reference/component.html
        waline:
            serverURL:
            lang:
            pageview:
            emoji:
                - https://unpkg.com/@waline/emojis@1.0.1/weibo
            requiredMeta:
                - name
                - email
                - url
            locale:
                admin: Admin
                placeholder:

        twikoo:
            envId:
            region:
            path:
            lang:

        # See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
        cactus:
            defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
            serverName: "cactus.chat"
            siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)

        giscus:
            repo:
            repoID:
            category:
            categoryID:
            mapping:
            lightTheme:
            darkTheme:
            reactionsEnabled: 1
            emitMetadata: 0

        gitalk:
            owner:
            admin:
            repo:
            clientID:
            clientSecret:

        cusdis:
            host:
            id:
    widgets:
        homepage:
            - type: search
            - type: archives
              params:
                  limit: 5
            - type: categories
              params:
                  limit: 10
            - type: tag-cloud
              params:
                  limit: 10
        page:
            - type: toc

    opengraph:
        twitter:
            # Your Twitter username
            site:

            # Available values: summary, summary_large_image
            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: true

        # Available values: auto, light, dark
        default: auto

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

### Custom menu
### See https://docs.stack.jimmycai.com/configuration/custom-menu.html
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main: []

    social:
        - identifier: github
          name: GitHub
          url: https://github.com/Shadow-Kylin/Shadow-Kylin.github.io
          params:
              icon: brand-github

        # - identifier: twitter
        #   name: Twitter
        #   url: https://twitter.com
        #   params:
        #       icon: brand-twitter

related:
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    goldmark:
        renderer:
            ## Set to true if you have HTML content inside Markdown
            unsafe: true
    tableOfContents:
        endLevel: 6
        ordered: true
        startLevel: 1
    highlight:
        noClasses: false
        codeFences: true
        guessSyntax: true
        lineNoStart: 1
        lineNos: true
        lineNumbersInTable: true
        tabWidth: 4

修改内容区

cp -r ./themes/hugo-theme-stack/exampleSite/content/categories ./content
cp -r ./themes/hugo-theme-stack/exampleSite/content/page ./content
cp -r ./themes/hugo-theme-stack/exampleSite/content/_index.zh-cn.md ./content

运行

运行 hugo server。

初始样子

修改配置和添加文章后的样子

屏幕截图 2023-08-26 082328

文章位置

主题默认在主页输出 content/post 目录下的内容，应该在那个目录新建文章。

image-20230826082815086

左侧菜单项目

主页，关于，归档，搜索，链接等页面在 content/page/ 目录中有对应的目录。

image-20230826082903271

把对应目录中的 index.md 复制为 index.zh-cn.md, 然后将 index.zh-cn.md 的 front matter 中的 title 修改成对应的中文标题就让侧边栏显示成中文。

image-20230826082948694

主题中的图标

主题自带一些来自 Tabler Icons的图标，它们放在 themes/hugo-theme-stack/assets/icons/ 目录中。

如果要使用自定义图标，把它们放在 assets/icons/ 目录。

front matter是什么：

image-20230825183824457

文章封面

在 front matter 中通过 image 属性定义要使用的封面图片。

image: hugo-logo-wide.svg

这个封面图片放在哪儿？

image-20230825191923124

或者我们封面使用外链也可以。

导入字体

themes/hugo-theme-stack/assets/scss/style.scss

@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-lite-webfont@1.1.0/style.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/cascadia-code@4.2.1/index.min.css');

修改字体

themes/hugo-theme-stack/assets/scss/variables.scss

:root {
    --sys-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Droid Sans", "Helvetica Neue";
    --zh-font-family: "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";

    --base-font-family: "Lato", var(--sys-font-family), var(--zh-font-family), sans-serif;
    --code-font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

代码折叠

image-20230826113433972

image-20230826113359372

<!-- 折叠代码 -->

<details class="codefold">
    <summary class="codefold__title">
        <span class="codefold__title-text">
            " {{ with .Get 0}}{{.}}{{else}}click to expand{{ end }} "
        </span>
    </summary>
    {{ .Inner }}
</details>

<!-- 样式 -->
<style>
    .codefold {
        margin: 1.5em 0;
        border: 1px solid #e9edf3;
        /* overflow: hidden; */
        background-color: #f6f8fa;
    }

    .codefold__title {
        padding: 0.5em 1em;
        cursor: pointer;
        user-select: none;
        background-color: #f6f8fa;
    }

    .codefold__title-text {
        flex: 1;
        font-size: 1.2em;
        font-weight: 600;
        color: rgb(215, 178, 130);
        text-decoration: 2px underline;
    }

    .codefold_tip {
        font-size: 1.2em;
        font-weight: 600;
        color: #6280ad;
    }
</style>

<!-- 
    使用格式
    双括号 百分号 codefold 标题 百分号 双括号
    代码
    双括号 百分号 /codefold 百分号 双括号
 -->

友链三栏

在下面文件夹中的custom.scss中添加后面代码。

image-20230826121716126

@media (min-width: 1024px) {
    .article-list--compact.links {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;//三栏
        background: none;
        box-shadow: none;
        
        article {
            background: var(--card-background);
            border: none;
            box-shadow: var(--shadow-l2);
            margin-bottom: 8px;
            border-radius: 10px;
            &:nth-child(odd) {//奇数
                margin-right: 8px;
            }
        }
    }
}

音乐播放器

使用APlayer播放器。

在partials文件夹下添加music.html：

<!DOCTYPE html>
<html>

<head>
    <!-- require APlayer -->
    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
    <!-- require MetingJS -->
    <script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>
    <style>
        .aplayer-body {
            opacity: 0.8;
            color: #030006;
            font-weight: 600;
            box-shadow: 0 2px 10px #5b57ca;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div id="aplayer">
    </div>
    <script>
        const ap = new APlayer({
            container: document.getElementById('aplayer'),
            fixed: true,//固定到底部
            theme: '#e9e9e9',
            audio: [
                {
                    name: '歌名',
                    url: '链接',
                    artist: '歌手名',
                    cover: "封面地址"
                },
            ]
        });
    </script>
</body>

之后，在footer/custom.html中添加{{partial "music" .}}。

文章评论

使用Waline，其教程很完整。

根据Waline教程从头完成到使用Vercel部署完成。

最后在config.yaml中的waline的serverURL给上你的Vercel服务器地址。

以及开启评论

comments:
        enabled: true
        provider: waline

快速搭建

上面的操作有些儿繁琐，我们可以使用模板快速搭建：CaiJimmy/hugo-theme-stack-starter。

成果

影麟

上面博客里的大部分图片都存在了Github，所以你们可能会获取失败。

参考文章

  1. 墨语-Hugo Stack 主题使用方法
  2. 建站技术 | 使用 Hugo+Stack 简单搭建一个博客——失迹の博客
  3. （1）带着Stack主题入坑Hugo
「已注销」
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
hugo 建站（本地搭建）
随风潜入夜，不白头
10-21 1127
Hugo是由Go语言实现的静态网站生成器；简单、易用、高效、易扩展、快速部署。 网上像这样的文章估计都写烂了，俗话说的好，读万卷书，亦要行万里路，好记性也要烂笔头呀；好吧，废话不多说了，记录自己的过程！ 一、准备： 1、Go 环境搭建（菜鸟教程）a、Go官网 b、Go官方镜像站（推荐）c、我的百度网盘下载 go1.17.2 win版（提取码：tps2） 2、Git 工具（菜鸟教程） 3、推荐使用Typora（Markdown编辑器），我的网盘下载Typora（提取码：kr94） 4、hug...
hugo-stack for github
Talmaidev@qq.com
10-22 784
VSCode的User Snippets功能可以帮助你快速插入常用的代码片段。例如，你可以创建一个User Snippet来快速插入Hugo的YAML front matter，这可以大大提高你创建新文章的速度moonbooth.com。[](https://img-blog.csdnimg.cn/38b01a69d1ad42c28a39f857db89607b.png)- 到了这一步 甚至可以直接依照官方文档进行配置[Stack的文档](https://stack.jimmycai.com/)
推荐一款宝藏Hugo主题：Sam
最新发布
gitblog_00027的博客
04-20 487
推荐一款宝藏Hugo主题：Sam 项目地址:https://gitcode.com/victoriadrake/hugo-theme-sam 项目简介 如果你正在寻找一个简洁、优雅且功能丰富的静态网站生成器Hugo的主题，那么victoriadrake/hugo-theme-sam绝对值得你关注。这款开源主题以其现代化的设计和高度可定制性，为个人博客、文档站点或在线作品集提供了完美的平台。 技术分...
分享一个简洁、优雅且高效的 Hugo 博客主题 - FixIt
博採眾長
01-27 9748
FixIt 是一个简洁、优雅且高效的 Hugo 博客主题。
hugo-theme-stack：为博客作者设计的卡片式Hugo主题
02-04
雨果主题栈 卡风格的雨果主题，专为博主设计。 演示版 文档和更多信息 | 介绍 Stack是一个简单的卡片式Hugo主题，专为博客作者设计，其某些功能包括： 响应图像支持 延迟加载图像 暗模式 本地搜寻 集成 存档页面模板 完全本机JavaScript，不使用jQuery或任何其他框架 没有CSS框架，请​​保持简洁和最小化 正确裁剪的缩略图 小节支持 要求 必须使用Hugo≥0.78.0 。 如果要执行以下操作，请使用Hugo扩展版本（推荐）： 使用master分支中的最新功能/修复 编辑SCSS文件 编译CSS每个版本更新一次。 安装 将该库克隆/下载到theme文件夹，然后根据ex
从零开始：学习使用 Hugo 构建自己的静态网站
蜗牛的博客
03-02 2447
Hugo 是一个由 Go 语言编写的静态网站生成器。它可以帮助用户快速构建高性能的静态网站，特别是博客、文档和个人网站等。与其他静态网站生成器相比，Hugo 的特点是速度快、易于使用、可扩展性强等。Hugo 使用简单的 Markdown 和 HTML 等标记语言来创建内容，并使用 Go 语言的模板引擎来自定义主题和布局。Hugo 的优点还包括其跨平台性、低资源消耗和易于维护等。由于其快速编译和生成速度，Hugo 成为了流行的静态网站生成器之一。
推荐一款独特而实用的Hugo主题：Terminal
gitblog_00051的博客
03-24 460
推荐一款独特而实用的Hugo主题：Terminal 项目地址:https://gitcode.com/panr/hugo-theme-terminal 项目简介 Hugo Theme Terminal 是一个基于Hugo框架构建的现代化、简洁且高效率的主题。这款主题以其独特的终端风格和出色的可读性脱颖而出，为个人博客或者文档站点提供了一种新鲜且富有个性的展现方式。 技术分析 Hugo Hugo 是...
webstack-hugo:Hugo版 WebStack 主题 Demo
05-31
Hugo版 WebStack 主题本项目是基于纯静态的网址导航网站 制作的主题，主题安装后，将exampleSite目录下的文件复制到hugo站点根目录，网址信息可通过data目录下webstack.yml修改。这是一个开源的公益项目，你可以拿来...
基于Javascript的Hugo博客主题FixIt设计源码
04-08
Hugo博客主题FixIt：基于Javascript开发，包含3264个文件，包括2758个SVG图像文件、163个CSS样式文件、94个HTML文件、65个...该项目是一个简洁、优雅且高效的Hugo博客主题，旨在为用户提供一个干净、现代的博客界面。
hugo-bootstrap-5:使用 Bootstrap 5 的简单 Hugo 主题
05-29
这是一个使用的简单 Hugo 主题，灵感来自 。 安装 您可以将主题安装为克隆或子模块。 我推荐后者。 从 Hugo 站点的根目录，键入以下内容： $ git submodule add ...
blank:入门 Hugo 主题用作构建自定义主题的模板
08-03
空白的 空白 - 开发人员的入门主题。 用它来制作你自己的主题。 安装 在您的 Hugo 站点themes目录中，运行： git clone https://github.com/vimux/blank 接下来，打开 Hugo 站点底部的config.toml并确保主题选项设置为blank 。 theme = "blank" 有关更多信息，请阅读 Hugo 的官方。 贡献 您是否发现了错误或对新功能有了想法？ 请随时使用让我知道。 或者直接发出。 执照 这个主题是在下发布的。
hugo-theme-learn, 移植地心引力向Hugo学习主题.zip
09-17
hugo-theme-learn, 移植地心引力向Hugo学习主题 学习主题这个库包含了一个主题为 Hugo，基于伟大的重力学习主题。访问主题文档查看发生了什么。 它是用这个主题构建的。的主要功能自动搜索多语言模式无限菜单级别自动下一个/上一个按钮在菜单项中导航图像调整大小，阴影。附件文
hugo-goa, Hugo的简单简约主题.zip
10-09
hugo-goa, Hugo的简单简约主题 Goa是博客和个人网站的简洁。简单和简约的主题。 演示你可以在这里找到演示站点 ，这里是源代码，这里是源服务器。安装从你的博客的root:mkdir -p themescd themes
vanilla-hugo:Stackbit的香草主题
04-02
:sparkles: Stackbit香草主题-雨果 :sparkles: 这是一个使用Git作为CMS的主题。 它是在不到一分钟的时间内使用创建的。 您可以从该主题，或探索一些变体。 如何不同： :gear: 静态网站生成器 :pencil: 内容管理系统 贡献 该存储库是自动生成的，无法接收拉取请求。 如果您有任何建议或反馈，欢迎提交问题。 本地发展 按照安装Hugo 此主题使用处理SCSS –请确保您已安装Hugo扩展版本： hugo version 启动Hugo开发服务器： hugo server 在浏览器中打开 :party_popper: 编辑内容 要开始编辑您的网站，您可以编辑随附的Markdown文件。 另外，也可以使用与此主题相关的Stackbit创建一个新站点，并使用提供的免费页面编辑体验。 这里有一些资源可以帮助您入门： :television: :television: :television: :television: :books: 如果需要帮助，请确保查看。 科洛芬 由Stackbit版本0.3.50在2
hugo-blog:使用hugo创建博客
03-22
Hugo博客搭建指南：使用SCSS增强样式 Hugo是一款快速且功能强大的静态网站生成器，尤其适合用于创建个人博客。本文将深入探讨如何利用Hugo搭建一个博客，并着重讲解如何结合SCSS（Sass的CSS预处理器）来提升博客的...
探索优雅与实用并存：Hugo 主题 Cactus
gitblog_00061的博客
04-17 269
探索优雅与实用并存：Hugo 主题 Cactus 项目地址:https://gitcode.com/monkeyWzr/hugo-theme-cactus 项目简介 Hugo Theme Cactus 是一个精心设计的静态网站生成器 Hugo 的主题。它以简洁、响应式的设计和丰富的功能吸引了许多博客作者和技术爱好者。这个开源项目旨在为用户提供一款既美观又高效的博客模板，帮助他们更好地展示自己的思想...
码云上git的链接在哪里看_使用Git Bash从Git上下载代码到本地以及上传代码到码云Git...
weixin_42512699的博客
01-16 138
前提是在码云上已经新建一个空的项目，可参考：https://www.cnblogs.com/babysbreath/p/9170455.html1、新建一个目录，存放下载下来的项目，我在D盘新建了一个“gitspace”文件夹，用来存放下载下来的项目2、进入刚刚新建的文件夹，即进入“gitspace”，点击鼠标右键，选择"Git Bash Here",如下图：点击“Git Bash Here”之后...
如何使用hugo搭建个人博客（二）：修改主题：颜色，字体，布局
热门推荐
stepup
06-09 1万+
上一篇博文中谈到了如何在本地使用hugo预览特定主题crisp，本文介绍主题的颜色，字体，布局的修改。修改主题侧边栏颜色crisp主题的侧边栏默认是白色，如果想改个颜色咋办？到github仓库 https://github.com/penn201500/hugo-crisp-theme-for-blog/ 获取 hugo-crisp-theme-for-blog/mysite/themes/cris
WebStack-Hugo
09-19
WebStack-Hugo是一个开源的Hugo主题，可以用于构建个人博客或网站。你可以通过点击GitHub仓库中的"Download ZIP"按钮来下载主题的压缩包，然后将其解压到你的Hugo目录中。你还可以通过git命令来安装主题，具体步骤是在themes目录下使用git clone命令克隆WebStack-Hugo的仓库。这样你就可以在Hugo的配置文件中选择并应用WebStack-Hugo主题了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

「已注销」

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值