Ocean 中文文档

Ocean 是基于 Hexo 默认主题 landscape 的功能,设计的一款支持移动设备的主题,并且集成了 Gitalk 评论功能。 由于我是一枚 Designer 而不是 Coder,所以 欢迎指正!

如果你喜欢 Ocean 可以 点这里下载,主题默认使用 Logo 是 Hexo 的 Logo,如果你也喜欢并且想使用我的这个 Shark(小鲨鱼)Logo 的话,那么希望你能给 Ocean 一个 Star,如果你还把页面底部 theme 的作者改为你自己的名字的话,那么更应该给 Ocean 一个 Star 了!

感谢

  • youchen1992 在 Ocean 制作过程中提供技术支持;
  • MeggeryWang、XantheXuan 提供的英文翻译。

Screenshot

安装

1
$ git clone https://github.com/zhwangart/hexo-theme-ocean.git themes/ocean

启用

目录 theme_config.yml 选择 theme: ocean

1
theme: ocean

更新

1
2
$ cd themes/ocean
$ git pull

配置

默认开启相册关于菜单,关闭 Gitalk 评论功能,需要的同学 true 就可以了,关于 Gitalk 的使用 过程中遇到各种报错,有同样问题的,或者有兴趣想要了解 Gitalk 可以移步看一看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# Menu
menu:
主页: /
归档: /archives
相册: /gallery
关于: /about
rss: /atom.xml

# Miscellaneous
favicon: /favicon.ico
brand: /images/hexo.svg

# Ocean 主页视频
# 多种格式的视频用于支持不同的浏览器,这里只需要配置好路径,前提是我把视频相关文件统一目录存放。
ocean:
overlay: true # 可选,false 则 Ocean 视频下方的笔触式遮盖不显示
path: /images/ocean/ # 视频统一存放路径,格式 mp4/ogg/webm
brand: /images/hexo-inverted.svg # 可选,一个小 Logo

# 内容
excerpt_link: 阅读全文...
nav_prev_text: 前一篇
nav_next_text: 后一篇
share_text: 分享

# fancybox
fancybox: true

# Local search
search_text: 搜索

# Gitalk
gitalk:
enable: false # 默认关闭评论 开启:true
clientID: # 申请 GitHub Application 网页上对应的 Client ID 与 Client Secret 参数
clientSecret: # 同上
repo: # 创建的仓库名称
owner: # Github ID
admin: # Github ID

Ocean 使用了 feathericon 图标库,菜单中的图标定义在“CSS source / css / _partial / navbar.styl”中,可根据需要进行更改或添加。
如果你不需要开启相册关于菜单,需要删除或者注销掉他们的图标,如下边的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.nav-item
&:nth-child(1) // 主页
.nav-item-link
&::before
content '\f12f'
&:nth-child(2) // 归档
.nav-item-link
&::before
content '\f12a'
//&:nth-child(3) // 相册
// .nav-item-link
// &::before
// content '\f1a9'
//&:nth-child(4) // 关于
// .nav-item-link
// &::before
// content '\f174'

插件

  • 本地搜索 - 使用插件 hexo-generator-search 生成 xml 索引文件。

    1
    $ npm install hexo-generator-searchdb --save

    然后为 hexo 的配置文件 _config.yml 添加插件配置(注意:不是主题的配置文件,主题配置文件 Ocean 已经配置完成):

    1
    2
    3
    4
    5
    # Hexo-generator-search
    search:
    path: search.xml
    field: post
    format: html
  • RSS - 如果您想启用RSS,还需要 hexo-generate-feed 插件,仅安装即可,Ocean 已经配置完成。

    1
    $ npm install hexo-generator-feed --save

文章封面图

需要写在 markdown 的 head 部分

1
2
3
4
5
title: Post name
photos: [
["img_url"],
["img_url"]
]

需要注意的是,这里说的封面图并不是文章配图,文章配图按照 markdown 的语法写就好了!

相册

首先需要创建一个 page ,关于页面也一样需要创建。

1
$ hexo new page gallery

然后在编辑 markdown 的时候需要写在 head 部分,这种写法可能不是特别特别的好,希望能有更好的方法。

1
2
3
4
5
6
title: Gallery
albums: [
["img_url","img_caption"],
["img_url","img_caption"]
]
---