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: [
["img_url","img_caption"],
["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
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 过程中遇到了问题?