flex-block

一个基于Hexo的主题

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

待考虑任务计划

• 资源文件CDN配置，如插件

• 归档页是否需要从新设计样式

可自定义的相关页面

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

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

如何添加:

🌰 添加友链页面

hexo new page links

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

type: links

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

links: /links

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

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

---
title: {{ title }}
subtitle:
date: {{ date }}
categories:
tags:
cover:
---

page.md

---
title: {{ title }}
subtitle:
date: {{ date }}
cover:
type:
---

自定义数据

友链数据

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

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

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

SEO优化相关

查找并修改Hexo下的_config.yml

# 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

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

# 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

# dplayer 视频播放
# docs: http://dplayer.js.org/
dplayer:
  enable: true
  theme: "#b7daff"
  autoplay: false
  loop: false
  mutex: true

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

macy 瀑布流

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

# macy 瀑布流
# docs: https://github.com/bigbite/macy.js
# Specific configuration information go to `layout/plug-in/macy.ejs`
macy: true

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

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

zoom 图片预览

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

# 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

# valine 评论
# docs: https://valine.js.org
# You can get your appid and appkey from 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

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

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

内建标签

插入视频 dplayer

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

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

插入瀑布流 waterfall

{% waterfall %}
![imgname](imgsrc)
![imgname](imgsrc)
![imgname](imgsrc)
{% endwaterfall %}

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

其他

LOGO

logo:

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

banner

banner:

宽图为最佳

统计

google_analytics: 

gauges_analytics: 

baidu_analytics: 

tencent_analytics: 

接入常用网站统计第三方

备案

beian: 

国内备案号

permalink

permalink: false

关于永久链接的一个配置

开启以后，在hexo的配置文件.config.yml下permalink里，其中 :title 和 :sulg 为文章的创建时间，格式为YYYY-MM-DD-HH-mm-ss

emmmmmmmm。。。。

可能读起来有点绕口又有点乱，哪到底是什么意思呢？

举个🌰:

permalink: :year/:month/:slug/
# 生成以后的文章地址为 2019/03/2019-03-15-18-53-03/

permalink: :title
# 生成以后的文章地址为 2019-03-15-18-53-03/

这个是实验性功能，仅仅为了自己使用方便 = =