hexo博客的背景设置_hexo鼠标指针插件-程序员宅基地

技术标签： java

主要有以下30种：

在右上角或者左上角实现fork me on github
添加RSS
添加动态背景
实现点击出现桃心效果
修改文章内链接文本样式
修改文章底部的那个带#号的标签
在每篇文章末尾统一添加“本文结束”标记
修改作者头像并旋转
博文压缩
修改“代码块自定义样式
侧边栏社交小图标设置
主页文章添加阴影效果
在网站底部加上访问量
添加热度
网站底部字数统计
添加 README.md 文件
设置网站的图标Favicon
实现统计功能
添加顶部加载条
在文章底部增加版权信息
添加网易云跟帖(跟帖关闭，已失效，改为来必力)
隐藏网页底部powered By Hexo / 强力驱动
修改网页底部的桃心
文章加密访问
添加jiathis分享
博文置顶
修改字体大小
修改打赏字体不闪动
侧边栏推荐阅读
自定义鼠标样式

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

实现效果图

具体实现方法

点击这里挑选自己喜欢的样式，并复制代码。例如，我是复制如下代码：

然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<div class="headband"></div>的下面)，并把href改为你的github地址

2.添加RSS

实现效果图

具体实现方法

切换到你的blog（我是取名blog，具体的看你们的取名是什么）的路径，例如我是在/Users/chenzekun/Code/Hexo/blog这个路径上，也就是在你的根目录下

然后安装 Hexo 插件：(这个插件会放在node_modules这个文件夹里)

$ npm install --save hexo-generator-feed
 
 
  
   1
  
 
 
  
   1

接下来打开画红线的文件，如下图：

在里面的末尾添加：(请注意在冒号后面要加一个空格，不然会发生错误！)

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
 
 
  
   1
   2
   3
  
 
 
  
   1
   2
   3

然后打开next主题文件夹里面的_config.yml,在里面配置为如下样子：(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml
 
 
  
   1
   2
   3
   4
  
 
 
  
   1
   2
   3
   4

配置完之后运行：

重新生成一次，你会在./public 文件夹中看到 atom.xml 文件。然后启动服务器查看是否有效，之后再部署到 Github 中。

3. 添加动态背景

实现效果图

具体实现方法

这个我之前有一篇文章有讲过了，详情点击我的博客

4. 实现点击出现桃心效果

实现效果图

具体实现方法

在网址输入如下

http://7u2ss1.com1.z0.glb.clouddn.com/love.js
 
 
  
   1
  
 
 
  
   1

然后将里面的代码copy一下，新建love.js文件并且将代码复制进去，然后保存。将love.js文件放到路径/themes/next/source/js/src里面，然后打开\themes\next\layout\_layout.swig文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：

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

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

实现效果图

具体实现方法

修改文件 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;
  }
}
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11

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

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

实现效果图

具体实现方法

修改模板/themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成<i class="fa fa-tag"></i>

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

实现效果图

具体实现方法

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

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

接着打开\themes\next\layout\_macro\post.swig文件，在post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：

代码如下：

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

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

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true
 
 
  
   1
   2
   3
  
 
 
  
   1
   2
   3

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

8. 修改作者头像并旋转

实现效果图

具体实现方法

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

.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
   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
  
 
 
  
   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

9. 博文压缩

在站点的根目录下执行以下命令：

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

 
 
  
   1
   2
   3
  
 
 
  
   1
   2
   3

在如下图所示，新建 gulpfile.js ，并填入以下内容：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
    
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);
 
 
  
   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
  
 
 
  
   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

生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。

10. 修改“代码块自定义样式

实现效果图

具体实现方法

打开\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;
}
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

11. 侧边栏社交小图标设置

实现效果图

具体实现方法

打开主题配置文件（_config.yml），搜索social_icons:,在图标库找自己喜欢的小图标，并将名字复制在如下位置，保存即可

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

实现效果图

具体实现方法

打开\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);
  }
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8

13. 在网站底部加上访问量

实现效果图

具体实现方法
打开\themes\next\layout_partials\footer.swig文件,在copyright前加上画红线这句话：

代码如下：

<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 
 
  
   1
  
 
 
  
   1

然后再合适的位置添加显示统计的代码，如图：

代码如下：

<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>
 
 
  
   1
   2
   3
   4
   5
  
 
 
  
   1
   2
   3
   4
   5

在这里有两中不同计算方式的统计代码：
1. pv的方式，单个用户连续点击n篇文章，记录n次访问量

<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
 
 
  
   1
   2
   3
  
 
 
  
   1
   2
   3

uv的方式，单个用户连续点击n篇文章，只记录1次访客数

<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>
 
 
  
   1
   2
   3
  
 
 
  
   1
   2
   3

添加之后再执行hexo d -g，然后再刷新页面就能看到效果

14. 添加热度

实现效果图

具体实现方法

next主题集成leanCloud，打开/themes/next/layout/_macro/post.swig,在画红线的区域添加℃：

然后打开，/themes/next/languages/zh-Hans.yml,将画红框的改为热度就可以了

15. 网站底部字数统计

实现效果图

具体方法实现
切换到根目录下，然后运行如下代码

$ npm install hexo-wordcount --save
 
 
  
   1
  
 
 
  
   1

然后在/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
  
 
 
  
   1
   2
   3
   4

16. 添加 README.md 文件

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

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

skip_render: README.md
 
 
  
   1
  
 
 
  
   1

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

17. 设置网站的图标Favicon

实现效果图

具体方法实现

在EasyIcon中找一张（32*32）的ico图标,或者去别的网站下载或者制作，并将图标名称改为favicon.ico，然后把图标放在/themes/next/source/images里，并且修改主题配置文件：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /favicon.ico
 
 
  
   1
   2
  
 
 
  
   1
   2

18. 实现统计功能

实现效果图

具体实现方法

在根目录下安装 hexo-wordcount,运行：

$ npm install hexo-wordcount --save
 
 
  
   1
  
 
 
  
   1

然后在主题的配置文件中，配置如下：

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
 
 
  
   1
   2
   3
   4
   5
   6
  
 
 
  
   1
   2
   3
   4
   5
   6

19. 添加顶部加载条

实现效果图

具体实现方法

打开/themes/next/layout/_partials/head.swig文件，添加红框上的代码

代码如下：

<script src="//cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>
<link href="//cdn.bootcss.com/pace/1.0.2/themes/pink/pace-theme-flash.css" rel="stylesheet">
 
 
  
   1
   2
  
 
 
  
   1
   2

但是，默认的是粉色的，要改变颜色可以在/themes/next/layout/_partials/head.swig文件中添加如下代码（接在刚才link的后面）

<style>
    .pace .pace-progress {
        background: #1E92FB; /*进度条颜色*/
        height: 3px;
    }
    .pace .pace-progress-inner {
         box-shadow: 0 0 10px #1E92FB, 0 0 5px     #1E92FB; /*阴影颜色*/
    }
    .pace .pace-activity {
        border-top-color: #1E92FB;    /*上边框颜色*/
        border-left-color: #1E92FB;    /*左边框颜色*/
    }
</style>
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13

目前，博主的增加顶部加载条的pull request 已被Merge��===>详情
现在升级最新版的next主题，升级后只需修改主题配置文件(_config.yml)将pace: false改为pace: true就行了，你还可以换不同样式的加载条，如下图：

20. 在文章底部增加版权信息

实现效果图

在目录 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><a href="{
    { url_for(page.path) }}">{
    { page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {
    { theme.author }} 的个人博客">{
    { theme.author }}</a></p>
  <p><span>发布时间:</span>{
    { page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{
    { page.updated.format("YYYY年MM月DD日 - HH:MM") }}</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 %}
 
 
  
   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
  
 
 
  
   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

在目录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: #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;
}
 
 
  
   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
  
 
 
  
   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

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

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

之前添加增加如下代码：

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

如下：

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

@import "my-post-copyright"
 
 
  
   1
  
 
 
  
   1

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

小技巧：如果你觉得每次都要输入copyright: true很麻烦的话,那么在/scaffolds/post.md文件中添加：

这样每次hexo new "你的内容"之后，生成的md文件会自动把copyright:加到里面去
(注意：如果解析出来之后，你的原始链接有问题：如：http://yoursite.com/前端小项目：使用canvas绘画哆啦A梦.html,那么在根目录下_config.yml中写成类似这样：）
就行了。

21. 添加网易云跟帖(跟帖关闭，已失效，改为来必力)

实现效果图

具体方法实现
有两种实现方法：
①更新next主题，因为最新版本的主题已经支持这种评论。直接在主题配置文件_config.yml 文件中添加如下配置:

gentie_productKey: #your-gentie-product-key
 
 
  
   1
  
 
 
  
   1

②如果你不想更新的话，那么按下面步骤进行：
首先，还是在主题配置文件_config.yml 文件中添加如下配置:

gentie_productKey: #your-gentie-product-key
 
 
  
   1
  
 
 
  
   1

你的productKey就是下面画红线部分

然后在在layout/_scripts/third-party/comments/ 目录中添加 gentie.swig，文件内容如下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id %}
  {% if theme.gentie_productKey %}
    {% set gentie_productKey = theme.gentie_productKey %}
    <script>
      var cloudTieConfig = {
        url: document.location.href, 
        sourceId: "",
        productKey: "{
    {gentie_productKey}}",
        target: "cloud-tie-wrapper"
      };
    </script>
    <script src="https://img1.ws.126.net/f2e/tie/yun/sdk/loader.js"></script>
  {% endif %}
{% endif %}
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

然后在layout/_scripts/third-party/comments.swig文件中追加：

{% include './comments/gentie.swig' %}
 
 
  
   1
  
 
 
  
   1

最后，在 layout/_partials/comments.swig 文件中条件最后追加网易云跟帖插件引用的判断逻辑：

{% elseif theme.gentie_productKey %}
      <div id="cloud-tie-wrapper" class="cloud-tie-wrapper">
      </div>
 
 
  
   1
   2
   3
  
 
 
  
   1
   2
   3

具体位置如下：

可能你hexo s时可能看不到，直接hexo d就可以看到了

近日，我朋友发来消息，说网易云跟帖要关了，我网上查了一下，果然如此

��都是泪,上次用了多说，结果多说关了，接着是网易云跟帖��，这次直接用国外的来必力，应该不会这么容易关吧��

方法其实还是跟上面差不多的

首先在 _config.yml 文件中添加如下配置：

# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid
 
 
  
   1
   2
   3
  
 
 
  
   1
   2
   3

其中，livere_uid就是画红线的部分

然后在 layout/_scripts/third-party/comments/ 目录中添加 livere.swig，文件内容如下：

{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
  {% if theme.livere_uid %}
    <script type="text/javascript">
      (function(d, s) {
      
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  {% endif %}
{% endif %}
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

然后在 layout/_scripts/third-party/comments.swig文件中追加：

{% include './comments/livere.swig' %}
 
 
  
   1
  
 
 
  
   1

最后，在 layout/_partials/comments.swig 文件中条件最后追加 LiveRe 插件是否引用的判断逻辑：

{% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{
    { theme.livere_uid }}"></div>
{% endif %}
 
 
  
   1
   2
   3
  
 
 
  
   1
   2
   3

完

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

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

23. 修改网页底部的桃心

还是打开themes/next/layout/_partials/footer.swig，找到：
，然后还是在图标库中找到你自己喜欢的图标，然后修改画红线的部分就可以了。

24. 文章加密访问

实现效果图

具体实现方法

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

代码如下：

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

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

25. 添加jiathis分享

在主题配置文件中，jiathis为true，就行了，如下图

默认是这样子的：

如果你想自定义话，打开themes/next/layout/_partials/share/jiathis.swig修改画红线部分就可以了

26. 博文置顶

修改 hero-generator-index 插件，把文件：node_modules/hexo-generator-index/lib/generator.js 内的代码替换为：

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
    
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
    
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};
 
 
  
   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
  
 
 
  
   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

在文章中添加 top 值，数值越大文章越靠前，如

---
title: 解决Charles乱码问题
date: 2017-05-22 22:45:48
tags: 技巧
categories: 技巧
copyright: true
top: 100
---

 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9

27. 修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件，将$font-size-base改成16px，如下所示：

$font-size-base            =16px
 
 
  
   1
  
 
 
  
   1

28. 修改打赏字体不闪动

修改文件next/source/css/_common/components/post/post-reward.styl，然后注释其中的函数wechat:hover和alipay:hover，如下：

/* 注释文字闪动函数
 #wechat:hover p{
    animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
 #alipay:hover p{
   animation: roll 0.1s infinite linear;
    -webkit-animation: roll 0.1s infinite linear;
    -moz-animation: roll 0.1s infinite linear;
}
*/
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

29. 侧边栏推荐阅读

今天有位网友问推荐阅读是怎么弄，其实挺简单的，打开主题配置文件修改成这样就行了(links里面写你想要的链接):

# Blogrolls
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
  优设: http://www.uisdc.com/
  张鑫旭: http://www.zhangxinxu.com/
  Web前端导航: http://www.alloyteam.com/nav/
  前端书籍资料: http://www.36zhen.com/t?id=3448
  百度前端技术学院: http://ife.baidu.com/
  google前端开发基础: http://wf.uisdc.com/cn/

 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
  
 
 
  
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

30. 自定义鼠标样式

打开themes/next/source/css/_custom/custom.styl,在里面写下如下代码

// 鼠标样式
  * {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto!important
  }
  :active {
      cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto!important
  }
 
 
  
   1
   2
   3
   4
   5
   6
   7
  
 
 
  
   1
   2
   3
   4
   5
   6
   7

其中 url 里面必须是 ico 图片，ico 图片可以上传到网上（我是使用七牛云图床），然后获取外链，复制到 url 里就行了

致谢

感谢大神们的文章，真的学到了许多，有些忘了记录下来，在这里由衷的感谢。虽然比较折腾，但是确实满满的成就感，Road endless its long and far, I will seek up and down！

欢迎访问我的博客

参考的文章：

本文链接：https://blog.csdn.net/Com_ma/article/details/76039859

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

《ARPG游戏深度强化学习》序贯决策问题、完成ARPG世界里的游戏代码实践_游戏决策深度学习代码-程序员宅基地

文章浏览阅读1.1k次。序贯决策问题图示：马尔科夫决策过程序贯决策，主要的方法是：马尔科夫决策过程。一个马尔可夫过程叫：MDP。一个MDP由一个五元组构成：S A P R rS 是所有状态的集合A 是所有动作的集合P 是某状态S’在某A‘动作下的转移概率策略P就是在状态S下做A的概率多大。R 是奖励r 是回报有时候也用G标示（gain）当前状态，当前要做的动作，以及下一个状态，三者共同决定环境反馈给智能体，什么样的R（奖励），通常R是标量函数，返回一个标量，标量对应的向量_游戏决策深度学习代码

docker 容器中文乱码问题_docker run language-程序员宅基地

文章浏览阅读9k次。感觉应该算是个常见的问题。网上也找到了部分答案，不全，解决不了问题。经过多番寻找测试，终于搞定。1. 解决办法 Dockerfile 加入一下内容# 安装 en_US.UTF-8 并配置环境RUN locale-gen en_US.UTF-8ENV LANG en_US.UTF-8 ENV LANGUAGE en_US:en ENV LC_ALL en_US.UT_docker run language

android ut接口介绍,CMCC UT接口(IMS SS)规范说明-程序员宅基地

文章浏览阅读2.4k次。OverviewCMCC 关于 UT 部分的说明及规范请参考 "中国移动VoLTE终端技术规范" 中的第6节说明.写在前面: 由于 CMCC 的XCAP server(UT) 和 CS Server(HLR)暂不支持 SS 业务配置SYNC. 因此, 针对支持 UT 的卡, 以及所在城市提供 UT 服务, 则如果某项 SS 业务不支持通过 UT 配置,即便强制通过 CS 配置成功(CMCC有说明..._ut接口

mapbox加载本地白膜数据——带高度建筑白膜制作_mapbox加载白模-程序员宅基地

文章浏览阅读4k次。制作带高度的白膜数据（这步可能非必须）这步骤应该不需要处理，直接把带有高度的shp发布到geoserver中即可，mapbox代码中指定下高度字段，mapbox会自动创建白膜高度，时间问题，没有测试，以后测试了我再更新，啧啧，是个偷懒的好借口，哈哈首先水经注可以下载带高度的建筑物面数据，得到shp后，可以在arcscene中处理，按照带有的高度值进行拉高处理。选择合适的比例计算值，直接用高度值的话拉伸太高，可以选择输入：[heightnum]*3*0.00001之类的进行比..._mapbox加载白模

计算机网络管理员(三级)理论A卷-含答案【9A文】-程序员宅基地

文章浏览阅读316次。【9A文】计算机网络管理员(三级)理论鉴定试题A-含答案【MeiWei_81重点借鉴文档】【MeiWei_81重点借鉴文档】计算机网络管理员(三级)理论鉴定试题A 注意事项 1、考试时间：90分钟。 2、请在试卷标封处填写姓名、准考证号和所在单位的名称。 3、请仔细阅读答题要求，把答案填写到答案卷，否则以零分计。一、单项选择题(第1题～第40题。选择一个正确的答案，将相应的..._三级理论性理论a在线

【转】MBIST总结-程序员宅基地

文章浏览阅读1w次，点赞16次，收藏167次。2. MBIST的插入阶段：用工具插入Mbist时，我们既可以在RTL代码插入，也可以在netlist里面插入。目前，常见的做法是在netlist插入。但是，由于插入的Mbist逻辑是RTL代码，这样如果在netlist里面插入的话，我们还需要再进行一次综合。如果在RTL代码中直接插入Mbist，则只需要综合一次。为什么现在都推荐在netlist里面插入Mbist，而不是在RTL插入呢？回答1：综合通常是针对unit来做的，而布局布线通常针对partion，而mbist逻辑会涉及到很多个uni._mbist

随便推点

关于oracle 数据库关闭问题_unable to retrieve oracle clus-程序员宅基地

文章浏览阅读508次。今天准备使用本地数据库创建一个新用户（创建表也是）时报数据库未打开，可是去计算机-右键-管理- 发现监听程序（oracleserviceORCL,oracleOraDb11g_home1TNSListener）等都已经启动了，而且我登录进去了呀，怎么会没打开数据库呢？？？于是百度了，结果发现大家说的都一样。。。真是无语了，最重要我按照步骤做了，可是一到最后一步 alter database o_unable to retrieve oracle clus

（二十八）ArcGIS空间数据的转换与处理——数据结构转换_arcgis空间数据转换与处理-程序员宅基地

文章浏览阅读3.2k次。ArcGIS数据结构转换。_arcgis空间数据转换与处理

关于Java的java.library.path-程序员宅基地

文章浏览阅读4k次。java可以通过System.getProperty获得系统变量的值。而java.library.path只是其中的一个，表示系统搜索库文件的路径。例如这个值可以能是 c;\windows;d:\test;e:\mytest 那当你在程序中装载一个dll库时，系统就是去当前目录和这几个目录找看看有没有这个文件。因此通过jni机制来调用dll时，只要把该dll文件拷到当前目录和这..._java library path作用

数字IC设计流程与工具_ic618 生成netlist文件-程序员宅基地

文章浏览阅读358次。IC设计和制造的整体流程，是的，这个过程包含了从初步架构设计到最终制造的多个关键步骤。每一步都至关重要，确保芯片设计满足特定的性能、功耗和成本要求。整个流程要求工程师之间有高度的协作和多个迭代，因为从设计到制造涉及众多的工程和科学原则，任何阶段的错误都可能导致产品失败。因此，从架构设计到最终产品测试，严格的质量控制和验证步骤是整个流程的重要组成部分。_ic618 生成netlist文件

Python+Django毕业设计校园网上二手交易系统（程序+LW+部署）_需求分析基于python的校园二手-程序员宅基地

文章浏览阅读598次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：SSM + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。_需求分析基于python的校园二手

刚入算法时候自己的胡乱整理-javaAPI，JDKAPI，算法常用javaAPI，算法常用工具类-程序员宅基地

文章浏览阅读672次，点赞14次，收藏29次。算法第一步：先学API实在是太多了，我刷了一百道左右，整理出来了里边用到的java中的API如下，有点乱，但是用的时候可以control+f进行搜索，当然这也是我的一个简化版本的API