Hexo | 个性化设置 | The Wandering Cat's Mind Palace

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

添加RSS

添加动态粒子背景

主要是使用canvas-nest.js
下载地址：https://github.com/hustcc/canvas-nest.js

目前NexT主题最新的是V6.0版本，这个版本中可以有4种动态背景：
Canvas-nest
three_waves
canvas_lines
canvas_sphere

点击鼠标出现桃心效果

将love.js文件放到路径/themes/next/source/js/src里面，
然后打开\themes\next\layout_layout.swig文件,在末尾（在前面引用会出现找不到的bug）
添加以下代码：

1 2	<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/love.js"></script>

修改文章内链接文本样式

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

// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;

去掉文章后面的标签前面的#号

修改模板
/themes/next/layout/_macro/post.swig，搜索 rel=”tag”>#，将 # 换成

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

修改作者头像并旋转

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

Code


.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);
  }
}

在网站底部加上访问量

网站底部字数统计和时间统计

文字统计切换到根目录下，然后运行如下代码

1	$ npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：


<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>
1
2
3
4
时间统计在根目录下安装 hexo-wordcount,运行：

$ npm install hexo-wordcount --save
1
然后在主题的配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: true

在文章底部增加版权信息

在目录next/layout/_macro/下添加my-copyright.swig：

Code

1
2
3

在目录next/source/css/_common/components/post/下添加my-post-copyright.styl：

Code


.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: #b5b5b5;
  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: #a3d2a3;
  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;
}

修改next/layout/_macro/post.swig，在代码

<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

@import “my-post-copyright”

保存重新生成即可。如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

---
title: 前端小项目：使用canvas绘画哆啦A梦
date: 2017-05-22 22:53:53
tags: canvas
categories: 前端
copyright: true
---

在文章末尾添加打赏二维码

修改主题配置文件, 收款二维码放在themes\next\source\images 目录下

# Donate 文章末尾显示打赏按钮
reward_comment: 如果文章对您有用请随意打赏，谢谢支持！
wechatpay: /images/w.png
alipay: /images/z.jpg

文章加密访问

打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码：

<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

然后写文章的时候，在文章开始添加password选项

主页文章加阴影

打开\themes\next\source\css_custom\custom.styl,向里面加入：

// 主页文章添加阴影效果
.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);
}

添加热度

具体实现方法
next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig

在<span class="leancloud-visitors-count"></span>下添加一句：

1	<span>℃</span>

然后打开/themes/next/languages/zh-Hans.yml

将visitors: 阅读次数改为visitors: 热度

设置文章浏览数（热度）

首先需要在leancloud上注册一个账号，注册的过程省略。
点击访问控制台
点击创建应用
这里选择开发版就行，应用名称随意。
随后进入设置界面
随后在主题文件的languages目录下找到你设置的语言yml下，把visitors后面的字符改为热度，到此大功告成。

设置网站图标

默认的网站图标是一个N，当然是需要制定一个图了，在网上找到图后，将其放在/themes/next/source/images里面，然后在主题配置文件中修改下图所示图片位置,大概是在favicon附近。

在导航栏新增一个导航

在导航栏新增一个名为github的导航

1	hexo new page "github"

这个指令会在source目录创建一个github的文件夹,并在文件夹中创建一个index.md的文件

修改主题的配置文件themes/_config.yml,增加一个导航

menu:
  - page: home
    directory: .
    icon: fa-home
  - page: archive
    directory: archives/
    icon: fa-archive
  - page: about
    directory: about/
    icon: fa-user
  - page: github
    directory: github/
    icon: fa-github-alt
  - page: rss
    directory: atom.xml
    icon: fa-rss

如果你对标签页的小图标不满意,也可以自己定义,这个图标其实是一种字体,在fontawesome.io 这个网站可以找到你满意的图标。
修改方法就是替换icon: 后面的内容

清理后启动以查看效果

1 2	hexo clean hexo s --debug

修改字体和大小

修改hexo\themes\next\source\css_variables下的base.styl文件

创建分类

创建标签

Reference

w_ngzeqi
DimpleMe