Stacked主题文档

目录

官方文档可以在这里找到

设置说明

Front-matter设置

见下例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
title = "<页面的标题>"
date = "2010-01-01" # 发布日期
lastmod = "2020-01-01" # 更新日期
description = "<页面副标题>" # 会显示在主页上
math = true # 在本页面开启支持Katex
tags = ["<页面的标签>"]
categories = ["<页面的分类>"]
aliases = ["some-page-link", "AnOtHER_LinK"] # 给当前页面添加别的路径
license = "CC BY-NC-ND" # 指定当前页面的分享协议

[menu.main] # 在左侧菜单添加当前页面的入口
weight = -90 # 用于排序
params = { icon = "<入口图标>"}

[[links]] # 在文章底部添加外链块
title = "<外链标题>"
description = "<外链副标题>"
website = "<外链地址>"
image = "<外链的方形图片,本地图片和网络图片都支持>"

本网站样式

如果想要复现本网站的样式,可以创建assets/scss/custom.scss文件并且放入以下CSS样式:

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
// 使头像不是圆形而是圆角矩形
.sidebar header .site-avatar .site-logo {
    border-radius: 10%;
}

// 自定义字体
@import url("https://cdn.jsdelivr.net/npm/noto-serif-sc@22.0.0/all.css");
@import url("https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/style.css"); // https://github.com/lxgw/LxgwWenKai/issues/24
:root {
    --zh-font-family: "LXGW WenKai Screen", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei";
    --article-font-family: "Noto Serif SC", var(--base-font-family);
}

// 自定义配色
:root {
    --accent-color: #1a5086; // 主题色
    --accent-color-darker: #2c3e50; // 主题色2(深色)

    --body-text-color: #707070; // 页面字体颜色
    --card-text-color-main: #34495e; // 卡片字体颜色
    --card-text-color-tertiary: #767676; // 副卡片字体颜色
    --code-background-color: #f8f8f8; // 行内代码背景色
    --code-text-color: #e96900; // 行内代码前景色
    --blockquote-background-color: #b9ebea4d; // 引用块背景颜色
    --tr-even-background-color: #eff0fa54 !important; // 表格配色样式

    --selection-text-color: #333; // 选区前景色
    --selection-background-color: #b3b5b8; // 选区背景色

    &[data-scheme="dark"] { // 暗黑模式下的配色
        --accent-color: #73d3eb;
        --accent-color-darker: #539aac;

        --blockquote-background-color: #313f5645;
        --body-background: #111; // 整页背景配色
        --card-background: #191d24; // 卡片配色
        --tr-even-background-color: #1e242ecf !important;
        --code-background-color: #360d0d;
        --code-text-color: #e96900;

        --selection-text-color: #fff;
        --selection-background-color: #34495e;
    }
}

// 调整列表缩进和编号
.article-content {
    // 中文编号
    ol:lang(zh-cn) {
        // 一级序号
        list-style: simp-chinese-informal;

        // 二级序号
        ol {
            list-style-type: none;
            counter-reset: sectioncounter;
    
            li:before {
                content: "(" counter(sectioncounter, simp-chinese-informal) ") ";
                counter-increment: sectioncounter;
                color: var(--accent-color);
                margin-left: -32px;
            }
        }

        // 三级序号
        ol ol {
            list-style: decimal;

            li:before {
                content: "";
                margin-left: 0px;
            }
        }
    }

    // 英文编号
    ol:lang(en), ul:lang(en) {
        padding-inline-start: 32px;
    }

    li::marker {
        color: var(--accent-color);
        font-weight: bold;
    }

    // 脚注编号
    .footnotes ol {
        list-style: decimal;
    }
}

// 调整引用间距
.article-content blockquote {
    :first-child {
        margin-top: 0px;
    }
    :last-child {
        margin-bottom: 0px;
    }
}

// 右侧归档数字斜体
.widget.archives .archives-year a span.count {
    font-style: italic;
}

该样式可能不会及时更新,因此不保证使用该代码后效果与本网站一致。

渲染样例

基本元素

链接:这是一个链接
按键:X
注音:ceshi
脚注:这有一个脚注1
行内代码块:这是一串代码
多行代码块:

1
2
3
这是
多行
代码

引用

这是一个引用块

这是一个引用块的第二段

1
这是一个引用内的代码块
这是一个引用内的表格标题
这是一个引用内的表格内容

这是一个带出处的引用块

Jacob, 主题文档

列表

无序列表:

  • 嵌套列表
    • 二级列表元素
      • 三级列表元素
        • 四级列表元素
  • 列表内代码块
    1
    
    这是一个代码块
    
  • 选择框
  • 选择框(勾选)
  • 列表内表格
    这是一个列表内的表格标题
    这是一个列表内的表格内容

有序列表:

  1. 嵌套列表
    1. 二级列表元素
      1. 三级列表元素
        1. 四级列表元素

表格

这是一个Markdown生成的表格标题
这是一个Markdown生成的表格内容
HTML Tag生成的表格

这是一段行内代码

这是一段表格内引用

1
这是一段多行代码

这是一个段带出处的表格内引用

Jacob, 主题文档

选项卡

注意:目前选项卡页面不支持嵌套。

  • 基本元素
  • 列表
  • 代码块
  • 表格
  • 引用

链接:这是一个链接
按键:X
注音:ceshi
脚注:这有一个脚注1
行内代码块:这是一串代码


  1. 选项卡中的脚注内容。由于Hugo的限制,目前选项卡中的脚注只能生成在选项卡内部 ↩︎

无序列表:

  • 嵌套列表
    • 二级列表元素
      • 三级列表元素
        • 四级列表元素

有序列表

  1. 嵌套列表
    1. 二级列表元素
      1. 三级列表元素
        1. 四级列表元素
1
2
3
这是
多行
代码
这是一个选项卡内的表格标题
这是一个选项卡内的表格内容

这是一个引用块

这是一个引用块的第二段

这是一个带出处的引用块

Jacob, 主题文档

提示框

默认风格
这是一个提示框
默认风格(折叠)
这是一个默认折叠提示框
默认风格(无内容)
例子
这是一个例子提示框
注意
这是一个注意提示框
摘要
这是一个摘要提示框
信息
这是一个信息提示框
技巧
这是一个技巧提示框
成功
这是一个成功提示框
问题
这是一个问题提示框
警告
这是一个警告提示框
失败
这是一个失败提示框
漏洞
这是一个漏洞提示框
自定义
这是一个自定义图标和颜色的提示框
自定义(无内容)——测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

  1. 基本元素中的脚注内容 ↩︎

Licensed under CC BY-NC-SA 4.0
Built with Hugo
主题 StackedJimmy 设计,Jacob 修改