Fork me on GitHub

Next主题添加酷炫特效

发表于 | 分类于 | 本文阅读 次
字数统计: 2.1k 字 | 阅读时长 ≈ 9 分钟

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

实现效果图

展示效果

实现方法

点击 图标地址 或者 字体地址 挑选自己喜欢的样式，并复制代码。 例如，我是复制如下代码：
图标
图标
然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中放在 <div class=”headband”></div>后面

1
2
3
<div class="headband"></div>
<a href="https://github.com/lushunde321"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
</head>

并把href改为你的github地址

2.添加动态背景

实现效果
四种类型选择其一即可

1
2
3
4
5
6
7
8
9
10
11
# Canvas-nest
canvas_nest: true

# three_waves
three_waves: false

# canvas_lines
canvas_lines: false

# canvas_sphere
canvas_sphere: false

3.修改文章内链接文本样式

实现效果图

实现效果

具体实现方法

修改文件 themes\next\source\css_common\components\post\post.styl，在末尾添加如下css样式，：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #3385FF;
  border-bottom: none;
  border-bottom: 1px solid #3385FF;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其中选择.post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

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

实现效果图
原来->
实现->

具体实现方法
修改模板/themes/next/layout/_macro/post.swig，359行 搜索 rel=”tag”>#，将 # 换成以下代码

1
<i class="fa fa-tag"></i>

5.在每篇文章末尾统一添加“本文结束”标记

实现效果图

s

具体实现方法

在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">------本文结束  感谢阅读------</div>
    {% endif %}
</div>

接着打开\themes\next\layout_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画代码（post-footer之前三个DIV）：
代码如下：

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件（_config.yml),在末尾添加：

文章末尾添加“本文结束”标记

1
2
passage_end_tag:
  enabled: true

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

6.修改作者头像并旋转

实现效果图：

具体实现方法

打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

7.主页文章添加阴影效果

实现效果图
无阴影
有阴影

具体实现方法
打开\themes\next\source\css_custom\custom.styl,向里面加入：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   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);
  }

8.网站字数统计 文章字数、阅读时间、全站底部字数统计

实现效果

单篇文章统计效果

底部全站字数统计效果

配置文件插件开启

NexT 主题默认已经集成了文章【字数统计】【阅读时长】统计功能，如果我们需要使用，只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可。如下所示：

1
2
3
4
5
6
post_wordcount:
  item_text: true
  wordcount: true         # 单篇文章 字数统计
  min2read: true          # 单篇文章 阅读时长
  totalcount: true       # 网站底部 字数统计
  separated_meta: true

安装插件 hexo-wordcount 插件

1
npm i --save hexo-wordcount

修改 themes\next\layout_macro\post.swig 中

  • 搜索 wordcount(post.content) 添加单位，单篇文章字数统计添加单位

    1
    2
    3
    <span title="{{ __('post.wordcount') }}">
      {{ wordcount(post.content) }} 字
    </span>

  • 搜索 min2read(post.content) 添加单位，单篇文章阅读时间添加单位

    1
    2
    3
    <span title="{{ __('post.min2read') }}">
      {{ min2read(post.content) }} 分钟
    </span>
  • 文章底部添加如下代码
    1
    2
    3
    4
    <div class="theme-info">
      <div class="with-love"><i class="fa fa-file-word-o"></i></div>
      <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
    </div>

9.添加 README.md 文件

每个项目下一般都有一个 README.md 文件，但是使用 hexo 部署到仓库后，项目下是没有 README.md 文件的。

在 Hexo 目录下的 source 根目录下添加一个 README.md 文件，修改站点配置文件 _config.yml，将 skip_render 参数的值设置为

1
skip_render: README.md

保存退出即可。再次使用 hexo d 命令部署博客的时候就不会在渲染 README.md 这个文件了。

10.隐藏网页底部powered By Hexo / 强力驱动

效果展示

原来->

实现->

打开themes/next/layout/_partials/footer.swig,隐藏之间的代码即可，或者直接删除。位置如图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!-- 隐藏底部的代码
  {% if theme.post_wordcount.totalcount %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    {% if theme.post_wordcount.item_text %}
      <span class="post-meta-item-text">{{ __('post.totalcount') }}&#58;</span>
    {% endif %}
    <span title="{{ __('post.totalcount') }}">{#
    #}{{ totalcount(site, '0,0.0a') }}{#
  #}</span>
  {% endif %}
</div>


 {% if theme.footer.powered %}
  <div class="powered-by">{#
  #}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}

{% if theme.footer.powered and theme.footer.theme.enable %}
  <span class="post-meta-divider">|</span>
{% endif %}

{% if theme.footer.theme.enable %}
  <div class="theme-info">{#
  #}{{ __('footer.theme') }} &mdash; {#
  #}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
    #}NexT.{{ theme.scheme }}{#
  #}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.custom_text %}
  <div class="footer-custom">{#
  #}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
文章底部结束 -->

11.文章加密访问

实现效果图

具体实现方法

打开themes->next->layout->_partials->head.swig文件,在开始meta后面位置（第5行左右）插入这样一段代码：
代码如下：

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

然后在文章上写成类似这样：

1
2
3
4
5
6
7
---
title: Next主题添加酷炫特效
date: 2018-03-18 02:54:47
categories: github
tags: Next 
password: 123
---

12. 不蒜子统计 由 panzhitian 贡献

效果


编辑 主题配置文件 中的busuanzi_count的配置项。

注意： 此特性在版本 5.0.1 中引入，要使用此功能请确保所使用的 NexT 版本在此之后
当enable: true时，代表开启全局开关。若site_uv、site_pv、page_pv的值均为false时，不蒜子仅作记录而不会在页面上显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # 启用统计
  enable: true
  # 网站底部显示
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 本站访客
  site_uv_footer: 人次
  # 网站底部显示
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 本站访问
  site_pv_footer: 次
  # 文章顶部显示
  page_pv: true
  page_pv_header: <i class="fa fa-eye"></i> 本文阅读
  page_pv_footer: 次

------本文结束 感谢阅读------
鲁顺德 wechat
欢迎您扫一扫上面的微信公众号，订阅我的分享资源！
坚持原创技术分享，您的支持将鼓励我继续创作！
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多