一个基于Hexo
的主题
模仿加瞎改Ghost
里的一个主题nurui
-
修改顶部导航栏
-
header添加栏波浪,来源 https://github.com/dusign/hexo-theme-snail
-
再次修改栏文章内容页面,效果比以前好些
-
优化了若干代码,结构更清晰,修复了几处CSS显示问题
-
修改文章内容显示宽度,和一些标签样式
-
更新了 waterfall (画廊)标签 可设置大小
关于 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
除开以有的字段,目前有效的相关属性
key | layout | desc |
---|---|---|
subtitle | post,page,draft | 小标题,文章或页面的小标题,文章缺省值为文章的发布时间 |
categories | post,draft | 分类,文章的分类 |
cover | post,page,draft | 封面,文章或页面的封面,banner图 |
type | page | 页面类型,取值详见可自定义的相关页面 |
建议复制以下代码替换scaffolds/
下默认的模版
---
title: {{ title }}
subtitle:
date: {{ date }}
categories:
tags:
cover:
---
---
title: {{ title }}
subtitle:
date: {{ date }}
cover:
type:
---
在目录的source/_data
下新建一个links.yml
一行一条数据,格式如下:
- { "name" : "", "describe" : "", "link" : "", "cover" : "" }
查找并修改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,文章卡片显示为长文章
如果启用了友链,则会判断友链名称
和友链描述
两个字段长度
进入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
进入flex-block
配置文件_config.yml
找到dplayer
# dplayer 视频播放
# docs: https://dplayer.js.org/
dplayer:
enable: true
theme: "#b7daff"
autoplay: false
loop: false
mutex: true
进入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
进入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
进入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
进入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: false
type: a
更多参数可参考https://aplayer.js.org/#/home?id=options中audio
的属性
<!-- url 必填 -->
{% 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
插件才能正常使用本内置标签
<!-- url 必填 cover(封面) 可选 subtitle(字幕) 可选 -->
{% 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
插件才能正常使用本内置标签
如需要修改大小 添加参数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 %}
...
{% endcenter %}
<!-- link 地址(必填) title? 标题 cover? 封面 -->
{% bookmark title="我在这里" link="https://miiiku.xyz" cover="https://qiniu.miiiku.xyz/attach/2019/03/15529735091219953_175322076_H800.jpg" %}
如需要修改大小 添加参数size="max"
<!-- src 地址(必填) title? 描述 size? 大小 -->
{% image src="https://qiniu.miiiku.xyz/attach/2019/03/15529735091219953_175322076_H800.jpg" title="hello world" size="max" %}
替换掉主题文件下的source/favicon.ico
logo:
高度不超过50,宽度不超过200为最佳
banner:
宽图为最佳
google_analytics:
gauges_analytics:
baidu_analytics:
tencent_analytics:
接入常用网站统计第三方
添加常用到一些社交图标
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: }