对Hexo-Geek模板的一点修改

Y1ng

发布于 2022-10-31 11:20:04

3330

发布于 2022-10-31 11:20:04

文章被收录于专栏：颖奇L'Amore

前言

Author: 颖奇L’Amore

Blog: www.gem-love.com

前言▸

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

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

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

分页功能▸

themes/geek/layout/_partial/head.ejs

<span class="hljs-tag">&lt;<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>&gt;</span>

themes/geek/layout/index.ejs

<span class="hljs-tag">&lt;<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>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
        &lt;% currPage = page.current; %&gt; 
        &lt;% if ( currPage !== 1) {  %&gt;            
            &lt;% if ( page.current != 2 ) {  %&gt;
            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'/page/&lt;%= currPage-1; %&gt;'</span>&gt;</span>&lt;% }%&gt;&lt;% if ( page.current == 2 ) {  %&gt;<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'/'</span>&gt;</span>&lt;% }%&gt;
                <span class="hljs-tag">&lt;<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> &gt;</span>&amp;#xf104<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
        &lt;% }%&gt;
        Page &lt;%= currPage %&gt; of &lt;%= page.total %&gt;
        &lt;% if ( currPage !== page.total ) {  %&gt;
            <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">'/page/&lt;%= page.current+1; %&gt;'</span>&gt;</span>
                <span class="hljs-tag">&lt;<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>&gt;</span>&amp;#xf105<span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
        &lt;% }%&gt;
    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

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

添加备案信息和站长统计▸

themes/geek/layout/_partial/footer.ejs

备案信息：

<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;<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> &gt;</span>京ICP备14061386号-1<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

站长统计紧随其后即可

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

&lt;script language=<span class="hljs-string">"javascript"</span>&gt;
  <span class="hljs-comment">// 删除站点统计字样</span>
  <span class="hljs-built_in">window</span>.onload = <span class="hljs-function">()=&gt;</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&lt;<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>;
    }
  }
}
&lt;/script&gt;

页面标题▸

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

themes/geek/layout/_partial/head.ejs

修改<title>标签为：

<span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>
    &lt;% if (page.title) { %&gt;&lt;%= page.title %&gt; - &lt;%= config.title %&gt;&lt;%}else{%&gt;&lt;%= config.title %&gt; - &lt;%= config.subtitle %&gt;&lt;%}%&gt;
<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-01-20，如有侵权请联系 cloudcommunity@tencent.com 删除

ICP备案