Hexo博客踩坑记录

修改代码框和高亮颜色

themes\ocean\source\css\_partial\highlight.styl

新建一个空白page,不受原来的hexo模板影响;

在html文件头加layout: false

显示摘要,不显示全文;

在写 Markdown 的时候自定义摘要文字,正文之前加<!--more-->,比如:

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

选择一篇文章置顶

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

文章添加封面图片

1
2
3
4
5
6
7
8
---
title: Post name
date: 2019-07-24 22:01:03
photos: [
["/images/相机.jpg"], // themes/ocean/source/images目录下
["https://tuchong.pstatp.com/2716763/f/531173888.jpg"]
]
---

在首页只会显示第一张,详情页会按顺序显示这两张

一篇文章添加多个标签

比如tags: ["Photo", "Life"]

1
2
3
4
5
6
---
title: 作品《燕大视觉印象》
date: 2019-02-18 15:11:21
tags: ["Photo", "Life"]
top: ture
---

往相册页里加图片

已经新建了一个相册页面,怎么发布照片?写在 markdown 的 Front-matter 区域,注意格式,和markdown里的插入链接有区别:

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

修改右侧导航栏图标

1.在开源图标feathericons里找到心仪的图标;

2.通过图标给的英文关键词去themes/ocean/source/css/_feathericon.styl寻找对应的图标编号;

3.然后去修改./themes/ocean/source/css/_partial/navbar.styl对应的图标编号

先修改source/css/_partial/navbar.styl

再去修改主题目录下的_config.yml里的menu

导航栏图表改为在文字左侧

修改\themes\ocean\source\css_partial\navbar.styl

1
2
3
4
5
6
7
&.nav-main
.nav-item-link
&::before, i.fe
display block
line-height 1
&::before
font-family 'feathericon'

修改为:

1
2
3
4
5
6
7
8
&.nav-main
.nav-item-link
&::before, i.fe
// display block
line-height 1
margin-right: 10px;
&::before
font-family 'feathericon'

如在gitbash编辑里遇到缩进异常,则可以在Sublime txt里打开,在sublimeText的preferences-setting(user)中设置显示空格符号,把“draw_white_space”的属性设置成“all”,就可以在编辑器里看见空格和tab的显示,对tab进行修改就可以了。参考

替换themes\ocean\source\images下的两个svg文件,hexo-inverted.svghexo.svg,文件名不要变动;

添加歌单页

参考教程

我这里用的是自己的网易云歌单“我最喜欢的音乐”,怎么获取这个歌单的id?打开手机网易云音乐app,分享这个歌单时选择复制链接,生成的链接是这样的:

分享王浩宇_创建的歌单「我喜欢的音乐」: http://music.163.com/playlist/148890665/120047292/?userid=120047292 (来自@网易云音乐)

playlist后紧跟的148890665就是需要的歌单id。

添加网站字数,阅读时间统计

hexo本地和github不一致

试试

1
2
hexo clean
hexo d -g

添加网站总字数记录

在根目录下运行:

1
npm install hexo-wordcount –save

\themes\ocean\_config.yml主题配置文件中加入:

1
2
3
4
5
6
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: true
separated_meta: true

\themes\ocean\layout\_partial\footer.ejs文件中,在<ul class="list-inline">标签后加入:

1
2
3
<ul class="list-inline">
<li>全站共<span class="post-count"><%= totalcount(site) %></span></li>
</ul>

添加文章字数统计和预估阅读时间

themes/ocean/layout/_partial/article.ejs里的

1
2
3
4
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
<%- partial('post/category') %>
</div>

中间加上

1
2
&emsp;<i class="fe fe-bar-chart"></i> <span class="post-count"><%- wordcount(post.content) %></span>
&emsp;<i class="fe fe-clock"></i> <span class="post-count"><%- min2read(post.content) %></span>分钟

变成这样:

1
2
3
4
5
6
<div class="article-meta">
<%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
&emsp;<i class="fe fe-bar-chart"></i> <span class="post-count"><%- wordcount(post.content) %></span>
&emsp;<i class="fe fe-clock"></i> <span class="post-count"><%- min2read(post.content) %></span>分钟
<%- partial('post/category') %>
</div>

图标从文字上面,放到文字左边;

hexo系列问题之部署到github时会删掉README文件

设置skip_render

解决使用hexo deploy命令之后自定义域名失效的问题

https://blog.csdn.net/qq_42893625/article/details/102574242

hexo deploy时重复输入用户名密码的问题

github提示Permission denied (publickey),如何才能解决?

参考链接

关于 Ocean 使用中的问题

hexo从零开始到搭建完整

基于Hexo-Ocean主题博客搭建-andus

开源图标feathericons

高亮配置文件highlight.js demo

RGB颜色值与十六进制颜色码转换工具

Ocean主题作者的博客

备注

  • 修改theme下的文件,不需要断开hexo s,直接hexo g就可刷新;

  • 修改根目录下的文件,hexo g后还要重新hexo s才能刷新更改;