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 = ""

顶栏

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 主题有以下四种首页布局：

poetry 诗意人生
footage 视频片段
posts 文章摘要
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 主题支持以下两种分类方式：

sections 分区
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

说明：如果includeContent为false，则只会包含文章的摘要。关于摘要，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

文章设置

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:

网易云外链方式添加音乐

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

◎ 搜索需要的歌

点击生成外链播放器

◎ 生成链接

将生成的代码直接复制到文章中即可：（width和height自己调整）

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

内容来自这里

新建文件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>

在文件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%);
        }
    }
}

在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

MemE主题优化

相关文章：