Need help with flex-block?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

miiiku
131 Stars 22 Forks MIT License 89 Commits 4 Opened issues

Description

一个基于Hexo的主题

Services available

!
?

Need anything else?

Contributors list

No Data

flex-block

一个基于

Hexo
的主题

模仿加瞎改

Ghost
里的一个主题
nurui

预览

cover1

cover2

更新

2020.07

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

  • 删除 分类标签 页面

  • UI部分更新

2020.04

  • 添加社交图标显示

  • 局部小更新css样式

  • 添加

    返回到顶部
    按钮
  • 添加水平居中标签 center

2020.01

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
下新建一个links.yml

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

- { "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
设置为hljs为class,
theme
为highlight代码高亮主题,不设置默认为monokai

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

长标题

进入

flex-block
配置文件
_config.yml
找到
large_legnth
# large cover
large_legnth: 20

设置Card封面的大小,如

large_legnth: 20
表示如果文章标题长度大于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: }

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.