MemE主题优化

前言

折腾了两天,总算是把这个博客给搭建起来了😉😉!

在写这篇文章之前,让我先啰嗦一下,毕竟认真搞了这么久,总有些话想说,想直接看正文的同学就跳过这段直接到第一章节吧!

首先要感谢👏几个博主,第一次看到这个 博客主题 MemE 是从 reuixiy 博客上看到的。第一眼就觉得这个主题特别干净,也就激起了我又一次搭建博客的兴趣(之前我其实就搭建过一个博客,当时是用hexo搭建的,现在博客还在用,不过由于速度确实不太行,就很少在上面写东西了)。说实话,我感觉 reuixiy 博主讲得实在太详细了,所以感觉自己只是在照葫芦画瓢🙃🙃🙃 。

搭建博客的过程很简单,一般都不会有什么问题,所以这里我就写写关于MemE主题的各个细节的配置问题:
一来是自己想要更改博客主题样式的时候知道去哪个地方改?怎么改?🖊️
二来可以提供给需要的朋友一些参考,让更多的人加入这个主题中来!❤️

虽然之前有看过 reuixiy 博主的详细 站点配置文件 ,不过都是英文的,看得实在有点累(我的英文太水了😐)。虽然基本上都是见名知义的,可我觉得还是一份中文的文档📄比较适合我。

在更改各个配置的时候我所参考的大部分内容是来自 Guanqr 博主提交到github中的config.toml文件,里面所有的注释都是中文的,对我来说简直太爽了😁😁😁!!!。然后有一些博客的写作格式也是从该博主的 commit 中找到的,自己也尝试着动手改改看,效果还不错!

所以,这里就先谢谢这两位博主了🎉🎉🎉,当然中途出现了一些问题都是从网上找到方法解决的,所以也要感谢那么多给我提供过帮助的博主们!!!🎉🎉🎉

好了,不多说了,步入正题,首先给大家看看我的博客结构目录

博客目录结构

blog
│
├── archetypes
├── content  
├── data 
├── layouts
├── public
├── resources
├── static	
├── themes
└── config.toml

然后我们按照config.toml文件的大致内容依次梳理(会有部分内容与原文上下位置不一致),其实大部分设置只需要更改参数就可以了,这里我就只把对应的关键字给出来,你们去自己的config.toml中查找关键字然后自己更改参数试试。这里附上我的config.toml文件。

每一分页文章数

1
paginate = 6

代码高亮

1
2
3
4
pygmentsCodefences = true
pygmentsUseClasses = true
pygmentsCodefencesGuessSyntax = true
pygmentsOptions = "linenos=table"

作者信息

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
[author]
    # 名字
    name = "name"
    # 邮箱
    email = "zccon1996@163.com"
    # 座右铭或简介
    motto = "motto"
    # 头像
    avatar = "/icons/apple-touch-icon.png"
    # 网站(默认值:baseURL)
    website = "https://ztygcs.github.io"
    # 推特
    #twitter = ""

菜单栏

菜单开关项

  • enableMenu:是否开启菜单栏
  • displayMenuInHome: 是否在首页显示
  • activeInSection:是否按文章分区高亮当前菜单项

说明:如果activeInSection开启(设置为true),那么当某一文章的分区名是某一菜单项中的 url 时,该文章页面中的该菜单项也会被高亮

1
2
3
enableMenu = true
displayMenuInHome = true
activeInSection = true

菜单配置项

MemE 主题支持以下四种菜单:

1
2
3
4
# 1. main       顶栏下方的菜单栏
# 2. home       首页的底部链接(适用于「诗意人生」和「视频片段」布局)
# 3. socials    社交栏(关于页面的极简页脚)
# 4. links      链接栏(关于页面的极简页脚)

菜单内的配置说明如下:

1
2
3
4
5
6
7
# url           链接地址
# name          文本(留空("")则无)
# weight        位置
# pre           内链(internal)或外链(external)
# post          图标(留空("")则无)
# identifier    图标的 Class 名(菜单栏无效)

 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
[menu]
    ## Menu bar
    [[menu.main]]
        url = "/"
        name = "首页"
        weight = 1
        pre = "internal"
        post = "home"
    [[menu.main]]
        url = "/posts/"
        name = "归档"
        weight = 2
        pre = "internal"
        post = "archive"
    [[menu.main]]
        url = "/categories/"
        name = "分类"
        weight = 3
        pre = "internal"
        post = "th"
    [[menu.main]]
        url = "/tags/"
        name = "标签"
        weight = 4
        pre = "internal"
        post = "tags"
    [[menu.main]]
        url = "/about/"
        name = "关于"
        weight = 5
        pre = "internal"
        post = "user-circle"

上面代码效果: ◎ 菜单栏

顶栏

1
2
3
4
5
# 是否开启
enableHeader = true

# 是否在首页显示
displayHeaderInHome = true

品牌栏(在顶栏内)

品牌栏内容

◎ 品牌栏

  • siteBrandSVG = true :显示SVG图片(请将你的 SVG 放到 SVG.toml 文件内,并配置以下项。单位:px)
  • siteBrandSVGWidth:设置SVG宽度
  • siteBrandSVGHeight:设置SVG高度

(SVG图片文件位置\themes\meme\data\SVG.toml

  • siteBrandSVG = false :使用你的站点标题作为默认值,并以文字的形式显示(下方可配置字号和字色。字体到底部的字体部分配置。单位:em)
  • siteBrandFontSize = 3
  • siteBrandFontColor = "#fff"
1
2
3
4
5
6
7
8
siteBrandSVG = false

siteBrandSVGWidth = 250
siteBrandSVGHeight = 100
siteBrandSVGFill = "#fff"

siteBrandFontSize = 3
siteBrandFontColor = "#fff"

品牌栏背景色

  • siteBrandBackgroundColor用来设置背景色(hsl格式

  • siteBrandBackgroundImage用来设置背景图片

  • 注意:背景色和背景图片只能二选一

1
2
#siteBrandBackgroundColor = "hsl(240, 8%, 12%)"
siteBrandBackgroundImage = "linear-gradient(90deg, #f79533 0, #f37055 15%, #ef4e7b 30%, #a166ab 44%, #5073b8 58%, #1098ad 72%, #07b39b 86%, #6dba82 100%)"

首页布局

MemE 主题有以下四种首页布局:

  1. poetry 诗意人生
  2. footage 视频片段
  3. posts 文章摘要
  4. page 普通页面
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
#这里设置为文章摘要
homeLayout = "posts"

## 「诗意人生」
# 诗句,支持 Markdown
homePoetry = []
# 底部链接的内间距,单位:em
homeLinksPadding = 1

## 「视频片段」
homePoster = ""
homeVideoWebm = ""
homeVideoMp4 = ""
homeLogo = ""
homeLogoLink = ""
homeTitle = ""
homeMotto = ""
homeDescription = ""
homeKeywords = ""
homeLinksDelimiter = ""

分类页面

分类方式

MemE 主题支持以下两种分类方式:

  1. sections 分区
  2. categories 部类

其中: 分区是基于站点的content目录下的文件夹和子文件夹; 部类是基于文章的Front Matter。 分类即树状分类,Hexo 是基于文章的 Front Matter,Hugo 则是基于文件系统的结构。由于设计理念的不同,导致了 Hexo与 Hugo 的这个差异,故在此设计这个选项,以对从 Hexo 过来的用户友好。但是请注意:Hugo 中无法完全实现基于 Front Matter的树状分类,故如需保留树状分类,建议适应Hugo 的设计理念——分区。

categoryBy = "categories"

注意:如果你设置为 sections,请务必将此配置文件中的类别(taxonomies)中的 categories 删除,不然分类页面会失效。

1
2
3
4
# 类别
[taxonomies]
category = "categories"
tag = "tags"

分类设置

  • enableTree:是否开启树状布局
  • displayPosts:分类页面中是否显示文章标题
  • displayPostsCount:分类页面中是否显示每一分类下的文章数

注意:如果你设置 categoryBy 为 sections,则无法关闭树状布局

1
2
3
enableTree = true
displayPosts = false
displayPostsCount = true

文章分区范围

1
2
3
4
5
# 说明:分区的名字即站点的 content 目录下的文件夹的名字。
# mainSections = ["posts"]

# 是否包括全文内容
includeContent = true

说明:如果includeContentfalse,则只会包含文章的摘要。关于摘要,Hugo能按你设置的字数限制自动截取,你也可以在文章中通过 < !--more-- >(没有空格)手动控制,或者在文章的Front Matter中通summary 手动指定。其中,应用的优先级顺序:手动指定 > 手动控制 > 自动截取。还需要注意的是,在MemE主题自定义的 Atom 和 RSS 的模板中,有一个比手动指定更高的优先级————Front Matter 中的 description

文章首页摘要字数限制

查找关键字summaryLength

1
summaryLength = 150

标签页面

  • enableTagCloud:是否启用标签云
  • fontUnit:字号单位
  • largestFontSize:最大字号
  • smallestFontSize:最小字号
1
2
3
4
enableTagCloud = true
fontUnit = "em"
largestFontSize = 2.5
smallestFontSize = 1

归档列表页面

  • listWidth:宽度

说明:listWidth如果留空(""),则用 42 作为默认值,单位:em

  • displayListTitle:是否显示列表标题
  • listDateFormat:日期的格式

注意:日期的格式请遵循格式 https://gohugo.io/functions/format/

  • listDatePosition:日期的位置(left或者right)
  • groupByMonth:是否按月份分隔列表
  • chineseZodiac:是否开启十二生肖
  • i18nYear:是否翻译年份(仅对年份标题有效)
  • i18nMonth:是否翻译月份(仅对月份标题有效)
1
2
3
4
5
6
7
8
9
listWidth = 36
displayListTitle = true
#listDateFormat = "January 2"
listDateFormat = "01 月 02 日"
listDatePosition = "right"
groupByMonth = false
chineseZodiac = true
i18nYear = true
i18nMonth = true

深色模式

模式设置

  • enableDarkMode:是否开启
  • defaultTheme:默认模式

说明:defaultTheme分两种:light(浅色模式)或 dark(深色模式)

  • hideThemeToggle:是否隐藏模式切换开关
  • hideThemeToggleInHome:是否在首页隐藏模式切换开关
1
2
3
4
enableDarkMode = true
defaultTheme = "light"
hideThemeToggle = false
hideThemeToggleInHome = false

说明:如果开启了深色模式,即使你隐藏了开关,你的读者依然可能以深色模式阅读你的博客,如果该读者的系统设置为深色模式的话。类似,如果你开启深色模式并将默认模式修改为它,即使你隐藏开关,你的读者依然可能以浅色模式模式阅读你的博客。

模式颜色

  • primaryColorLight:浅色模式的主色
  • primaryColorDark:深色模式的主色
1
2
primaryColorLight = "220, 90%, 56%"
primaryColorDark = "201, 65%, 62%"

注意:只支持 HSL 颜色值

文章设置

  • duration:超链接的颜色变化持续时间(单位:秒)
  • postWidth:文章的内容宽度
  • original:文章是否为原创(全局设置)
  • displayPostDescription:文章描述是否显示

说明:
1.postWidth文章的内容宽度如果留空(""),则用 42 作为默认值,单位:em
2.original会影响文章的作者信息和版权信息,文章的 Front Matter 中的 original的优先级高于此处

1
2
3
4
duration = 0.5
postWidth = 36
original = true
displayPostDescription = true

文章元信息

  • enablePostMeta是否开启(全局设置)

说明:文章的 Front Matter 中的 meta的优先级高于此处

  • enablePostMetaInHome是否在首页开启

说明:仅对「文章摘要」和「普通页面」首页布局有效

  • postMetaDateFormat日期格式

注意:请遵循格式 https://gohugo.io/functions/format/

  • displayPublishedDate:是否显示发布时间
  • publishedDateIcon:发布时间的图标
  • displayModifiedDate:是否显示修改时间
  • modifiedDateIcon:修改时间的图标
  • displayExpiredDate:是否显示过期时间
  • expiredDateIcon:过期时间的图标
  • displayCategory:是否显示分类
  • categoryIcon:分类的图标
  • categoryDelimiter:分类之间的分隔符
  • displayWordCount:是否显示字数统计
  • wordCountIcon:字数统计的图标
  • displayReadingTime:是否显示阅读时长
  • readingTimeIcon:阅读时长的图标
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
enablePostMeta = true
enablePostMetaInHome = true
postMetaDateFormat = "2006.1.2"
displayPublishedDate = true
publishedDateIcon = "calendar-alt" 
displayModifiedDate = true
modifiedDateIcon = "calendar-check"
displayExpiredDate = true
expiredDateIcon = "calendar-times"
displayCategory = true
categoryIcon = "folder"
categoryDelimiter = "/"
displayWordCount = true
wordCountIcon = "pencil-alt"
displayReadingTime = true
readingTimeIcon = "clock"

文章目录

  • enableTOC:是否开启(全局设置)

说明:文章的 Front Matter 中的 toc的优先级高于此处

  • displayTOCTitle:是否显示目录标题
  • linkHeadingsToTOC:是否链接文章的分节标题到目录
1
2
3
enableTOC = true
displayTOCTitle = true
linkHeadingsToTOC = true

文章分节标题锚点

  • enableHeadingsAnchor:是否开启
  • headingsOpt:分节标题的级别范围

说明:正则格式,默认 1-6,即 1|2|3|4|5|6,即 h1 到 h6。

  • anchorSymbol:锚点符号

说明:锚点图标的优先级高于锚点符号,默认值:§

  • anchorIcon锚点图标

说明:留空("")则回退到锚点符号

  • enableAnchorLink:是否开启锚点链接
  • enableAnchorAutoHide:是否自动隐藏锚点
1
2
3
4
5
6
enableHeadingsAnchor = true
headingsOpt = "1-6"
anchorSymbol = "#"
anchorIcon = "link"
enableAnchorLink = true
enableAnchorAutoHide = true

图片说明文字

1
2
3
4
5
# 是否开启
enableCaption = true

# 说明文字的前缀
captionPrefix = "◎ "

图片外链

说明:仅在生产环境(production)下渲染只支持相对于网站根目录的绝对链接比如:/images/meme.jpg(~/blog/static/images/meme.jpg)

1
2
3
4
5
6
7
8
# 是否开启
enableImageHost = false

# 图片外链地址
imageHostURL = "https://example.com/"

# 是否将 HTML 的头部元数据中的图片链接也替换为外链
headAlso = false

视频外链

说明:仅在生产环境(production)下渲染只支持相对于站点根目录的绝对链接比如:/videos/meme.mp4

1
2
3
4
5
# 是否开启
enableVideoHost = false

# 视频外链地址
videoHostURL = "https://example.com/"

脚注

1
2
3
4
5
# 是否用方括号包裹脚注的引用序号
squareBrackets = true

# 替换脚注的返回链接中的文本为图标
footnoteReturnLinkIcon = "angle-up"

说明:如果不为空(""),则会用图标替换footnoteReturnLinkContents

1
2
# 是否自行插入分隔线
insertHrBySelf = true

说明:如果是,则会将自动生成的分隔线删除。实际上,你自己添加的分隔线会被删除。如果你喜欢在 Markdown 中手动插入--- 以将文章的正文内容与脚注内容分隔开来,那么这项设置将会非常有用。

字体排版

说明:任何一项留空,浏览器都会回退到主体字体 fontFamilyBody,故没必要全部设置。此外,如果你的品牌栏用的 SVG,则可留空品牌栏字体。

品牌栏

1
fontFamilySiteBrand = "'Liu Jian Mao Cao', cursive"

菜单栏

1
fontFamilyMenu = ""

各类标题

文章标题、文章副标题、列表标题、列表的年份和月份标题、相关文章标题、文章上下篇标题

1
2
#fontFamilyTitle = "Comfortaa, sans-serif"
fontFamilyTitle = "'Cinzel Decorative', 'Noto Serif SC', serif"

目录、分节标题

分节标题、目录标题

1
2
#fontFamilyHeadings = "Comfortaa, sans-serif"
fontFamilyHeadings = "'Cinzel Decorative', 'Noto Serif SC', serif"

代码、上标

代码、上标、文章元信息、文章更新徽章、文章的 Git 版本信息、极简页脚

1
2
#fontFamilyCode = "'Source Code Pro', monospace"
fontFamilyCode = "'Source Code Pro', 'Noto Serif SC', monospace"

引用

1
fontFamilyQuote = "'EB Garamond', 'STKaiti', 'KaiTi', 'SimKai', 'Noto Serif SC', serif"

文章目录

1
fontFamilyTOC = ""

说明文字

1
fontFamilyCaption = ""

页脚

1
fontFamilyFooter = "'Ma Shan Zheng', cursive"

主体

1
fontFamilyBody = "'EB Garamond', 'Noto Serif SC', serif"

网络字体链接

1
fontsLink = "https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i|Noto+Serif+SC:400,700|Source+Code+Pro:400,400i,700,700i|Cinzel+Decorative:700|Ma+Shan+Zheng:|Liu+Jian+Mao+Cao:&display=swap&subset=chinese-simplified"

具体设置方式

进入https://fonts.google.com/ 之后,搜索或选择喜欢的字体库 ◎ 选择字体 点击加号,在屏幕右下角的弹框的CUSTOMIZE标签中进一步选择 ◎ 勾选所需风格 点击EMBED标签 ◎ 生成链接 这里有生成的字体链接:

https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,500,700&display=swap&subset=chinese-simplified以及设置字体时填入的参数 'Noto Serif SC', serif

例如,假设你的字体链接为fontsLink = "https://fonts.googleapis.com/css?family=EB+Garamond:400,400i,700,700i|Noto+Serif+SC:400,700|Source+Code+Pro:400,400i,700,700i|Cinzel+Decorative:700&display=swap&subset=chinese-simplified"

现在你想给页脚fontFamilyFooter配置另一种字体,比如ZCOOL XiaoWei,去网站选择之后生成的信息如下: ◎ example 现在你需要在原来的字体链接&display=swap&subset=chinese-simplified的前面加上|ZCOOL+XiaoWei:,然后设置fontFamilyFooter = "'ZCOOL XiaoWei', serif",在本地预览一下,应该成功了!(注意观察上图生成的代码和你添加到配置文件中的区别)

说明:要想读者一定体验到你设置的字体,最好采用网络字体。MemE 主题目前仅支持Google Fonts 的链接,请前往 https://fonts.google.com/ 获取。此项留空,则不会采用网络字体。

字号(单位:px)

1
fontSize = 16

行间距

1
lineHeight = 2

说明:只会应用到文章的段落和目录

段首缩排

1
2
3
4
5
# 是否开启
enableParagraphIndent = true

# 分段样式(全局设置)
paragraphStyle = "margin"

说明:段间距式(margin)或段首缩排(indent)文章的 Front Matter 中 indent的优先级高于此处

两端对齐

1
2
# 是否开启(全局设置)
enableJustify = true

说明:文章的 Front Matter 中的 align的优先级高于此处

首字下沉

1
2
# 是否开启(全局设置)
enableDropCap = true

说明:文章的 Front Matter 中的 dropCap的优先级高于此处

1
2
# 是否在每一分隔线之后首字下沉(全局设置)
enableDropCapAfterHr = false

说明:文章的 Front Matter 中的 dropCapAfterHr的优先级高于此处

1
2
# 是否删除首字下沉前的分隔线(全局设置)
deleteHrBeforeDropCap = false

说明:文章的 Front Matter 中的 deleteHrBeforeDropCap的优先级高于此处

大型小写(英文)

1
2
# 是否开启(全局设置)
enableSmallCaps = false

说明:只会应用到分节标题和目录标题文章的 Front Matter 中的 smallCaps的优先级高于此处

着重号

说明:MemE 主题自创的新 Markdown, 语法为在内容左右两边分别加上两个半角状态下的点..

1
2
# 是否开启
enableEmphasisPoint = true

文章版权

1
2
3
4
#是否开启
enablePostCopyright = true

displayPostCopyright = false

说明:文章的 Front Matter 中的 displayCopyright的优先级高于此处

文章更新徽章

1
2
3
4
5
# 是否开启
enablePostUpdatedBadge = true

# 是否显示(全局设置)
displayUpdatedBadge = true   

说明:文章的 Front Matter 中的 badge的优先级高于此处

1
2
3
4
# 是否添加 `title`
enableBadgeTitle = true
# `title` 的前缀
badgeTitlePrefix = "Updated @ "

相关文章

1
2
3
4
5
# 是否开启
enableRelatedPosts = true

# 是否显示(全局设置)
displayRelatedPosts = true

说明:文章的 Front Matter 中的 related的优先级高于此处

1
2
3
4
# 相关文章数
relatedPostsNumber = 5
# 相关文章标题右边的图标
relatedPostsIcon = "plus-circle"

文章标签

1
2
3
4
# 是否开启
enablePostTags = true
# 标签图标
postTagsIcon = "tag"

文章上下篇

说明:在 MemE 主题中,文章上下篇是从空间位置角度设计的,而不是像大多数其它主题所做的那样——从时间角度设计。因此,如果你点击左边的上篇,跳转的是一篇更新的文章;如果你点击右边的下篇,跳转的是一篇更旧的文章。

1
2
3
4
5
# 是否开启
enablePostNav = true

# 是否仅限于相同的文章分区
postNavInSection = false

页脚

1
2
# 是否开启
enableFooter = true

说明:「诗意人生」和「视频片段」首页布局的首页没有页脚

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 是否显示版权符号(©)
displayCopyrightSymbol = true

# 是否显示站点的创建年份
displaySiteCreatedYear = true

# Leave it empty("") if you don’t wantthe icon
# 年份与作者之间的图标
iconBetweenYearAndAuthor = "heart"
iconColor = "#e93448"

# 是否开启图标的跳动效果
iconAnimation = true

# 是否显示 Hugo 和 MemE 的链接
displayPoweredBy = true

# 是否显示站点的版权信息
displaySiteCopyright = true

# 自定义页脚(支持 Markdown)
customFooter = ""

极简页脚

1
2
3
4
5
# 是否开启
enableMinimalFooter = true

# 是否开启关于页面的极简页脚
enableAboutPageMinimalFooter = true

返回顶部按钮

1
2
3
4
5
6
# 是否开启
enableBackToTop = true
# 是否在首页显示
displayBackToTopInHome = true
# 按钮图标
backToTopIcon = "arrow-up"

多语言

1
2
3
4
5
6
7
8
# 是否开启多语言按钮
enableLangToggle = true

# 是否在首页隐藏多语言按钮
hideLangToggleInHome = false

# 是否自动隐藏多语言按钮
autoHideLangToggle = false

说明:即仅当该文章有相应的翻译版本时才显示按钮

back-to-top样式

在文件back-to-top.scss中:

文件原始位置:\themes\meme\assets\scss\_common\back-to-top.scss

文件位置更新为:\themes\meme\assets\scss\components\back-to-top.scss

1
2
3
4
5
6
7
8
.back-to-top {
    font-size: 120%;
    color: var(--color-contrast-medium);
    position: fixed;
    bottom: 1.2em;
    right: 1.2em;
    z-index: 1;
}

归档、分类及标签页样式

归档样式代码:

在文件list.scss中:

文件原始位置:\themes\meme\assets\scss\_common\list.scss

文件位置更新为:\themes\meme\assets\scss\layout\list.scss

 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
//归档页总标题(posts)
.list-title {
    text-align: center;
}
//归档页文章列表
.list {
    ul {
        list-style: none;
        padding: 0;
    }
}
//文章列表
.list-item {
    line-height: 2;
    position: relative;
    transition: border $duration;
    border-bottom: 1px dashed var(--color-contrast-low);
    margin-top: 1em;
    padding-bottom: 0.5em;
    display: flex;
    align-items: baseline;
    &:hover {
        border-bottom-color: var(--color-primary);
        ::before {
            background: var(--color-primary);
        }
    }
    ::before {
        content: " ";
        position: absolute;
        left: 0.618em;
        top: 0.618em;
        width: $fontSize / 3;
        height: $fontSize / 3;
        background: var(--color-contrast-low);
        border-radius: 50%;
        border: 1px solid var(--color-bg);
        transition: background $duration;
        font-size: $fontSize;
    }
}
//列表中文章标题
.list-item-title {
    margin: 0 0.618em 0 2em;
    font-size: 1.1em;
    line-height: 1.2;
}
//列表中时间
.list-item-time {
    margin: 0 0.618em 0 2em;
    color: var(--color-contrast-medium);
    line-height: 1.2;
}
//年份
.list-year {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

分类样式代码:

文件位置:\themes\meme\assets\scss\pages\_tree-categories.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.category-item {
    color: #02a1ff;
    font-size: 1.2em;
    &:hover {
        color: blueviolet;
    }
}
.category-count {
    color: var(--color-contrast-medium);
}

标签样式代码:

文件位置:\themes\meme\assets\scss\pages\_tag-cloud.scss

1
2
3
4
5
6
7
.tag-cloud {
    text-align: center;
}
.tag-cloud-item {
    margin: ($fontSize * 0.5);
    display: inline-block;
}

多媒体

audio标签

1
2
3
4
5
<!--通过<audio>标签插入-->
<audio controls height="100" width="100" style="clear:both;display:block;margin:auto">
  <source src="https://zccon.oss-cn-beijing.aliyuncs.com/Hugo/audios/Lame.mp3" type="audio/mpeg">
  <embed height="50" width="100" src="https://zccon.oss-cn-beijing.aliyuncs.com/Hugo/audios/Lame.mp3">
</audio>

DEMO:

video标签

1
2
3
<video poster="https://zccon.oss-cn-beijing.aliyuncs.com/images/%E5%A4%A9%E6%89%8D%E5%B0%91%E5%A5%B3.png" controls>
<source src="https://zccon.oss-cn-beijing.aliyuncs.com/Hugo/videos/GeniusGirl.mp4">
</video>

DEMO:

网易云外链方式添加音乐

在网页版网易云音乐中搜索需要的歌(不支持 无版权会员 歌曲)

◎ 搜索需要的歌

点击生成外链播放器

◎ 生成链接

将生成的代码直接复制到文章中即可:(widthheight自己调整)


DEMO:
1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="//music.163.com/outchain/player?type=2&id=167732&auto=0&height=66"></iframe>

效果:

自定义

诗歌引用格式

内容来自这里

新建 quote-center.html 文件,其内容如下:

文件位置:blog\layouts\shortcodes文件夹下

1
2
3
4
5
6
7
8
<blockquote class="quote-center">
    {{- $content := .Inner | markdownify -}}
    {{- if not (strings.HasPrefix $content "<p>") }}
        {{ printf `<p>%s</p>` $content | safeHTML }}
    {{- else }}
        {{- $content }}
    {{- end -}}
</blockquote> 

接着在文件 custom.scss 中添加样式:

文件位置:\themes\meme\assets\scss\custom\_custom.scss

 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
blockquote.quote-center {
    position: relative;
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-contrast-lower);
    border-bottom: 1px solid var(--color-contrast-lower);
    p{
        text-align: center !important;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
    }
    &::before {
        position: absolute;
        left: 0;
        content: '“';
        color: var(--color-contrast-low);
        font-size: 3em;
        font-weight: bold;
        margin-top: -0.42em;
    }
    &::after {
        position: absolute;
        right: 0;
        content: '”';
        color: var(--color-contrast-low);
        font-size: 3em;
        font-weight: bold;
        margin-top: -0.7em;
    }
}

DEMO:

语法:

{{< quote-center >}}
伟大的小丑帕格里亚齐来了<br/>去看他的表演吧<br/>他能让你振作起来
{{< /quote-center >}}

效果:

伟大的小丑帕格里亚齐来了
去看他的表演吧
他能让你振作起来

卡片风格

在文件custom.scss中加入以下样式:

文件原始位置:\themes\meme\assets\scss\_custom\custom.scss

文件更新位置:\themes\meme\assets\scss\custom\_custom.scss

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
.mytag{
    position: relative;
    left: 0; right: 0;
    width: 100%;
    height: 100%;
    line-height: 2;
    margin: auto;
    border-radius: 5px;
    background: rgba(255, 255, 255, .2);
    box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .5);
    overflow: hidden;
}
.mytag::before{
    content: '';
    position: relative;
    left: 0; right: 0;
    filter: blur(20px);
    z-index: -1;
    margin: -30px;
}

DEMO:

语法:

1
2
3
4
5
6
<div class="mytag">
<p style="margin:25px">
   <b>"少年贪玩,青年迷恋爱情,壮年汲汲于成名成家,暮年自安于自欺欺人。人寿几何,顽铁能炼成的精金,能有多少?但不同程度的锻炼,必有不同程度的成绩;不同程度的纵欲放肆,必积下不同程度的顽劣。"<br />上苍不会让所有幸福集中到某个人身上,得到爱情未必拥有金钱;拥有金钱未必得到快乐;得到快乐未必拥有健康;拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神,这种快乐把忍受变为享受,是精神对于物质的胜利,这便是人生哲学。"</b>
</p>
<div style="text-align:right;margin:15px" ><footer>——<cite>杨绛</cite></footer></div>	
</div>

效果:

"少年贪玩,青年迷恋爱情,壮年汲汲于成名成家,暮年自安于自欺欺人。人寿几何,顽铁能炼成的精金,能有多少?但不同程度的锻炼,必有不同程度的成绩;不同程度的纵欲放肆,必积下不同程度的顽劣。"
上苍不会让所有幸福集中到某个人身上,得到爱情未必拥有金钱;拥有金钱未必得到快乐;得到快乐未必拥有健康;拥有健康未必一切都会如愿以偿。保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。一切快乐的享受都属于精神,这种快乐把忍受变为享受,是精神对于物质的胜利,这便是人生哲学。"

——杨绛

文字渐变色

在文件custom.scss中添加渐变样式:

文件位置:\themes\meme\assets\scss\\_custom\custom.scss

文件位置更新为:\themes\meme\assets\scss\custom\_custom.scss

1
2
3
4
5
.colorfulfont {
background: linear-gradient(to right, red,#45ed63);
-webkit-background-clip: text;
color: transparent;
}

DEMO:

语法:

1
2
3
<font class = "colorfulfont">
伟大的小丑帕格里亚齐来了<br/>去看他的表演吧<br/>他能让你振作起来
</font>

效果:

伟大的小丑帕格里亚齐来了
去看他的表演吧
他能让你振作起来

添加博客已运行时间

在文件custom.js中添加自定义的js代码

文件位置:\themes\meme\assets\js\custom.js

 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
//计算博客运行时间(2020.06.03添加)
function siteTime(){
    window.setTimeout("siteTime()", 1000);
    var seconds = 1000
    var minutes = seconds * 60
    var hours = minutes * 60
    var days = hours * 24
    var years = days * 365
    var today = new Date()
    var todayYear = today.getFullYear()
    var todayMonth = today.getMonth() + 1
    var todayDate = today.getDate()
    var todayHour = today.getHours()
    var todayMinute = today.getMinutes()
    var todaySecond = today.getSeconds()
    var t1 = Date.UTC(2019, 11, 26, 19, 06, 00)
    var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond)
    var diff = t2-t1
    var diffYears = Math.floor(diff/years)
    var diffDays = Math.floor((diff/days)-diffYears*365)
    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours)
    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes)
    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds)

    if(diffYears==0){
        document.getElementById("sitetime").innerHTML=" "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"
    }else{
        document.getElementById("sitetime").innerHTML=" "+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒"
    }
}
    siteTime()

其中var t1 = Date.UTC(2019, 11, 26, 19, 06, 00)设置为需要计算的起始日期,如时间是:2020年01月01号00点00分00秒则设置为:

1
var t1 = Date.UTC(2020,01,01,00,00,00)

DEMO:
1
运行时间<span id="sitetime" style="color:#fb7312"></span>

运行时间

添加hugo-notice

内容来自这里

  1. 新建文件notice.html,并输入以下内容。

文件位置:blog\layouts\shortcodes文件夹下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{- $noticeType := .Get 0 -}}

{{- $raw := (markdownify .Inner | chomp) -}}

{{- $block := findRE "(?is)^<(?:address|article|aside|blockquote|canvas|dd|div|dl|dt|fieldset|figcaption|figure|footer|form|h(?:1|2|3|4|5|6)|header|hgroup|hr|li|main|nav|noscript|ol|output|p|pre|section|table|tfoot|ul|video)\\b" $raw 1 -}}

{{ $icon := (replace (index $.Site.Data.SVG $noticeType) "icon" "icon notice-icon") }}
<div class="notice {{ $noticeType }}" {{ if len .Params | eq 2 }} id="{{ .Get 1 }}" {{ end }}>
    <div class="notice-title">{{ $icon | safeHTML }}</div>
    {{- if or $block (not $raw) }}{{ $raw }}{{ else }}<p>{{ $raw }}</p >{{ end -}}
</div>
  1. 在文件custom.scss中添加样式:

文件位置:\themes\meme\assets\scss\custom\_custom.scss

 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
.notice {
    position:relative;
    padding: 1em 1em 1em 2.5em;
    margin-bottom: 1em;
    border-radius: 4px;
    p:last-child {
        margin-bottom: 0;
    }
    .notice-title {
        position: absolute;
        left: 0.8em;
        .notice-icon {
            width: 1.2em;
            height: 1.2em;
        }
    }
    &.notice-warning {
        background: hsla(0, 65%, 65%, 0.15);
        border-left: 5px solid hsl(0, 65%, 65%);
        .notice-title {
            color: hsl(0, 65%, 65%);
        }
    }
    &.notice-info {
        background: hsla(30, 80%, 70%, 0.15);
        border-left: 5px solid hsl(30, 80%, 70%);
        .notice-title {
            color: hsl(30, 80%, 70%);
        }
    }
    &.notice-note {
        background: hsla(200, 65%, 65%, 0.15);
        border-left: 5px solid hsl(200, 65%, 65%);
        .notice-title {
            color: hsl(200, 65%, 65%);
        }
    }
    &.notice-tip {
        background: hsla(140, 65%, 65%, 0.15);
        border-left: 5px solid hsl(140, 65%, 65%);
        .notice-title {
            color: hsl(140, 65%, 65%);
        }
    }
}

[data-theme="dark"] .notice {
    &.notice-warning {
        background: hsla(0, 25%, 35%, 0.15);
        border-left: 5px solid hsl(0, 25%, 35%);
        .notice-title {
            color: hsl(0, 25%, 35%);
        }
    }
    &.notice-info {
        background: hsla(30, 25%, 35%, 0.15);
        border-left: 5px solid hsl(30, 25%, 35%);
        .notice-title {
            color: hsl(30, 25%, 35%);
        }
    }
    &.notice-note {
        background: hsla(200, 25%, 35%, 0.15);
        border-left: 5px solid hsl(200, 25%, 35%);
        .notice-title {
            color: hsl(200, 25%, 35%);
        }
    }
    &.notice-tip {
        background: hsla(140, 25%, 35%, 0.15);
        border-left: 5px solid hsl(140, 25%, 35%);
        .notice-title {
            color: hsl(140, 25%, 35%);
        }
    }
}

  1. SVG.toml文件中插入图标

文件位置:`\themes\meme\data\SVG.toml

1
2
3
4
5
6
# Notice Icon
notice-warning = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 576 512"><path d="M570 440c18 32-5 72-42 72H48c-37 0-60-40-42-72L246 24c19-32 65-32 84 0l240 416zm-282-86a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-info = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M256 8a248 248 0 100 496 248 248 0 000-496zm0 110a42 42 0 110 84 42 42 0 010-84zm56 254c0 7-5 12-12 12h-88c-7 0-12-5-12-12v-24c0-7 5-12 12-12h12v-64h-12c-7 0-12-5-12-12v-24c0-7 5-12 12-12h64c7 0 12 5 12 12v100h12c7 0 12 5 12 12v24z"/></svg>'
notice-note = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zm-248 50a46 46 0 100 92 46 46 0 000-92zm-44-165l8 136c0 6 5 11 12 11h48c7 0 12-5 12-11l8-136c0-7-5-13-12-13h-64c-7 0-12 6-12 13z"/></svg>'
notice-tip = '<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 512 512"><path d="M504 256a248 248 0 11-496 0 248 248 0 01496 0zM227 387l184-184c7-6 7-16 0-22l-22-23c-7-6-17-6-23 0L216 308l-70-70c-6-6-16-6-23 0l-22 23c-7 6-7 16 0 22l104 104c6 7 16 7 22 0z"/></svg>'


DEMO:
{{< notice notice-warning >}}
This is warning
{{< /notice >}}

This is warning

{{< notice notice-note >}}
This is note
{{< /notice >}}

This is note

{{< notice notice-info >}}
This is info
{{< /notice >}}

This is info

{{< notice notice-tip >}}
This is tip
{{< /notice >}}

This is tip

updatedupdated2020-06-082020-06-08