maliut / hexo-theme-cube

a theme for hexo

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

hexo-theme-cube

介绍

这个主题是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进行图片展示,效果如下(展示在做这个主题之前, 我都不知道有lightgallery这个东西2333):

lightgallery

配置说明

以下所指的_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.backgroundbackground分别指移动端和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进行修改.

About

a theme for hexo

License:MIT License


Languages

Language:HTML 100.0%