Author: 颖奇L’Amore
Blog: www.gem-love.com
本人目前博客用的是HEXO,模板是Geek
简单的风格比较符合我的个人审美,但是有个大Bug就是当文章过多一页显示不下时,无法翻页,不得已只能自己加以修改。
本人基本前端小白,这篇文章主要记录对该模板的一些修改。后续还有新的改动会更新到这里。
themes/geek/layout/_partial/head.ejs
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"</span>></span>
themes/geek/layout/index.ejs
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"footer"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"footer"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span>></span>
<% currPage = page.current; %>
<% if ( currPage !== 1) { %>
<% if ( page.current != 2 ) { %>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'/page/<%= currPage-1; %>'</span>></span><% }%><% if ( page.current == 2 ) { %><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'/'</span>></span><% }%>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"font-size:18px;"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'changepage1'</span> ></span>&#xf104<span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<% }%>
Page <%= currPage %> of <%= page.total %>
<% if ( currPage !== page.total ) { %>
<span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'/page/<%= page.current+1; %>'</span>></span>
<span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"font-size:18px;"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"fa"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'changepage2'</span>></span>&#xf105<span class="hljs-tag"></<span class="hljs-name">i</span>></span>
<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<% }%>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
实现效果就是主页的页面切换功能
themes/geek/layout/_partial/footer.ejs
备案信息:
<span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://beian.miit.gov.cn/"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span> ></span>京ICP备14061386号-1<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span>
站长统计紧随其后即可
但站长统计会有一个cnzz的icon,很不美观,继续写个js给删掉:
<script language=<span class="hljs-string">"javascript"</span>>
<span class="hljs-comment">// 删除站点统计字样</span>
<span class="hljs-built_in">window</span>.onload = <span class="hljs-function">()=></span>{
<span class="hljs-keyword">let</span> <span class="hljs-keyword">as</span> = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">'a'</span>);
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i =<span class="hljs-number">0</span>; i<<span class="hljs-keyword">as</span>.length;i++) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">as</span>[i].title === <span class="hljs-string">'站长统计'</span>) {
<span class="hljs-keyword">as</span>[i].innerHTML=<span class="hljs-string">''</span>;
<span class="hljs-keyword">break</span>;
}
}
}
</script>
这个模板不管主页还是文章页,都只显示网站主题。希望能主页显示网站主题、文章页显示文章主题。
themes/geek/layout/_partial/head.ejs
修改<title>
标签为:
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>
<% if (page.title) { %><%= page.title %> - <%= config.title %><%}else{%><%= config.title %> - <%= config.subtitle %><%}%>
<span class="hljs-tag"></<span class="hljs-name">title</span>></span>