关于 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: Newer
older: Older
share: 分享
powered_by: Powered by
rss_feed: RSS Feed
category: 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: [
["img_url","img_caption"],
["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') %>

欢迎补充…