flex-block

一个基于

Hexo

模仿加瞎改

Ghost

nurui

预览

更新

2020.07

• 添加主题模式(暂不支持手动切换，根据系统自动切换)

• 删除 分类，标签 页面

• UI部分更新

2020.04

• 添加社交图标显示

• 局部小更新css样式

• 添加

  返回到顶部

  按钮

• 添加水平居中标签 center

2020.01

• 修改顶部导航栏

• header添加栏波浪，来源 https://github.com/dusign/hexo-theme-snail

• 再次修改栏文章内容页面，效果比以前好些

2019.12

• 优化了若干代码，结构更清晰，修复了几处CSS显示问题

• 修改文章内容显示宽度，和一些标签样式

• 更新了 waterfall (画廊)标签 可设置大小

• 新增 iamge (图片), bookmark (书签), aplayer 音频播放 标签

变动

关于 waterfall 标签，在更新主题后，会导致以前的视频不能正常播放，需要进行如下修改:

{% dplayer https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4 https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4?vframe/jpg/offset/10 %} 


{% dplayer url="https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4" cover="https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4?vframe/jpg/offset/10" %} 

可自定义的相关页面

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

| 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

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

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

SEO优化相关

查找并修改

Hexo

_config.yml

# Site


description: 

keywords: 

author: 

copyright:

配置项:

代码高亮

hexo默认提供了highlightjs代码高亮，如何开启？

查找并修改

Hexo

_config.yml

highlight:
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:
  hljs: true
  theme: monokai

其中

enable

hljs

theme

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

长标题

进入

flex-block

_config.yml

large_legnth

# large cover
large_legnth: 20

设置Card封面的大小，如

large_legnth: 20

aplayer

进入

flex-block

_config.yml

aplayer

aplayer

# aplayer 视频播放
# docs: https://aplayer.js.org/#/
aplayer:
  enable: true
  theme: "#b7daff"
  autoplay: false
  loop: false
  mutex: true
  lrcType: 3

详情查看https://aplayer.js.org/

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/

zoom 图片预览

进入

flex-block

_config.yml

zoom

# zoom 图片预览
# docs: https://github.com/miiiku/zoom
# Specific configuration information go to `layout/plug-in/zoom.ejs`
zoom: true

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

waterfall 瀑布流

进入

flex-block

_config.yml

waterfall

# 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/miiiku/waterfall

Valine评论

进入

flex-block

_config.yml

valine

# 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

disqus评论

进入

flex-block

_config.yml

disqus

# disqus 评论
# docs: https://disqus.com/
# website 网站到昵称
# error 加载失败的提示语
disqus:
  enable: true
  website: # your website
  error: 如果你看不到评论，那么就真的看不到评论 w(゜Д゜)w

一言

进入

flex-block

_config.yml

hitokoto

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

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

内建标签

插入音频 aplayer

更多参数可参考https://aplayer.js.org/#/home?id=options中

audio

{% aplayer name="アイロニ" artist="鹿乃" url="https://qiniu.miiiku.xyz/public/music/鹿乃 - アイロニ.mp3" lrc="https://qiniu.miiiku.xyz/public/music/鹿乃 - アイロニ.lrc" cover="https://qiniu.miiiku.xyz/public/music/鹿乃 - アイロニ.jpg" %}

注意: 需要开启

aplayer

插入视频 dplayer

{% dplayer url="https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4" cover="https://qiniu.miiiku.xyz/video/%E7%BE%8E.mp4?vframe/jpg/offset/10" %} 

注意: 需要开启

dplayer

插入瀑布流 waterfall

如需要修改大小 添加参数

size="max"

{% waterfall size="max" %}
![imgname](imgsrc)
...
{% endwaterfall %}

更多参数可参考https://github.com/miiiku/waterfall#options 原参数的

驼峰命名

横线连接

🌰: 如设置布局为

水平布局

item-image

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

注意: 需要开启

waterfall

水平居中 center

使center标签内的内容水平居中

{% center %}
...
{% endcenter %}

插入书签 bookmark

{% bookmark title="我在这里" link="https://miiiku.xyz" cover="https://qiniu.miiiku.xyz/attach/2019/03/15529735091219953_175322076_H800.jpg" %}

插入图片 image

如需要修改大小 添加参数

size="max"

{% image src="https://qiniu.miiiku.xyz/attach/2019/03/15529735091219953_175322076_H800.jpg" title="hello world" size="max" %}

其他

favicon

替换掉主题文件下的

source/favicon.ico

logo

logo:

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

banner

banner:

宽图为最佳

统计

google_analytics: 

gauges_analytics: 
baidu_analytics: 
tencent_analytics: 

接入常用网站统计第三方

social icon 社交图标

添加常用到一些社交图标

header_enable

footer_enable

如需要修改图标显示顺序，只需要移动

icons

social_icon:
  header_enable: false
  footer_enable: false
  icons:
    - { type: email,      value: }
    - { type: github,     value: }
    - { type: google+,    value: }
    - { type: ins,        value: }
    - { type: twitter,    value: }
    - { type: youtube,    value: }
    - { type: weibo,      value: }
    - { type: cloudmusic, value: }
    - { type: zhihu,      value: }