博客自从11月换了个主题后就一直在断断续续的折腾,开个文章记录下折腾日志
首页部分更改
更改LOGO下的图标
文件路径\hexo\blog\themes\material\layout\index.ejs
<i class="material-icons" role="presentation">view_carousel</i> <i class="material-icons" role="presentation">more_vert</i>
|
改为
<i class="material-icons" role="presentation">pages</i> <i class="material-icons" role="presentation">share</i>
|
效果图

首页文章加标签
路径\hexo\blog\themes\material\layout\_partial\Paradox-post-info.ejs
<% if (post.categories && post.categories.length) { %> <!-- Category --> <span class="post_entry-category"> <%- list_categories(post.categories, { show_count: false, class: 'post_category', style: 'none' }) %> </span> <% } %>
|
改为
<!-- tags --> <span class="post_entry-right-info-Tags"> <i class="material-icons">bookmark_border</i> <%- list_tags(post.tags, { show_count: false, class: 'post-tag', style: 'none' }) %> </span> <!-- Category --> <span class="post_entry-right-info-Category"> <i class="material-icons">folder_open</i> <%- list_categories(post.categories, { show_count: false, class: 'post-category', style: 'none' }) %> </span>
|
效果图

底部添加访客数、运行时间站点字数
该部分需要wordcount支持,请参考下一小节
\hexo\blog\themes\material\layout\_partial\footer.ejs
<!-- Paradox Footer Left Section --> <%- partial('_partial/footer-left') %>
<!--Copyright--> <div id="copyright"> Copyright © <span year></span> <%- config.title %> <% if(theme.footer_text) { %> <br> <% if(Array.isArray(theme.footer_text)) { %> <%- theme.footer_text.join('<br>') %> <% } else { %> <%- theme.footer_text %> <% } %> <% } %> </div>
<!-- Paradox Footer Right Section -->
|
改为
<!-- Paradox Footer Left Section --> <%- partial('_partial/footer-left') %> <!--Copyright--> <div id="copyright"> Copyright © <span year></span> <%- config.title %> <% if(theme.footer_text) { %> <br> <% if(Array.isArray(theme.footer_text)) { %> <%- theme.footer_text.join('<br>') %> <% } else { %> <%- theme.footer_text %> <% } %> <% } %> <% if(theme.busuanzi.all_site_uv === true) { %> <!-- All Site UV --> <br /> <span id="busuanzi_container_site_uv">本站访客数 <span id="busuanzi_value_site_uv"> </span> </span>| <span id="busuanzi_container_site_pv">本站总访问量 <span id="busuanzi_value_site_pv"> </span> </span>| <i class="material-icons">keyboard</i>站点总字数<span class="post-count"><%= totalcount(site) %></span> <% } %> <div class="footer-site-time"> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> </div> </div> <script> var now = new Date(); function createtime() { var grt= new Date("01/01/2016 00:00: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>
|
首页底部分页优化
\hexo\blog\themes\material\source\css\style.min.css
#scheme-Paradox .page-number { line-height: 2; position: relative; top: -1px; display: inline-block; margin: 0 10px; padding: 0 11px; }
.pagination { display: inline-block !important; margin: 120px 0 40px; text-align: center; border-top: 1px solid #eee; }
#scheme-Paradox .material-nav .page-number.current { color: #fff; border-top-color: #ccc; background: #ccc; }
|
效果图

文章页
头部添加阅读时长需要wordcount插件
首先,cd到你的blog目录,然后执行npm i --save hexo-wordcount
,
修改文件
hexo\blog\themes\material\layout\_partial\Paradox-post-info.ejs
部分内容如下
<% if(theme.wordcount.enable === true) { %> | <i class="material-icons">keyboard</i><span class="post-count">本文共:<%= wordcount(page.content) %>字</span> | <i class="material-icons">query_builder</i><span class="post-count">阅读时间≈<%= min2read(page.content) %>分</span> | <% } %> <!-- Favorite --> <!-- <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like"> <i class="material-icons" role="presentation">favorite</i> <span class="visuallyhidden">favorites</span> </button> -->
|
\hexo\blog\themes\material\_config.yml
文件末尾添加内容如下
#wordcount wordcount: enable: true
|
然后重新生成页面
首页下部截图

文章页截图

删除分享列表内的浏览人数并转移到外部
文件\hexo\blog\themes\material\layout\_partial\post-info-share.ejs
删除
<% if(theme.busuanzi.enable === true) { %> <% if(theme.busuanzi.post_pv === true) { %> <!-- Busuanzi Views --> <a class="post_share-link" href="#"> <li class="mdl-menu__item"> <span id="busuanzi_container_page_pv"> <span id="busuanzi_value_page_pv"></span> <%= __('post.views') %> </span> </li> </a> <% } %> <% } %>
|
文件\hexo\blog\themes\material\layout\_partial\Paradox-post-info.ejs
<!-- Author Name & Date --> <div> <strong><%= config.author %></strong> <span><%= date(page.date, 'MMM DD, YYYY') %></span> </div>
<div class="section-spacer"></div>
<!-- Favorite --> <!--
|
改为
<!-- Author Name & Date --> <div> <strong><%= config.author %></strong> <span><%= date(page.date, 'MMM DD, YYYY') %></span> </div> <div class="section-spacer"></div> <% if(theme.busuanzi.enable === true) { %> <% if(theme.busuanzi.post_pv === true) { %> <!-- Busuanzi Views --> <span id="busuanzi_container_page_pv"> <span id="busuanzi_value_page_pv"></span> <%= __('post.views') %> </span> <% } %> <% } %> <!-- Favorite --> <!--
|
预览图

文章底部添加前后文章名
文件\hexo\blog\themes\material\layout\_partial\post-nav.ejs
<%= __('post.older') %>
改为<%= page.next.title %>
<%= __('post.newer') %>
改为``<%= page.prev.title %>`
如图

预览图

文章标题修复
\hexo\blog\themes\material\layout\_partial\Paradox-post_entry.ejs
<p class="article-headline-p"><a href="<%= url_for(post.path) %>"><% if(pin) { %><span>[Top]</span><% } %><%= post.title %></a></p> <a class="article-headline-p" href="<%= url_for(post.path) %>" ><% if(pin) { %><span>[Top]</span><% } %><%= post.title %></a>
|
利用 Fancybox 添加图片放大预览查看功能
首先把fancybox的dist目录下的.min.js文件解压到\hexo\blog\themes\material\source\js
目录下,然后把.min.css文件解压到\hexo\blog\themes\material\source\css
目录下,然后把下面的JS代码保存为utils.js扔到\hexo\blog\themes\material\source\js
目录下
utils.js
$(document).ready(function() { wrapImageWithFancyBox(); });
function wrapImageWithFancyBox() { $('img').not('.sidebar-image img').not('#author-avatar img').not(".mdl-menu img").each(function() {
var $image = $(this); var imageCaption = $image.attr('alt'); var $imageWrapLink = $image.parent('a');
if ($imageWrapLink.size() < 1) { var src = this.getAttribute('src'); var idx = src.lastIndexOf('?'); if (idx != -1) { src = src.substring(0, idx); } $imageWrapLink = $image.wrap('<a href="' + src + '"></a>').parent('a'); }
$imageWrapLink.attr('data-fancybox', 'images'); if (imageCaption) { $imageWrapLink.attr('data-caption', imageCaption); }
});
$().fancybox({ selector : '[data-fancybox="images"]', thumbs : true, hash : false, loop : false, });
}
|
\hexo\blog\themes\material\source\js
目录结构大致如下

\hexo\blog\themes\material\source\css
目录结构大致如下

然后在/material/layout/_partial/head.ejs
文件标签之前加入
<!-- fancybox support --> <% if(theme.fancybox === true) { %> <%- cssLsload({path:('css/jquery.fancybox.min.css'),key:'fancybox_css'}) %> <%- jsLsload({path:('js/jquery.fancybox.min.js'),key:'fancybox_js'}) %> <%- jsLsload({path:('js/utils.js'),key:'utils_js'}) %> <% }%>
|
然后重新生成网页[hexo g]就可以了