文章目录
一、前言
这两天论文基本结束了,等待查重和答辩的过程中,姑又对个人网站博客主题下手了。这里先回答几个问题:
-
为什么会选择hexo博客框架?
答:静态页面,github、gitee、coding、服务器支持都比较好。 -
为什么会选择sakura主题?
答:中间也有使用过其他主题,都很不错,但转悠转悠又回到了sakura樱花主题。 -
本次优化哪些内容?
答:对之前的魔改进行汇总梳理,修复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哦!