flex-block配置说明

Sukoshi 发布于

flex-block

一个基于Hexo的主题

模仿加瞎改Ghost里的一个主题nurui

可自定义的相关页面

目前可以扩展的页面菜单有:

type value name
categories /categories 分类
tags /tags 标签
links /links 友链
messages /messages 留言板

如何添加:

🌰 添加友链页面

1
hexo new page links

找到新建的页面并修改Front-matter,添加如下内容

1
type: links

修改_config.yml配置菜单,找到menu选项添加如下内容

1
links: /links

添加其他自定义页面,如关于页面

1
hexo new page about

Front-matter相关

除开以有的字段,目前有效的相关属性

key layout desc
subtitle post,page,draft 小标题,文章或页面的小标题,文章缺省值为文章的发布时间
categories post,draft 分类,文章的分类
cover post,page,draft 封面,文章或页面的封面,banner图
type page 页面类型,取值详见可自定义的相关页面

建议复制以下代码替换scaffolds/下默认的模版

post.md,draft.md

1
2
3
4
5
6
7
8
---
title: {{ title }}
subtitle:
date: {{ date }}
categories:
tags:
cover:
---

page.md

1
2
3
4
5
6
7
---
title: {{ title }}
subtitle:
date: {{ date }}
cover:
type:
---

自定义数据

友链数据

在目录的source/_data下新建一个links.yml

一行一条数据,格式如下:

1
- { "name" : "", "describe" : "", "link" : "", "cover" : "" }

SEO优化相关

查找并修改Hexo下的_config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site

# <meta name="description" content=[config.description]>
description:

# <meta name="keywords" content=[config.keywords]>
keywords:

# <meta name="author" content=[config.author]>
author:

# <meta name="copyright" content=[config.copyright]>
copyright:

配置项:

代码高亮

hexo默认提供了highlightjs代码高亮,如何开启?

查找并修改Hexo下的_config.yml

1
2
3
4
5
6
7
highlight:
enable: true
line_number: true
auto_detect: true
tab_replace:
hljs: true
theme: monokai

其中enable为开启代码高亮,hljs设置为hljs为class,theme为highlight代码高亮主题,不设置默认为default

具体的主题可以在https://highlightjs.org/查看

长标题

进入flex-block配置文件_config.yml找到large_legnth

1
2
3
4
5
6
# large cover
# long: [article, link]
# short: [category, tag]
large_legnth:
long: 20
short: 5

long: 作用于文章友链卡片

short: 作用于分类标签卡片

设置Card封面的大小,如 long: 20 表示如果文章标题长度大于20,文章卡片显示为长文章

如果启用了友链,则会判断友链名称友链描述两个字段长度

dplayer

进入flex-block配置文件_config.yml找到dplayer

1
2
3
4
5
6
7
8
# dplayer 视频播放
# docs: http://dplayer.js.org/
dplayer:
enable: true
theme: "#b7daff"
autoplay: false
loop: false
mutex: true

详情查看http://dplayer.js.org/

waterfall 瀑布流

进入flex-block配置文件_config.yml找到waterfall

1
2
3
4
# waterfall 瀑布流
# docs: https://github.com/miiiku/waterfall
# Specific configuration information go to `layout/plug-in/waterfall.ejs`
waterfall: true

如果要进行详细的配置,请找到并编辑layout/plug-in/waterfall.ejs

详情查看https://github.com/bigbite/waterfall.js

zoom 图片预览

进入flex-block配置文件_config.yml找到zoom

1
2
3
4
5
6
7
8
9
# zoom 图片预览
# docs: https://github.com/miiiku/zoom
zoom:
enable: true
margin: 15
padding: 15
radius: 5
specify:
filter: "gallery" # filter Front-matter photos

详情查看https://github.com/miiiku/zoom

Valine评论

进入flex-block配置文件_config.yml找到comment

1
2
3
4
5
6
7
8
9
10
11
12
13
# valine 评论
# docs: https://valine.js.org
# You can get your appid and appkey from https://leancloud.cn
# 这里appId和appKey一定一定要改成自己的,没有的话去https://leancloud.cn这个网站注册创建一个
valine:
enable: true
appId: # your appid
appKey: # your appkey
avatar: mm
placeholder: 随便说点什么叭~
notify: false
visitor: false
pageSize: 10

如果想给某一页面/文章取消评论,在md文件的front-matter中增加comments: false

详情查看https://valine.js.org/configuration.html

一言

进入flex-block配置文件_config.yml找到hitokoto

1
2
3
4
5
6
# 一言
# docs: https://hitokoto.cn/api
# type: [a, b, c, d, e, f, g]
hitokoto:
enable: false
type: a

详情查看https://hitokoto.cn/api

内建标签

插入视频 dplayer

1
2
<!-- url 必填 cover 可选 -->
{% dplayer url [cover] %}

注意: 需要开启dplayer插件才能正常使用本内置标签

插入瀑布流 waterfall

1
2
3
4
5
{% waterfall [options] %}
![imgname](imgsrc)
![imgname](imgsrc)
![imgname](imgsrc)
{% endwaterfall %}

具体可选参数查看https://github.com/miiiku/waterfall

🌰: 如设置布局为水平布局,每个元素的类名为item-image,原参数的驼峰命名改为横线连接

1
2
3
4
{% waterfall direction=h item-class=item-image %}
![imgname](imgsrc)
...
{% endwaterfall %}

注意: 需要开启waterfall插件才能正常使用本内置标签

其他

favicon

替换掉主题文件下的source/favicon.ico

1
logo:

高度不超过50,宽度不超过200为最佳

1
banner:

宽图为最佳

统计

1
2
3
4
5
6
7
google_analytics: 

gauges_analytics:

baidu_analytics:

tencent_analytics:

接入常用网站统计第三方