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/cdn@1.6/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/cdn@1.6/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/cdn@1.6/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哦！