博客自从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]就可以了
