zoukankan      html  css  js  c++  java
  • 「这样玩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;
    }
    
    
  • 相关阅读:
    [LeetCode 1029] Two City Scheduling
    POJ 2342 Anniversary party (树形DP入门)
    Nowcoder 106 C.Professional Manager(统计并查集的个数)
    2018 GDCPC 省赛总结
    CF 977 F. Consecutive Subsequence
    Uva 12325 Zombie's Treasure Chest (贪心,分类讨论)
    Poj 2337 Catenyms(有向图DFS求欧拉通路)
    POJ 1236 Network of Schools (强连通分量缩点求度数)
    POJ 1144 Network (求割点)
    POJ 3310 Caterpillar(图的度的判定)
  • 原文地址:https://www.cnblogs.com/RhinoC/p/10361822.html
Copyright © 2011-2022 走看看