「这样玩Hexo」修改主题自定义实现界面和功能的自定义

首发于个人博客
想获得更好的阅读体验,烦请移步⬆️

前言

作为一个颜党,在换了许多Hexo的主题后,选择了现在使用的fexo主题。但是相比于大多数博主使用的NEXT,fexo还是不够powerful,所以想要给博客加一些additional的功能,还需要自己修改主题文件。

以下内容均基于fexo主题,对于其他主题也能作为参考,酌情修改。

博文添加版权声明

效果图

「这样玩Hexo」修改主题自定义实现界面和功能的自定义_第1张图片

layout

这里需要新建一个.ejs文件。我将它命名为copyright.ejs并放置在fexo/layout/_partial/下,文件内容为:

本文作者: <%= config.author %>

本文链接: <%- config.url %>/<%- post.path %>

版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 4.0 国际许可协议,转载请注明。

然后在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的默认效果,这样评论区就显得格格不入。

效果图

「这样玩Hexo」修改主题自定义实现界面和功能的自定义_第2张图片

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

效果图

「这样玩Hexo」修改主题自定义实现界面和功能的自定义_第3张图片

layout

这里需要引入FontAwesome的CSS文件,修改head.ejs,在下另起一行,写入:

CSS

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

你可能感兴趣的:(「这样玩Hexo」修改主题自定义实现界面和功能的自定义)