Hugo·Stack主题·杂记

news2024/9/25 13:24:44

运行环境

hugo版本:v0.117.0(扩展版

go:1.21.0

PowerShell 7(x64)

Windows10

添加主题

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

image-20230826083151941

修改配置文件

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 目录下的内容,应该在那个目录新建文章。

注意,Hugo 官方文档入门教程里面是在 content/posts 目录新建文章。

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/partials/base.scss

导入字体

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;
}

成果

影麟

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

参考文章

墨语-Hugo Stack 主题使用方法

建站技术 | 使用 Hugo+Stack 简单搭建一个博客——失迹の博客

(1)带着Stack主题入坑Hugo

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/930321.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言入门 Day_10 判断的进阶

目录 前言 1.多重判断 2.代码块 3.条件运算符 3.易错点 4.思维导图 前言 if和else能够处理两种不同的情况,如果(if)满足条件,我们就执行这几行代码;否则(else)的话,我们就执行…

快速排序三种思路详解!

一、快速排序的介绍 快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法,其基本思想为:任取待排序元素序列中 的某元素作为基准值,按照该排序码将待排序集合分割成两子序列,左子序列中所有元素均小于基准值,…

电脑excel文件误删怎么恢复?分享6种有效方法

在日常办公中,电脑中存储的Excel文件可能会遭遇误删的意外情况,如何快速恢复误删的Excel文件成为许多人关注的热点。本文将介绍几种有效的方法,希望能够帮助您恢复误删的Excel文件。 方法1、从回收站恢复 检查电脑的回收站,如果E…

数字孪生是什么?工厂数字孪生实例分析

数字孪生是建筑物或城市等物理实体的 3D 模型,数字孪生具有实时、连续的数据,可实时更新其功能和流程,从而为工程师提供分析和优化生产流程的数据支撑。简单来说,数字孪生是物理实体的 3D 模型,3D 模型的动画由真实实体…

行业冠军NANK南卡再添新高度,打造百元级开放式蓝牙耳机新标杆!

​最近,国内最受欢迎的开放式耳机品牌NANK南卡推出了一款名为OE CC的产品,它以0感0压为卖点。不断根据用户的反馈进行优化,现如今这款耳机正式在各大平台上架销售。它采用了先进的技术,重新定义了百元级别开放式耳机的三个标准。这…

GD32-舵机的原理

GD32-舵机的原理 舵机的现一脉宽与舵机转动角度 旋转编码器的原理 顺时针:A的下降沿时,B处于高电平; 逆时针:A的下降沿时,B处于低电平; #ifndef _ENCODER_DRIVE_H #define _ENCODER_DRIVE_H#include &quo…

Matlab图像处理运算方法-非线性点运算

常见的非线性灰度变换为对数变换和幂次变换。 对数变换 对数变换的一般表达式为: tclog(1s) 其中c为尺度比例常数,s为输入图像灰度值,t为变换后的输出图像灰度值。在如下图所示的对数曲线上,函数…

node-red - 读写操作redis

node-red - 读写操作redis 一、前期准备二、node-red安装redis节点三、node-red操作使用redis节点3.1 redis-out节点 - 存储数据到redis3.2 redis-in节点 - 查询redis数据 附录附录1:redis -out节点示例代码附录2:redis -in节点示例代码 一、前期准备 安…

ensp-IPsec vpn配置

ensp-IPsec vpn配置 📎IPsec VPN配置.docx📎IPSec.zip

Windows和Linux卸载anaconda的完整解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

drag handle是什么意思?

Drag handle" 是一个术语,通常用于描述在用户界面(如软件应用程序、网页等)中用于拖拽或调整元素的小型图标、区域或手柄。它是一种交互式设计元素,用户可以通过拖拽它来改变界面上的元素的位置、大小或其他属性。 “Drag h…

数字孪生技术在3大行业的重点应用

数字孪生技术是利用模拟仿真技术将实体对象数字化的技术。它基于虚拟现实、人工智能和云计算等技术,能够创建与真实物体相同的数字模型,并通过实时监测和分析手段,提供关于该物体的全面数据,从而优化产品开发和生产过程。数字孪生…

熊猫:完整的初学者指南

pandas:完整的初学者指南 一、说明 在你的Python开发人员或数据科学之旅中,你可能已经多次遇到“熊猫”这个词,但仍然需要弄清楚它的作用。以及数据和熊猫之间的关系。所以让我向你解释一下。 根据最新估计,每天创建 328.77 亿 TB…

二分查找逻辑

目录 二分查找 查找逻辑 题目练习 题目描述 代码示例 总结 二分查找 二分查找是我们经常使用的一种算法,他的逻辑是 在升序或者降序且无重复元素的数组中,比较目标值和数组中间值的方法,每次缩小一半的搜索范围,相比遍历可…

Unity Alembic闪烁问题

最近在做项目时,发现Clo3D导出的服装abc动画,导入到Unity中后(已提前导入Alembic插件),运行时屏幕会闪烁(变黑)。 经过几轮测试,发现是切线的问题。解决办法很简单。将abc文件上的Tangents属性值改为None即可。

一篇关于CPU的硬核知识分享

不管你玩硬件还是做软件,你的世界都少不了计算机最核心的 —— CPU。 01CPU是什么? CPU与计算机的关系就相当于大脑和人的关系,它是一种小型的计算机芯片,通常嵌入在电脑的主板上。 CPU的构建是通过在单个计算机芯片上放置数十亿…

app.js和页面.js 实现全局传参

实现全局传参的几个步骤:1. 在页面.js文件中 输入 const appgetApp() 2.便可以在页面中引用app.js中的globalData中的数据。 注意点:app.js中是使用的是this.globalData (调用自身的数据) 页面.js中使用的是app.globalData(引用ap…

Web 应用框架 Express 构建 RESTful API

Express框架 Express 是 Node.js 平台上最常用的 Web 应用框架之一,它简洁、灵活且易于使用。Express 提供了一组强大的功能和工具,可以帮助开发者快速构建 Web 应用程序和 RESTful API。 以下是 Express 框架的一些主要特点和功能: 轻量级…

c++11 标准模板(STL)(std::basic_istringstream)(五)

定义于头文件 <sstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_istringstream;(C11 前)template< class CharT, class Traits std::char_traits<CharT>, class Allocator std::allo…

国家管网:围绕招标全链路,聚焦提升招标管理数智化水平

“要深化供应链管理系统应用&#xff0c;推动全面应用电子招标平台开展工程建设项目招标&#xff0c;实现招标工作过程透明、效率提升和监管有力。” ——国家管网董事长 张伟 作为能源领域新的“国家队”&#xff0c;国家管网立足新变局应对新挑战&#xff0c;着力提升产业链…