hexo（sakura）修復和優化（ejs基本操作）

一、前言

這兩天論文基本結束了，等待查重和答辯的過程中，姑又對個人網站博客主題下手了。這裏先回答幾個問題：

1. 爲什麼會選擇hexo博客框架？
   答：靜態頁面，github、gitee、coding、服務器支持都比較好。

2. 爲什麼會選擇sakura主題？
   答：中間也有使用過其他主題，都很不錯，但轉悠轉悠又回到了sakura櫻花主題。

3. 本次優化哪些內容？
   答：對之前的魔改進行彙總梳理，修復hexo-theme-sakura的bug，增加一些模塊。
   具體來說，就是所有內容在config可以自定義配置。

二、基本操作

sakura主題是ejs渲染模板

1.如何在ejs中獲取config.yml的配置內容

以外鏈js引用爲例，打開themes\sakura\layout\_partial\head.ejs路徑，其中有配置路徑：（默認配置方法，直接寫路徑）

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cungudafa/cdn/css/style.css" type="text/css" media="all" id="saukra_css-css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/cungudafa/cdn/css/lib.min.css" media="all">  

修改爲：（把配置放在yml文件中）

  <link rel="stylesheet" href="<%- theme.libs.css.style %>" type="text/css" media="all" id="saukra_css-css">
  <link rel="stylesheet" href="<%- theme.libs.css.fancybox %>" media="all">  

同時在config.yml增加以下內容：

libs:
  css:
    style: https://cdn.jsdelivr.net/gh/cungudafa/cdn/css/style.css #/css/style.css # 
    lib: https://cdn.jsdelivr.net/gh/cungudafa/cdn/css/lib.min.css

• hexo他是如何做到的呢？
  這是因爲hexo的渲染機制，ejs渲染模式：<%- 內容 %> 或者<%= 內容 %>讀取其他

  其中<%- theme.libs.css.style %>會到主題 theme 下讀取配置文件config.yml中的 libs.css.style

  注意每個層級。

• 特殊注意
  以themes\sakura\layout\_widget\index-items.ejs首頁各文章模塊顯示爲例，內容填寫post.path就是獲取文章路徑，tag.path就是獲取標籤路徑。
  

2.如何在ejs中增加判斷

以themes\sakura\layout\_partial\comment.ejs爲例，寫法如下：

<% if (theme.valine.enable && post.comments) { %>

	/*	if（條件）
		內容	*/
	
<% } %>

注意：<%中間不能有空格 < %

判斷條件在config中：

valine:
  enable: true

三、優化

1.修復首頁404圖片

綜上基本技巧，先判斷文章post是否有設置圖片photos

	<% if(post.photos && post.photos.length){ %>
        內容
      <% } %>

• 有則顯示圖片，網絡原因，加載失敗顯示404

  <%= post.photos[0] || 'https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/other/image-404.png' %>
  

• 無設置圖片，在config設置的背景圖片下隨機選一張

  <%= theme.bg[Math.floor(Math.random() * theme.bg.length + 1)-1] %>
  

  配置：

完整修改部分參考：
在themes\sakura\layout\_widget\index-items.ejs修改第5排左右位置。

	<% if(post.photos && post.photos.length){ %>
        <img class="lazyload" onerror="imgError(this,3)" src="<%- theme.lazyloadImg%>" data-src="<%= post.photos[0] || 'https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/other/image-404.png' %>">
      <% }else{ %>
        <img class="lazyload" onerror="imgError(this,3)" src="<%- theme.lazyloadImg%>" data-src="<%= theme.bg[Math.floor(Math.random() * theme.bg.length + 1)-1] || 'https://cdn.jsdelivr.net/gh/honjun/[email protected]/img/other/image-404.png' %>">
      <% } %>

2.增加自動獲取文章前50個字爲摘要

增加了首頁文章沒設置摘要時，自動獲取文章前n個字：
在themes\sakura\layout\_widget\index-items.ejs修改第40排左右位置。

		<p>
            <%- post.description %>
        </p>

修改爲：

		<p>
        <% if (post.description && post.description.length > 0) { %>
            <%- post.description %>
        <% } else { %>
          <% if (theme.post_description.enable) { %>
            <%- strip_html(post.content).substring(0, 50) %>
          <% } %>
        <% } %>
        </p>

原理：判斷是否在frontmatter寫上description，如果沒有則節選前50個字爲摘要。

3.增加自動獲取作者信息

hojun大佬最原始好像是寫的死路經，這裏修改爲post.author、authorAbout和authorLink，在文章設置信息，如果你懶於設置，可以直接設置爲theme下的默認配置，或者不設置直接不顯示。

公共頁面：
在themes\sakura\layout\_widget\common-page.ejs

    <!-- #post-## -->
    <% if (post.author && post.authorAbout){ %>
    <section class="author-profile">
      <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
        <a href="<%- post.authorLink %>" class="profile gravatar"><img src="<%- post.avatar%>" itemprop="image"
            alt="<%- post.author %>" height="70" width="70"></a>
        <div class="meta">
          <span class="title">Author</span>
          <h3 itemprop="name">
            <a href="<%- post.authorLink%>" itemprop="url" rel="author"><%- post.author %></a>
          </h3>
        </div>
      </div>
      <hr>
      <p><i class="iconfont icon-write"></i><%- post.authorAbout%></p>
    </section>
    <% } %>
  </div><!-- #primary -->

文章頁面：
在themes\sakura\layout\_widget\common-article.ejs

<% if(post.authorAbout && post.author){ %>
      <section class="author-profile" <% if (post.encrypt == true) { %>style="display:none" <% } %>>
        <div class="info" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
          <a href="<%- post.authorLink %>" class="profile gravatar"><img src="<%- post.avatar%>" itemprop="image"
              alt="<%- post.author %>" height="70" width="70"></a>
          <div class="meta">
            <span class="title">Author</span>
            <h3 itemprop="name">
              <a href="<%- post.authorLink%>" itemprop="url" rel="author"><%- post.author %></a>
            </h3>
          </div>
        </div>
        <hr>
        <p><i class="iconfont icon-write"></i><%- post.authorAbout%></p>
      </section>
      <% } %>

---

附：更多的修復和優化以及增加功能
會在以下地址更新：

參考地址：https://gitee.com/cungudafa/hexo-theme-sakuraplus

記得點個star哦！