对Hexo-Geek模板的一点修改

Author: 颖奇L’Amore

Blog: www.gem-love.com


前言

本人目前博客用的是HEXO,模板是Geek

简单的风格比较符合我的个人审美,但是有个大Bug就是当文章过多一页显示不下时,无法翻页,不得已只能自己加以修改。

本人基本前端小白,这篇文章主要记录对该模板的一些修改。后续还有新的改动会更新到这里。

分页功能

themes/geek/layout/_partial/head.ejs

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

image-20220120132417829

themes/geek/layout/index.ejs

<div class="footer" id="footer">
<div>
<% currPage = page.current; %>
<% if ( currPage !== 1) { %>
<% if ( page.current != 2 ) { %>
<a href='/page/<%= currPage-1; %>'><% }%><% if ( page.current == 2 ) { %><a href='/'><% }%>
<i style="font-size:18px;" class="fa" id='changepage1' >&#xf104</i>
</a>
<% }%>
Page <%= currPage %> of <%= page.total %>
<% if ( currPage !== page.total ) { %>
<a href='/page/<%= page.current+1; %>'>
<i style="font-size:18px;" class="fa" id='changepage2'>&#xf105</i>
</a>
<% }%>
</div>
</div>

image-20220120132541208

实现效果就是主页的页面切换功能

image-20220120132615703

添加备案信息和站长统计

themes/geek/layout/_partial/footer.ejs

备案信息:

<p><a href="http://beian.miit.gov.cn/" target="_blank" >京ICP备14061386号-1</a></p>

站长统计紧随其后即可

image-20220120132743674

但站长统计会有一个cnzz的icon,很不美观,继续写个js给删掉:

<script language="javascript">
// 删除站点统计字样
window.onload = ()=>{
let as = document.getElementsByTagName('a');
for(let i =0; i<as.length;i++) {
if (as[i].title === '站长统计') {
as[i].innerHTML='';
break;
}
}
}
</script>

页面标题

这个模板不管主页还是文章页,都只显示网站主题。希望能主页显示网站主题、文章页显示文章主题。

themes/geek/layout/_partial/head.ejs

修改<title>标签为:

<title>
<% if (page.title) { %><%= page.title %> - <%= config.title %><%}else{%><%= config.title %> - <%= config.subtitle %><%}%>
</title>
Author: Y1ng
Link: https://www.gem-love.com/2022/01/20/对Hexo模板的一点修改/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年    【腾讯云】境外1核2G服务器低至2折,半价续费券限量免费领取!