Hexo-Next-主题优化(二)

0.15字数 534阅读 3850

1.主页文章添加边框阴影效果

border.png
  • 打开themes/next/source/css/_custom/下的custom.styl,向里面加代码
// 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

2.修改文章间分割线

  • 打开themes/next/source/css/_common/components/post/下的post-eof.styl,修改
.posts-expand {
  .post-eof {
    display: block;
  //  margin: $post-eof-margin-top auto $post-eof-margin-bottom;  
    width: 0%; //分割线长度
    height: 0px; // 分割线高度
    background: $grey-light;
    text-align: center;
  }
}

3.代码块自定义样式

image.png
  • 打开themes/next/source/css/_custom/下的custom.styl,向里面加代码(颜色可以自己定义)
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 边框的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

4.开启版权声明

  • 主题配置文件下,搜索关键字post_copyright,enable改为true
# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

5.自定义文章底部版权声明

image.png
5.1在目录 themes/next/layout/_macro/下添加 my-copyright.swig,内容如下:
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">

  <p><span>本文标题:</span>{{ page.title }}</a></p>
  <p><span>文章作者:</span>{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm:ss") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功!"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({   
          title: "",   
          text: '复制成功',   
          html: false,
          timer: 500,   
          showConfirmButton: false
        });
      });
    }));  
</script>
{% endif %}
5.2在目录themes/next/source/css/_common/components/post/下添加my-post-copyright.styl,内容如下:
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #333333; // title color
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #0593d3; // link color
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}
5.3 修改themes/next/layout/_macro/post.swig,在代码如下
{% if theme.wechat_subscriber.enabled and not is_index %}
      <div>
        {% include 'wechat-subscriber.swig' %}
      </div>
 {% endif %}

之前添加增加如下代码:

<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>
  • 修改themes/next/source/css/_common/components/post/post.styl文件,在最后一行增加代码:
@import "my-post-copyright"
5.4设置新建文章自动开启copyright,即新建文章自动显示自定义的版权声明,设置your site/scaffolds/post.md文件
---
title: {{ title }}
date: {{ date }}
tags:
type: "categories"
categories:
copyright: true #新增,开启
---

6.在右上角或者左上角实现fork me on github

No.1.png
  • 选择样式GitHub Ribbons,修改图片跳转链接,并复制文本框中的代码
    ribbons.png
  • 打开themes/next/layout/下的_layout.swig文件,把代码复制到<div class="headband"></div>下面

7.修改文章底部的那个带#号的标签

No.2.png
  • 打开themes/next/layout/_macro/下的post.swig文件,搜索rel="tag">#,将 # 换成<i class="fa fa-tag"></i>
<div class="post-tags">
    {% for tag in post.tags %}
       <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
    {% endfor %}
</div>

8.添加顶部加载条

  • 打开themes/next下的_config.yml,搜索关键字pace,设置为true,可以更换加载样式
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #替换更换样式

9.本地搜索

search.png
  • 在你站点的根目录下
$ npm install hexo-generator-searchdb --save
  • 打开Hexo 站点_config.yml,添加配置
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • 打开themes/next下的_config.yml,搜索关键字local_search,设置为true
# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

10.修改网页底部

heart.png
10.1在图标库中找到你自己喜欢的图标, 修改桃心,打开themes/next下的_config.yml,搜索关键字authoricon,替换图标名
# icon between year and author @Footer
authoricon: id-card
10.2隐藏网页底部Hexo 强力驱动
  • 打开主题配置文件,搜索关键字copyright,如下:
# Footer `powered-by` and `theme-info` copyright
copyright: false

Hexo-Next-主题优化(一)
Hexo-Next-主题优化(三)
Hexo-Next-主题优化(四)

推荐阅读更多精彩内容