「這樣玩Hexo」修改主題自定義實現界面和功能的自定義


首發於個人博客
想獲得更好的閱讀體驗,煩請移步⬆️

前言

作為一個顏黨,在換了許多Hexo的主題后,選擇了現在使用的fexo主題。但是相比於大多數博主使用的NEXT,fexo還是不夠powerful,所以想要給博客加一些additional的功能,還需要自己修改主題文件。

以下內容均基於fexo主題,對於其他主題也能作為參考,酌情修改。

博文添加版權聲明

效果圖

layout

這里需要新建一個.ejs文件。我將它命名為copyright.ejs並放置在fexo/layout/_partial/下,文件內容為:

<div class="post-copyright">
    <p class="post-copyright-author">
        <b>本文作者:</b>
        <a href="<%= config.root %>index.html" target="_blank" title="<%= config.author %>">
        <%= config.author %>
        </a>
    </p>
    <p class="post-copyright-link">
        <b>本文鏈接:</b>
        <a href="<%- config.root %><%- post.path %>" target="_blank" title="<%= post.title %>">
        <%- config.url %>/<%- post.path %></a>
    </p>
    <p class="post-copyright-license">
        <b>版權聲明:</b>
        本博客所有文章除特別聲明外,均采用
        <i class="fa fa-fw fa-creative-commons"></i>
        <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">BY-NC-SA 4.0</a>
        國際許可協議,轉載請注明。</p>
</div>

然后在article.ejs中引入,找到<%- post.content %>,在下面添加:

<%- partial('copyright') %>

這時候其實就已經有了一個簡陋的版權聲明。

CSS

想要實現上面圖片的效果,還需要在CSS中給版權說明加上樣式:

.post-copyright {
    margin: 2em 0 0;
    padding: 0.5em 1em;
    border-left: 3px solid #1bbc9b;
    background-color: #F7F7F7;
    list-style: none
}

.post-copyright p{
	line-height: 1em;
}

更改Gitalk樣式

fexo已經原生支持了Gitalk,但是只是簡單地開啟了這個評論功能,顯示效果還是Gitalk的默認效果,這樣評論區就顯得格格不入。

效果圖

CSS

Gitalk的樣式是在線獲取的,所以在CSS中需要加上!important才能覆蓋原有樣式。

主要做了如下修改:

  • 修改評論框圓角為6px,與fexo主題中代碼塊樣式統一
  • 去除評論框邊框,顏色修改,與主題中搜索框樣式統一
  • 修改顯示字體
.gt-container .gt-header-textarea , .gt-header-preview {
    border-radius: 6px!important;
    border: 0px!important;
    background-color: #f0f0f0!important;
    font-family: 'Open Sans Condensed',"Microsoft Yahei"!important;
}

.markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre , .gt-container .gt-counts{
    font-family: 'IBM 3270','Open Sans Condensed',"Microsoft Yahei"!important;
}

.gt-container .gt-ico-github svg {
    fill: #757575!important;
}

給博文中元素前加上Iconfont

效果圖

layout

這里需要引入FontAwesome的CSS文件,修改head.ejs,在<!DOCTYPE html>下另起一行,寫入:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

CSS

.article-content p a:before {
    font-family: 'FontAwesome';
    content: '\f0c1';
    font-size: 0.7em;
	padding-left: 0.2em;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM