基于Hexo-Ocean主题博客搭建

顾曾笑

2023-12-01

本文主要是Hexo Ocean主题博客搭建过程的记录
博客地址：松林羊

hexo 的基本命令

hexo init [folder] ：创建一个存放网站源码的文件夹。
hexo new [layout] <title>：新建一篇文章。layout：默认post，可以是page、draft。title：文章标题，标题包含空格的话，请使用引号括起来。
hexo clean：清除缓存文件db.json和已生成的静态文件public,尤其是更换主题后
hexo g：生成静态html文件
hexo s：启动服务器
hexo d：部署网站
传送门：官方文档

下载主题源码

在hexo init [folder] 的folder目录下执行：

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

参照主题文档进行配置

Ocean 中文文档
 关于 Ocean 使用中的问题

文章自动添加Read More

将\themes\ocean\layout\_partial\article.ejs文中的<% if (post.excerpt && index){ %>的else部分替换为如下内容：

<% var br = post.content.indexOf('<br>') %>
<% if(br < 0 || !index) { %>
  <%- post.more %>
<% } else { %>
  <%- post.content.substring(0, br) %><br/>
  <% if (theme.excerpt_link) { %>
	<a class="article-more-link" href="<%- url_for(post.path) %>"><%= theme.excerpt_link %></a>
  <% } %>
<% } %>

搜索功能不起作用? or 除开首页不能正常搜索

本地检索需要安装插件

npm install hexo-generator-searchdb --save

另外一个问题：插件搜索函数返回的url 地址有问题，作者说是因为 “中文字符被URL encode了 ” 。后来我找到一个解决办法：
将 [folder]/node_modules/hexo-generator-searchdb/templates/xml.ejs 文件中的：
```
<url><%- encodeURIComponent(config.root + post.path) %></url>
```
修改为
```
<url><%- encodeURI(config.root + post.path) %></url>
```

修改导航栏

修改 themes/ocean/source/css/_partial/navbar.styl 文件

文章添加封面图片

---
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"]
  ]
---

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

为文章添加Gitalk评论

参考：https://zhwangart.github.io/2018/12/06/Gitalk/

在右上角或者左上角实现fork me on github

选样式：GitHub Corners-1 GitHub Corners-2
然后粘贴刚才复制的代码到themes/ocean/layout/index.ejs文件中，放在<div id=”landingpage”></div>的第一行，并把href改为你的github地址
对样式做出修改：
<div id=“landingpage”> 修改为 <div id=“landingpage” style=“position:relative;”>
复制的<a>标签添加如下样式：style=“position:absolute;left:0;top:100;z-index=1000;”

实现点击出现特效

点击桃心
下载：桃心Js
然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。
在themes/ocean/_config.yml最后一行写入：
```
lovejs: true
```
将love.js文件放到路径/themes/ocean/source/js/src里面，然后打开\themes\ocean\layout\_partial\ after-footer.ejs文件, 在最后一行写入：
```
<% if (theme.lovejs){ %>
	<%- js('/js/love.js') %>
<% } %> 
```

爆炸效果
下载：fireworks.js anime.min.js
步骤与上面类似保存js到/themes/ocean/source/js/src，最后在\themes\ocean\layout\_partial\ after-footer.ejs文件内容未写入：

<% if (theme.fireworks){ %>
   <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
   <%- js('/js/anime.min.js') %>
   <%- js('/js/fireworks.js') %>
<% } %>

头像旋转效果

打开\themes\ocean\layout\_partial\sidebar.ejs，给<div class=logo>下的img加上一个id。然后参考：css + js实现图片不停旋转鼠标悬停停止旋转
然后将里面的js代码copy到一个my.js文件中（注意替换img的id），保存到/themes/ocean/source/js/src目录。
然后在\themes\ocean\layout\_partial\after-footer.ejs中最后一行写入：

<%- js('/js/my.js') %>

网站底部加上访问量

\themes\ocean\layout\_partial\after-footer.ejs 中默认是导入了统计脚本的(busuanzi-2.3.pure.min.js )

修改访问量统计的样式：
将\themes\ocean\layout\_partial\post\busuanzi.ejs
修改为：

<div class="powered-by">
  <% if (is_home()) { %>
    <span id="busuanzi_container_site_pv">访问量:<span id="busuanzi_value_site_pv"></span></span>
  <%} %>
	&emsp;<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">访客数:<span id="busuanzi_value_site_uv"></span></span>&emsp;
  <% if (is_post()) { %>
    <i class="fe fe-bookmark"></i>文章访问量:<span id="busuanzi_value_page_pv"></span>
  <%} %>
</div>

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

在根目录下运行：

npm install hexo-wordcount –save

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

post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

在\themes\ocean\layout\_partial\footer.ejs文件中，在<ul class=“list-inline”>标签后加入：

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

在\themes\ocean\layout\_partial\article.ejs文件中，在

标签中加入：

&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>分钟

Ocean主题的图标

图标在\themes\ocean\source\css\_feathericon.styl中查找
官网：feathericons

为博客加上萌萌的宠物

hexo-helper-live2d
在网站根目录下执行

npm install -save hexo-helper-live2d
npm install live2d-widget-model-haruto(自己选择的萌宠模型)

在hexo的配置文件中添加：

# 萌宠
 live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-haruto
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
  display:
    superSample: 2
    width: 150
    height: 300
    position: left
    hOffset: 0
    vOffset: -20
  mobile:
    show: true
  react:
    opacityDefault: 0.5
    opacityOnHover: 0.2

重启服务：

hexo clean && hexo g && hexo s

添加网站运行时间

<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date(); 
    function createtime() { 
        var grt= new Date("04/26/2019 15:49:00");//此处修改你的建站时间或者网站上线时间 
        now.setTime(now.getTime()+250); 
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 "; 
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒"; 
    } 
	setInterval("createtime()",250);
</script>

将以上代码保存到\themes\ocean\layout\_partial\post\runtime.ejs

在\themes\ocean\layout\_partial\footer.ejs文件中，第一个<ul class=“list-inline”></ul>标签后加入：

<div class="float-right">
      <%- partial('post/runtime') %>
</div>

添加DaoVoice 在线联系

首先在https://account.daocloud.io/signin注册账号
然后点击下方链接
http://dashboard.daovoice.io/get-started?invite_code=0f81ff2f
之后会得到一个app_id

在主题配置文件写入：

# Online contact 
daovoice: true
daovoice_app_id: 这里填你的刚才获得的 app_id

在\themes\ocean\layout\_partial\footer.ejs中，</head>前写入：

<% if (theme.daovoice){ %>
  <script>
  (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  daovoice('init', {
      app_id: "<%- theme.daovoice_app_id %>"
    });
  daovoice('update');
  </script>
<% } %>

取消文章下面的分享连接，添加本文结束

去掉\themes\ocean\layout\_partial\article.ejs中的以下代码：

<a data-url="<%- post.permalink %>" data-id="<%= post._id %>" class="article-share-link"><%- theme.share_text %></a>

同时还可以添加本文结束感谢阅读等说明:
如在<%- partial(‘post/tag’) %>下面一行添加：

<% if (!index && is_post()) { %>
	<div style="text-align:center;color: #ccc;font-size:14px;">------------- 本文结束&nbsp;<i class="fe fe-smile"></i>&nbsp;感谢您的阅读 -------------</div>
<% } %>

博文压缩

在根目录下执行：

npm install gulp -g
npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp –save

在根目录下新建gulpfile.js，写入一下内容：

var gulp = require('gulp');
//Plugins模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
//压缩css
gulp.task('minify-css',
function() {
    return gulp.src('./public/**/*.css').pipe(minifycss()).pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html',
function() {
    return gulp.src('./public/**/*.html').pipe(htmlclean()).pipe(htmlmin({
        removeComments: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
//压缩js 不压缩min.js
gulp.task('minify-js',
function() {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js']).pipe(uglify()).pipe(gulp.dest('./public'));
});

//4.0以前的写法 
//gulp.task('default', [
//  'minify-html', 'minify-css', 'minify-js'
//]);

//4.0以后的写法
// 执行 gulp 命令时执行的任务
//gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js',
//function() {
    // Do something after a, b, and c are finished.
//	console.log('success')
//}));

gulp.task('default',gulp.series(gulp.parallel('minify-html','minify-css','minify-js')));

生成博文时执行

hexo clean && hexo g && gulp && hexo d

就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。

修改文章封面图片的引入方式，同时支持相对地址与http的图片

将\themes\ocean\layout\_partial\post\gallery.ejs
中的<% if (index){ %>的上一行写入：

<% var idx = url_for(photo).indexOf('http') %>

将文中两处的：

<img src="<%- url_for(photo) %>" itemprop="image">

修改为：

<% if(idx < 0) { %>
	<img src="<%- url_for(post.path)+url_for(photo).substring(1) %>" itemprop="image">
<% } else { %>
	<img src="<%- url_for(photo) %>" itemprop="image">
<% } %>

设置封面图片不在内容详情页展示

将\themes\ocean\layout\_partial\article.ejs
中的

<%- partial('post/gallery') %>

修改为：

<% if (index){ %>
	<%- partial('post/gallery') %>
<% } %>

去掉rss订阅

根目录下执行：

npm uninstall hexo-generator-feed –save

将\themes\ocean\_config.yml文件中修改为：rss: false

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

修改\themes\ocean\source\css\_partial\navbar.styl

&.nav-main
      .nav-item-link
        &::before, i.fe
          display block
          line-height 1
        &::before
          font-family 'feathericon'

修改为：

&.nav-main
      .nav-item-link
        &::before, i.fe
          // display block
          line-height 1
		   margin-right: 10px;
        &::before
          font-family 'feathericon'

添加readme.md不被渲染

在Hexo目录下的source根目录下添加一个, README.md。
修改Hexo目录下的_config.yml。
将skip_render参数的值设置上。skip_render: README.md
保存退出即可。

首页视屏换成图片

将\themes\ocean\layout\_partial\ocean.ejs中

<video playsinline="" autoplay="" loop="" muted="" data-autoplay=""
   poster="<%- theme.ocean.path %>ocean.png" x5-video-player-type="h5">
  <source src="<%- theme.ocean.path %>ocean.mp4" type="video/mp4">
  <source src="<%- theme.ocean.path %>ocean.ogv" type="video/ogg">
  <source src="<%- theme.ocean.path %>ocean.webm" type="video/webm">
  <p>Your user agent does not support the HTML5 Video element.</p>
</video>

修改为：

<img src="<%- theme.ocean.path %>ocean.png">

去掉首页视频或图片

去掉themes/ocean/layout/index.ejs中的

<%- partial('_partial/ocean') %>

is_home()、is_post() 函数判断不正确

将\themes\ocean\layout\layout.ejs中

<%- partial('_partial/footer', null, {cache: !config.relative_link}) %>

修改为

<%- partial('_partial/footer', null, {cache: config.relative_link}) %>

就是将partial中的cache设置为false。参考：is_home()、is_post() 函数判断不正确

视频 or 图片只在pc端显示，不在移动端显示

修改themes\ocean\source\css_partial\layou.styl文件

// Media Query
@media (min-width: 768px)
  .jumbotron
    margin-bottom 6rem
    display block   //此处为新增。设备宽度大于等于768像素时显示视频or图片

在文件末尾新增

@media (max-width: 768px)
  .jumbotron
    display none  // 设备宽度小于等于768像素时不显示视频or图片

此时会发现移动端左上角有点空旷，则进行如下修改
修改themes\ocean\layout_partial\archive.ejs文件

var title = '';
var mobile_title = "松林羊 Blog";  // 此处为新增
...
<h1 class="page-type-title pc"><%- title %></h1> // 新增类名为pc的样式
<h1 class="page-type-title mobile"><%- mobile_title %></h1> // 此处为新增

修改themes\ocean\source\css_partial\archive.styl文件

.page-type-title
  margin 0
  padding 3rem 0
 // 以下内容为新增
  &.pc
    @media screen and (max-width: 768px)
      display none
    @media screen and (min-width: 768px)
      display block
  &.mobile
    @media screen and (max-width: 768px)
      display block
      font-family 'STXingkai'
    @media screen and (min-width: 768px)
      display none

配置fancybox展示文章图集

在themes\ocean\layout\_partial\after-footer.ejs文件末尾加入如下代码

<% if (is_post()){ %>
<script>
// 使用fancybox来显示post图片集(#andus-head-img为头像id)
$('img:not(#andus-head-img)').each(function() {
  $(this).wrap('<a class="fancybox" data-fancybox="gallery" href="' + $(this).prop("src") + '"></a>'); 
})
</script>
<% } %>

更换评论系统，由gitalk跟换为valine, 并增加邮件通知功能

依次参考
Valine–一款极简的评论系统
 Valine
Valine-Admin
在themes/ocean/_config.yml文件中新增以下内容，同时确保gitalk.enable为false

# Valine 不能与gitalk同时开启
valine:
  enable: true
  app_id:  # 这里填写得到的APP ID
  app_key:  # 这里填写得到的APP KEY
  placeholder: 记得留下你的昵称和邮箱...可以快速收到回复ヾﾉ≧∀≦)o # [v1.0.7 new]留言框占位提示文字
  notify: true # 评论回复邮件提醒 。 第三方支持：https://github.com/zhaojun1998/Valine-Admin
  verify: false # 验证码 。 开启邮件提醒会默认开启验证码选项
  avatar: monsterid # Gravatar头像。可选项：[identicon monsterid  wavatar retro robohash mp ''] ，见 https://valine.js.org/avatar.html
  recordIP: true # 是否记录评论者ip
  visitor: false  # 阅读量统计 https://valine.js.org/visitor.html

拷贝themes\ocean\layout\_partial\post\gitalk.ejs重命名为valine.ejs
全部内容修改为

<% if (theme.valine.enable) { %>
  <div class="comment_headling"  style="margin-top:5rem;">
	<font size="5"><i class="fe fe-comments"></i> 评论</font>
  </div>
  <div class="comment"></div>
  <%- js('https://cdn1.lncld.net/static/js/3.0.4/av-min.js') %>
  <%- js('js/Valine.min.js') %>
  <script type="text/javascript">
  // https://cdnjs.cloudflare.com/ajax/libs/valine/1.3.10/Valine.min.js
  GUEST_INFO = ["nick", "mail", "link"],
  guest_info = "nick,mail,link".split(",").filter(function(i) {
		return - 1 < GUEST_INFO.indexOf(i)
  });
  guest_info = 0 == guest_info.length ? GUEST_INFO: guest_info,
  new Valine({
	 // AV 对象来自上面引入av-min.js
	 av: AV, 
	 el: '.comment',
	 app_id: '<%- theme.valine.app_id %>', 
	 app_key: '<%- theme.valine.app_key %>', 
	 placeholder: '<%- theme.valine.placeholder %>',
	 meta: guest_info,
	 notify: <%- theme.valine.notify %>,
	 verify: <%- theme.valine.verify %>,
	 avatar: '<%- theme.valine.avatar %>',
	 recordIP: <%- theme.valine.recordIP %>,
	 visitor: <%- theme.valine.visitor %>,
	 lang: 'zh-cn'
  });
  </script>
<% } %>

修改themes\ocean\layout\_partial\article.ejs文件

<% if (is_post()) { %>
	<%- partial('post/gitalk') %>
	<%# 下面为新增内容 %>
	<%- partial('post/valine) %>
<%} %>

关闭评论时的验证码，将Valine.min.js保存到themes\ocean\source\js目录下，将其中

u.attr(Q, "style", "display:block;"), t && t.type) {
	var o = u.find(Q, ".vsure");
	u.on("click", o,
	function(n) {
		e.alert.hide(),
		t.cb && t.cb()
	})
}

修改为

u.attr(Q, "style", "display:none;"), t && t.type) {
	e.alert.hide(),
	t.cb && t.cb()
}

记录(自用)

<%- page.content.substring(0,tips) %> 显示html的样式结果
<%= page.content.substring(0,tips) %>显示html源代码

基于Hexo-Ocean主题博客搭建

hexo 的基本命令

下载主题源码

参照主题文档进行配置

文章自动添加Read More

搜索功能不起作用? or 除开首页不能正常搜索

修改导航栏

文章添加封面图片

为文章添加Gitalk评论

在右上角或者左上角实现fork me on github

实现点击出现特效

头像旋转效果

网站底部加上访问量

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

Ocean主题的图标

为博客加上萌萌的宠物

添加网站运行时间

添加DaoVoice 在线联系

取消文章下面的分享连接，添加本文结束

博文压缩

修改文章封面图片的引入方式，同时支持相对地址与http的图片

设置封面图片不在内容详情页展示

去掉rss订阅

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

添加readme.md不被渲染

首页视屏换成图片

去掉首页视频或图片

is_home()、is_post() 函数判断不正确

视频 or 图片只在pc端显示，不在移动端显示

配置fancybox展示文章图集

更换评论系统，由gitalk跟换为valine, 并增加邮件通知功能

记录(自用)

相关阅读

相关文章

相关问答

相关文档