基於Hexo-Ocean主題博客搭建

本文主要是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 除開首頁不能正常搜索

1. 本地檢索需要安裝插件

   npm install hexo-generator-searchdb --save
   

2. 另外一個問題：插件搜索函數返回的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;”

實現點擊出現特效

1. 點擊桃心
   下載：桃心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') %>
   <% } %> 
   

2. 爆炸效果
   下載：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源代碼