Skip to content

主题配置说明

AONOSORA edited this page Dec 31, 2017 · 6 revisions

以下的配置的位置在主题下的_config.yml中, 即themes/gal/_config.yml, 如果是其他文件我会特别说明:

博客logo:

有两种情况,一种是你自己有logo图片, 一种是你没有logo图片,这种情况就是你的博客标题作为logo的部分, 两种效果如图:

有logo图片,这里我用弟弟的网站为例子: 有logo图片,这里我用弟弟的网站为例子

没有logo图片,直接用博客标题或者自己设置 没有logo图片,直接用博客标题

配置的参数如下所示:


    use_logo: false      // 如果你不用logo图片, 那么就设置成false, 注意要设置好blog的标题
    logo_image:          // logo图片, 使用路径, 填写文件名即可(比如logo_image: logo.png 指向 source/imgs/logo.png), 不用logo图片则不填
    navbar_text:         // 如果你不用logo图片, 又不想用blog标题, 那么就在这里设置成你要展示的文本

博客导航菜单:

博客导航菜单

如上图, 首页, 归档, 分类这些均是配置的, 关键的配置如下所示:

  menu:
   - title: 首页
     # 参照font-awesome官网的icon, 取后面一段(比如用fa-star这个图标, 那么这里的icon就填star)
     icon: home
     url: /
   - title: 归档
     icon: archive
     url: archives
   - title: 分类
     icon: list
     url: categories
     dropdown: 3 #dropdown为下拉菜单出现的项目最大数目(只限于tags和categorys)
     # 如果不想显示下拉菜单, 则不要填写, 即dropdown:
     # 具体效果可以看https://myau.moe
     # tags
   - title: 标签
     icon: tags
     url: tags
     dropdown: 3
   # about, 这个实际上是自定义page, 后面的自定义page参照about样式
   - title: 关于我
     icon: user
     url: about

关于上面的配置, 前面四个可以不用动, 即首页, 归档, 分类, 标签(当然, 会折腾的人随便动), 从后面的项开始是page页面, 比如这个关于我, 是一个page,你需要在hexo站点目下运行:

    hexo new page about

关于上面的dropdown, 是设置展示的数量, 比如我的标签很多, 但是我只想dropdown最多三项, 那么就设置成dropdown: 3, 效果如下图所示:

博客导航dropdown

默认preview图片:

preview图片是什么? 就是类似下面这货:

preview图片展示

使用这个主题对于每一篇文章的front-matter要求都是要有个preview带图片地址的, 比如我的站点的这篇文章:

preview图片展示

preview图片展示

但是, 每篇文章都带的话有时有点烦, 所以就设置了默认的preview, 请看下面的配置:

   // 如果使用文件名则对应目录: source/imgs/preview, 比如 preview1.jpg -> source/imgs/preview/preview1.jpg
   // 如果用url则填写完整的url地址即可
   default_preview:
      - preview1.jpg
      - preview2.jpg
      - preview3.jpg
      - preview4.jpg

通过上面的设置, 在hexo g的时候如果你的文章里面没带preview, 那么就会随机抽取图片作为该文章的preview, 由于我这里只设置了四张默认的preview, 所以你看我的站点的文章有好几篇preview一样的属于正常现象。

背景图片:

背景图片有两个需要配置的, 一个是移动设备的, 另外一个是我们大型设备, 移动设备的配置比较简单, 如下所示:

     // 必填, 设定小型设备展示背景图, 指向source/imgs, 比如xs_bg_image: bg.png -> source/imgs/bg.png
     xs_bg_image: xsbg.gif

大型设备的配置分使用路径和url两种, 这里我分开写, 为了方便区分(注意, 无论是使用路径还是url, 图库至少要有六张图, mac_count至少要为6):

使用路径的:

      slide_background:
         use_url: false   // 额, 这个不用多说了把
         prefix: slide/background   // 采用本地博客图片路径, 下面三个参数组合指向: source/imgs/slide/background(1~x).jpg, 并且会随机选择出其中的六张图
         ext: jpg       // 要求统一图片后缀, 如果你有很多张图片, 但是不同后缀, 要转成统一后缀, 下面我会给出几个图片转换的网站,挺好用的
         mac_count: 6   // 表示选择的范围, 比如你放了10张图片, background(1~10).jpg, 但是你只想选择其中的八张,那么mac_count就是8

使用外部url的:

      slide_background:
         use_url: true
         下面的组合指向选择http://ouo1ro65u.bkt.clouddn.com/background(1~10).png的其中六张
         prefix: http://ouo1ro65u.bkt.clouddn.com/background  
         ext: png          // 上同
         mac_count: 10     // 上同

个人头像:

前面的你都会配或者看懂的话, 这个配置就很简单了, 看下面说明:

     # 必填, 个人头像, 如果是路径, 则指向source/imgs
     # 也可以填http:// OR https:// url地址
     author_image: avatar.jpg

侧边栏:

这个真没什么好说的, 直接看_config.yml的注释即可。

文章热度统计:

关于这部分的配置和操作在这里可以看到。

评论系统配置:

关于这个部分的配置和操作在这里可以看到。

公告:

公告就是这个东西:

公告展示

是否使用公告就是直接设置use_issuetruefalse

关于公告内容的设置, 则要在另一个文件themes/gal/layout/_partial/issue.ejs中配置, 如下所示:

<div class="alert well fade in" id="gal-issue" role="alert">
    <button type="button" class="close" data-dismiss="alert">×</button>
    这里是公告内容
    <br>
    配置相关说明请看<strong>_config.yml</strong>
</div>

右键功能:

相信见过弟弟网站的挺多都知道这个右键功能了:smirk:

右键功能展示

其中, 首页, 上一页, 下一页是固定的三项, 其他三项可以自己进行配置:

open_oni: true     //是否开启欧尼酱功能, 默认为true, 不想开启设置为false即可
oni_setting:
  - title: 归档
    url: archives
  - title: 关于
    url: about
  - title: 留言板
    url: message
# 欧尼酱选项图片(可以自己替换, 最好是100 * 100像素的图片)
# 图片为默认的 source/imgs/oni/oni(1~6).jpg
# 如果自己替换了不同后缀的图片, 需要在 source/css/_common.css中修改(直接ctrl + F搜oni)

使用上面的配置的话, 以示例站点为例, 是这样的:

右键功能展示