这个主题是gulp打包的结果, 如果要看源代码, 可以看我的另一个项目cube-generator.
git clone https://github.com/ZEROKISEKI/hexo-theme-cube.git themes/cube --depth 1
主题示例地址: http://sora1.coding.me/
搜索框的设计样式参考了ppoffice的设计样式,只要进行输入即可进行对应的搜索, 此功能需要在您的Hexo站点上进行hexo-generator-json-content的安装和设置
npm install hexo-generator-json-content --save
然后在您的Hexo站点的_config.yml(非主题的_config.yml)上进行对应的设置:
jsonContent:
pages:
title: true
text: true
path: true
preview: true
posts:
title: true
text: true
path: true
preview: true
您可以在hexo new或者hexo new page生成md文件后往front-matter(不知道是什么可以上Hexo官网看下)添加对应的preview地址:
preview: http://ouo1ro65u.bkt.clouddn.com/图片预览.png
效果图如下:
代码的高亮采用了highlight.js, 如下图为代码风格设置
为vs2015的风格:
您可以进行代码风格的配置，不过要在cube-generator重新进行主题的生成(该项目有对应的文档说明)
音乐模块采用了DIYgod的开源项目APlayer, 您可以将您喜欢的音乐列表配置在您的博客上，演示效果如下:
侧边栏可以选择开启歌词或者关闭歌词, 相关的音乐配置在主题的_config.yml上面, 具体说明可以参考下面的配置说明
该主题采用了lightgallery进行图片展示，效果如下(展示在做这个主题之前, 我都不知道有lightgallery这个东西2333):
以下所指的_config.yml均为主题的_config.yml!
背景模块在_config.yml的主要参数如下:
header:
background: http://cube-1252774894.cosgz.myqcloud.com/background.png
title: senrenbankaの部落格
background: http://cube-1252774894.cosgz.myqcloud.com/background.png
position: 400
blur: 5
header.background和background分别指移动端和PC端的背景图, 你可以让两个值都为同一个url, 或者分开两个url(当然路径也可以, 见_config.yml的说明)
header.title为博客标题(中间动态加载的文字, 参照了DIYgod博客的效果, 自己做的比较搓)
position为图片的定位, 如果position为0, 则表示图片全部显示
blur为顶部导航栏的模糊度, 您可以修改该值来达到一个比较满意的模糊度
开启搜索功能除了在上面提到的要在Hexo站点配置hexo-generator-json-content之外,还要在_config.yml进行配置:
search: true
在本项目的_config.yml我们可以看到
music:
- title: Dear friends
author: TRIPLANE
source: http://cube-1252774894.cosgz.myqcloud.com/music/source/TRIPLANE - Dear friends.mp3
lrc: http://cube-1252774894.cosgz.myqcloud.com/music/lrc/Dear friends - TRIPLANE.lrc
image: http://cube-1252774894.cosgz.myqcloud.com/music/image/TRIPLANE - Dear friends.jpg
- title: Butter-Fly
author: 和田光司
source: http://cube-1252774894.cosgz.myqcloud.com/music/source/和田光司 - Butter-Fly (ピアノヴァージョン).mp3
lrc: http://cube-1252774894.cosgz.myqcloud.com/music/lrc/Butter-Fly (ピアノヴァージョン) - 和田光司.lrc
image: http://cube-1252774894.cosgz.myqcloud.com/music/image/和田光司 - Butter-Fly (ピアノヴァージョン).jpg
- title: 宵闇花火
author: 葉月ゆら
source: http://cube-1252774894.cosgz.myqcloud.com/music/source/葉月ゆら - 宵闇花火.mp3
lrc: http://cube-1252774894.cosgz.myqcloud.com/music/lrc/宵闇花火 - 葉月ゆら.lrc
image: http://cube-1252774894.cosgz.myqcloud.com/music/image/葉月ゆら - 宵闇花火.jpg
source, lrc, image 可以填路径或者url, 下面是填路径时对应的地址:
source -> source/music, 示例: source: music1.mp3 意味着你的音乐的路径是 source/music/music1.mp3
lrc -> source/lrc, 示例: lrc: music1.lrc 意味着你的音乐的路径是 source/lrc/music1.lrc
image -> source/images/music 示例: image: music1.jpg 意味着你的音乐的路径是 source/images/music/music1.jpg
如果使用路径的话在本地测试会出现音乐无法播放或者Error happen的情况(用url可能也会, 在APlayer的代码中表示下载失败的错误, 这锅表示不背), 所以最好的情况是用cdn url引用而不是路径
如果音乐配置没有设置对应的image, 那么默认使用source/images/music/default.jpg(图片可以换成你想要的)
注意! 如果引用cdn url, 那么要开启跨域访问(access-origin为您的域名, 因为APlayer对lrc的加载采用的是XMLHttpRequest)
关于音乐的设置:
music_setting:
auto: false //true为自动播放, 默认为false
mode: circulation //circulation为循环播放, 可填的值为random,single,order等
narrow: false
mutex: true
showlrc: true
theme: //设置音乐模块颜色, 默认为#b7daff
preload: auto
maxHeight: 513px //这个可以不用改动
这个配置其实是配置APlayer的, 具体的说明和参数选择可以直接看文档
avatar: true //为true时表示头像为圆框, 否则为方框
friend_links: friend_links.jpg // 指向source/images/friend_links.jpg, 你可以自己定制修改路径
目前评论支持友言, 畅言, gitment还有万年被墙的disqus(多说, 网易云等貌似都跪了), 如果您要使用某种评论系统, 那么让其他的为空
comment:
# your disqus_shortname
disqus:
changyan:
appid:
conf:
youyan:
# gitment: https://github.com/imsun/gitment
# make sure you know how to set it
gitment:
owner:
repo:
oauth:
client_id:
client_secret:
如果您使用了畅言, 要把畅言的浮动框 or 弹出框去掉, 可以进行下面的配置:
comment_setting:
changyan:
hide_notice: true
使用哪种统计, 就添加对应的hash码即可
analytics:
baidu:
google:
如果您对本主题感兴趣, 想要在此进行修改, 可以forkcube-generator进行修改.