Ocean 中文文档

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

如果你喜欢 Ocean 可以 从 GitHub 下载，主题默认使用 Logo 是 Hexo 的 Logo，更换 Logo 路径在 ocean/source/images/hexo.svg ，注意它还有一个反色版 hexo-inverted.svg ，如果你更改了文件名，那么还需要在 ocean/_config.yml 做对应的修改，总之，欢迎 Star ！

Markdown 基本语法在 Ocean 中的展现形式 Clone 了 Markdown 的基本语法在 Ocean 中的展现形式，可能会让你更快速的认知到 Ocean 是否适合你的 Hexo ！

使用 Ocean 过程中遇到了问题？

Screenshot

安装

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

启用

在 root _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
40
41
42
43
44
45
# 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: 阅读全文...

# fancybox
fancybox: true

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

# Valine
valine:
  enable: false      # 是否启用，默认：false（关闭），true（启用）
  el: 'vcomments'      # Valine 的初始化挂载器，无需更改
  appId:       # 从 LeanCloud 的应用中得到的 appId
  appKey:       # 从 LeanCloud 的应用中得到的APP Key
  notify: false      # 评论回复邮件提醒，默认：false（关闭），true（启用）
  verify: true      # 验证码，为避免过多的垃圾评论，所以默认 true（启用），false（关闭）
  avatar: 'mp'      # Gravatar 头像展示方式
  pageSize: '10'      # 评论列表分页，每页条数
  placeholder: '请输入...'      # 评论框占位提示符

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'

如果你想要开启 Tag（标签）、Categories（分类） 在菜单中显示，请看这里：关于 Ocean 使用中的问题

评论

Ocean 集成了 Gitalk 与 Valine 评论功能，请参照如下详细文档：

插件

1、hexo-generator-search 本地检索

  • 安装

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

  • 配置
    Hexo 的配置文件 _config.yml 添加插件配置（注意：不是主题的配置文件）：

    1
    2
    3
    4
    search:
      path: search.xml
      field: post
      content: true

2、hexo-generate-feed RSS

  • 安装

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

  • 配置
    Hexo 的配置文件 _config.yml 添加插件配置（注意：不是主题的配置文件）：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    feed:
         type: atom
         path: atom.xml
         limit: 20
         hub:
         content:
         content_limit: 140
         content_limit_delim: ' '
         order_by: -date

3、hexo-generator-index-pin-top 文章置顶

  • 安装

    1
    2
    $ npm uninstall hexo-generator-index --save
     $ npm install hexo-generator-index-pin-top --save

  • 开启

    在需要置顶的文章的 Front-matter 区域加上 top: ture ，示例：

    1
    2
    3
    4
    5
    6
    ---
     title: 新增文章置顶
     author: zhwangart
     date: 2019-07-18 15:45:03
     top: ture
     ---

文章封面图

需要写在 markdown 的 Front-matter 区域：

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

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

相册

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

1
$ hexo new page gallery

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

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

Toc 文章目录

使用 Tocbot 解析内容中的标题标签 (h1~h6) 并插入目录。使用方法：

注意：Ocean 配置 Toc 只作用于 Post 页面，在其他 Page 中不作用。

1. 在主题配置文件 ocean/_config.yml 中开启

1
2
# Toc
toc: true

2. 在 Post 中关闭 Toc

如果在 ocean/_config.yml 开启了 Toc ，那么 Tocbot 会在每一篇 Blog 都解析内容中的标题标签生成 Toc 文章目录，但并不是所有的 Blog 中都需要 Toc，所以在 markdown 的 Front-matter 部分可以关闭：

1
2
3
---
toc: false
---

部署到 Github

安装 hexo-deployer-git。

1
$ npm install hexo-deployer-git --save

修改配置：

1
2
3
4
5
deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch] #published
  message: [message]

参考资料：https://hexo.io/zh-cn/docs/deployment

感谢支持

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

使用 Ocean 过程中遇到了问题？