关于 Ocean 使用中的问题

本文将 Ocean 中文文档 下边评论区中，一些 Hexo 博主们在使用 Ocean 时遇到的比较明显的问题整理归纳，当然有些问题并不是出在 Ocean 主题上，而是因为没有认真阅读 Hexo 的文档，我也简单写一下。

1、认真阅读 Hexo 的文档

1.1 如何首页默认显示摘要？

在写 Markdown 的时候自定义摘要文字：

1
2
3
摘要...
<!--more-->
正文...

1.2 怎么添加 相册、关于、标签… 页面？

首先更新 Ocean 代码，然后认真阅读 Hexo 文档，有说明：

你可以执行下列命令来创建一篇新文章。

1
$ hexo new [layout] <title>

简单解释一下，new ：创建， [layout] ：文章布局（page 独立页面、post 发布博文），<title> ：标题。因为需要创建的都是独立页面，而不是发布博文，所以文章布局需要选择： page ，详细请参见 Hexo 写作 。

因为 Ocean 有一个相册功能，所以我在 Ocean 中文文档 中以 gallery 为例也写过：

1
$ hexo new page gallery

不需要写 <title>：

1
2
3
4
$ hexo new page gallery      // 创建相册页面
$ hexo new page about        // 创建关于页面
$ hexo new page tags         // 创建标签页面
$ hexo new page categories   // 创建分类页面

因为主题会给不同的页面定义不同的模板（可以在 theme/layout 中可看到模板文件），所以需要在 Front-matter 区域标注 layout （布局），以 Tags 页面为例：

1、首先目录一定是：source/tags/index.md
2、Markdown ：

1
2
3
4
5
6
---
title: Tags
date: 2019-04-19 17:28:54
type: tags
layout: "tags"
---

最初写 Ocean 的时候纯粹是一个 Designer 的自娱自乐，自己不需要 Tag 与 Categories 所以就没有加对应模板，后来看见大家都在问，就添加上了！现在只是单纯的加了模板页，我还会再设计一下它们的 UI ，喜欢 Ocean 的博主空闲时间可以关注一下更新～

1.3、语言是如何配置的？

主题配置文件 _config.yml 中：language: zh-CN ，详细请看 Hexo 国际化（i18n） ，language 什么值都不写默认为英文，其实还是 你写作的是什么文字就是什么语言 ，比如你写一篇中文 blog 它绝不可能给你转换成英文的，国际化也就是基本功能的语言定义，比如打开一个语言文件（language/zh-CN.yml）可以看到：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
categories: 类别
search: 搜索
tags: 标签
tagcloud: 标签云
tweets: 推文
prev: 上一页
next: 下一页
comment: 留言
archive_a: 归档
archive_b: 归档：%s
page: 第 %d 页
recent_posts: 最新文章
newer: 前一篇
older: 后一篇
share: 分享
powered_by: Powered by
rss_feed: RSS Feed
category: 分类
tag: Tag

2、使用 Ocean 的问题

2.1 相册、分类、标签…菜单对应图标

图标都 按顺序写 在了 css 中，目录：source/css/_partial/navbar.styl ，因为我不需要分类与标签页面直观的展示出来，所以我注掉了对应的代码，然后把 关于 :nth-child(6) 改为 :nth-child(4) 。

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
.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 '\f18c'
    //&:nth-child(5)         // 标签
    //  .nav-item-link
    //    &::before
    //      content '\f153'
    &:nth-child(4)         // 关于
      .nav-item-link
        &::before
          content '\f174'

2.2 怎么发布照片？

已经新建了一个相册页面，怎么发布照片？写在 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"]
        ]
---

还是有疑问，可以看 galikeoy 回复 Mrxxd 关于相册与个人简介的问题 。

2.3 分享很鸡肋？

分享功能确实鸡肋，分享到微信实现起来简直太难，所以我也没有过多研究。

2.4 本地搜索功能不起作用？

本地检索需要安装插件 hexo-generator-searchdb 

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

由于之前文档写的不够详细，所以 关于搜索问题 sevilen 同学给了一个详细的步骤 ，再后来我也更新了 Ocean 的文档，并且升级了 hexo-generator-searchdb ，这个问题也就几乎不存在了。

另外一个问题是我们使用插件的 搜索函数返回的 url 地址有问题 ，作者说是因为 “中文字符被URL encode了 ” ，后来我找到一个解决办法： 将 /blog/node_modules/hexo-generator-searchdb/templates/xml.ejs 文件中的：

1
<url><%- encodeURIComponent(config.root + post.path) %></url>

修改为 

1
<url><%- encodeURI(config.root + post.path) %></url>

使其中 url 中常见的字符（如：&, ?, /, =）不被十六进制的转义序列进行替换。

2.5、我的评论出现了问题？

请移步 Gitalk 的使用 ，基本就是文章描述到到三个问题，然后我就都遇上了，所以写出来作为前车之鉴。

2.6、文章封面图片无法显示？

文章封面图片在首页无法显示，只在详情页显示？大部分应该是图片存放路径的问题，建议不要把文章图片放在 theme 中的 source/images 中，Hexo 资源文件夹 说的是项目图片，而不是 post 图片。我之前是放在 七牛云 上，访问速度快，但是有费用产生，后来我就放 github 上了，文章配图直接写一个 github 的路径地址。

2.7 首页的视频是否可以换成图片？

完全可以，首先你需要更新一下 Ocean 因为我加入了对图片支持的 css 样式，其次因为 Ocean 默认是视频，所以换成图片需要简化模板文件的代码，模板路径：ocean/layout/_partial/ocean.ejs ，简化的代码：

1
2
3
4
<div class="video-media">
  <img src="<%- theme.ocean.path %>">
  <div class="video-overlay"></div>
</div>

这里的 <%- theme.ocean.path %> 你可以直接写一个图片都完整路径！或者保持现在这样，然后在 _config.yml 中配置！

2.8 新增文章置顶功能

需要安装插件 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
---

2.9 相册图片加载慢

2018年8月19日更新了一次 ocean ，使用了 justifiedGallery 。

  • 优势：相对于 flex 布局的 object-fit:cover 属性而言，照片显示完整，浏览器兼容更好。
  • 缺陷：慢，因为我没有解决掉照片懒加载的问题，所以需要照片都加载过来才能一起显示，希望喜欢 Ocean 设计的高手们能一起来开发。

现在情况下，如果还是更在意照片加载速度快一些的话，那么修改 layout/_partial/article.ejs 第 24 行：

1
<%- partial('post/justifiedGallery') %>

为：

1
<%- partial('post/albums') %>

欢迎补充…