https:blog.csdn.netqq_33699981articledetails72716951

24天前 阅读 19 评论 0 赞 0

看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果

主要有以下32种:

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

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这个文件夹里)

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

接下来打开画红线的文件,如下图:

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

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

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

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

配置完之后运行:

  1. $ hexo g

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


3. 添加动态背景

实现效果图

具体实现方法

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


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

实现效果图

具体实现方法

在网址输入如下

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

然后将里面的代码copy一下,新建love.js文件并且将代码复制进去,然后保存。将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>

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

实现效果图

具体实现方法

修改文件 themes\next\source\css\_common\components\post\post.styl,在末尾添加如下css样式,:

  1. // 文章内链接文本样式
  2. .post-body p a{
  3. color: #0593d3;
  4. border-bottom: none;
  5. border-bottom: 1px solid #0593d3;
  6. &:hover {
  7. color: #fc6423;
  8. border-bottom: none;
  9. border-bottom: 1px solid #fc6423;
  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 文件,并添加以下内容:

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

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

代码如下:

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

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

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

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


8. 修改作者头像并旋转:

实现效果图:

具体实现方法

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

  1. .site-author-image {
  2. display: block;
  3. margin: 0 auto;
  4. padding: $site-author-image-padding;
  5. max-width: $site-author-image-width;
  6. height: $site-author-image-height;
  7. border: $site-author-image-border-width solid $site-author-image-border-color;
  8. /* 头像圆形 */
  9. border-radius: 80px;
  10. -webkit-border-radius: 80px;
  11. -moz-border-radius: 80px;
  12. box-shadow: inset 0 -1px 0 #333sf;
  13. /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
  14. (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  15. /* 鼠标经过头像旋转360度 */
  16. -webkit-transition: -webkit-transform 1.0s ease-out;
  17. -moz-transition: -moz-transform 1.0s ease-out;
  18. transition: transform 1.0s ease-out;
  19. }
  20. img:hover {
  21. /* 鼠标经过停止头像旋转
  22. -webkit-animation-play-state:paused;
  23. animation-play-state:paused;*/
  24. /* 鼠标经过头像旋转360度 */
  25. -webkit-transform: rotateZ(360deg);
  26. -moz-transform: rotateZ(360deg);
  27. transform: rotateZ(360deg);
  28. }
  29. /* Z 轴旋转动画 */
  30. @-webkit-keyframes play {
  31. 0% {
  32. -webkit-transform: rotateZ(0deg);
  33. }
  34. 100% {
  35. -webkit-transform: rotateZ(-360deg);
  36. }
  37. }
  38. @-moz-keyframes play {
  39. 0% {
  40. -moz-transform: rotateZ(0deg);
  41. }
  42. 100% {
  43. -moz-transform: rotateZ(-360deg);
  44. }
  45. }
  46. @keyframes play {
  47. 0% {
  48. transform: rotateZ(0deg);
  49. }
  50. 100% {
  51. transform: rotateZ(-360deg);
  52. }
  53. }

9. 博文压缩

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

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

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

  1. var gulp = require('gulp');
  2. var minifycss = require('gulp-minify-css');
  3. var uglify = require('gulp-uglify');
  4. var htmlmin = require('gulp-htmlmin');
  5. var htmlclean = require('gulp-htmlclean');
  6. // 压缩 public 目录 css
  7. gulp.task('minify-css', function() {
  8. return gulp.src('./public/**/*.css')
  9. .pipe(minifycss())
  10. .pipe(gulp.dest('./public'));
  11. });
  12. // 压缩 public 目录 html
  13. gulp.task('minify-html', function() {
  14. return gulp.src('./public/**/*.html')
  15. .pipe(htmlclean())
  16. .pipe(htmlmin({
  17. removeComments: true,
  18. minifyJS: true,
  19. minifyCSS: true,
  20. minifyURLs: true,
  21. }))
  22. .pipe(gulp.dest('./public'))
  23. });
  24. // 压缩 public/js 目录 js
  25. gulp.task('minify-js', function() {
  26. return gulp.src('./public/**/*.js')
  27. .pipe(uglify())
  28. .pipe(gulp.dest('./public'));
  29. });
  30. // 执行 gulp 命令时执行的任务
  31. gulp.task('default', [
  32. 'minify-html','minify-css','minify-js'
  33. ]);

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


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

实现效果图

具体实现方法

打开\themes\next\source\css\_custom\custom.styl,向里面加入:(颜色可以自己定义)

  1. // Custom styles.
  2. code {
  3. color: #ff7600;
  4. background: #fbf7f8;
  5. margin: 2px;
  6. }
  7. // 大代码块的自定义样式
  8. .highlight, pre {
  9. margin: 5px 0;
  10. padding: 5px;
  11. border-radius: 3px;
  12. }
  13. .highlight, code, pre {
  14. border: 1px solid #d6d6d6;
  15. }

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

实现效果图

具体实现方法

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


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

实现效果图

具体实现方法

打开\themes\next\source\css\_custom\custom.styl,向里面加入:

  1. // 主页文章添加阴影效果
  2. .post {
  3. margin-top: 60px;
  4. margin-bottom: 60px;
  5. padding: 25px;
  6. -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  7. -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  8. }

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

实现效果图

具体实现方法

打开\themes\next\layout\_partials\footer.swig文件,在copyright前加上画红线这句话:

代码如下:

  1. <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

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

代码如下:

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

在这里有两中不同计算方式的统计代码:

  1. pv的方式,单个用户连续点击n篇文章,记录n次访问量
  1. <span id="busuanzi_container_site_pv">
  2. 本站总访问量<span id="busuanzi_value_site_pv"></span>
  3. </span>
  1. uv的方式,单个用户连续点击n篇文章,只记录1次访客数
  1. <span id="busuanzi_container_site_uv">
  2. 本站总访问量<span id="busuanzi_value_site_uv"></span>
  3. </span>

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


14. 添加热度

实现效果图:

具体实现方法

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

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


15. 网站底部字数统计

###实现效果图

具体方法实现

切换到根目录下,然后运行如下代码

  1. $ npm install hexo-wordcount --save

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

  1. <div class="theme-info">
  2. <div class="powered-by"></div>
  3. <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
  4. </div>

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

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

  1. skip_render: README.md

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


17. 设置网站的图标Favicon

实现效果图

具体方法实现

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

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

18. 实现统计功能

实现效果图

具体实现方法

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

  1. $ npm install hexo-wordcount --save

然后在主题的配置文件中,配置如下:

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

19. 添加顶部加载条

实现效果图

具体实现方法

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

代码如下:

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

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

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

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


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

实现效果图

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

  1. {% if page.copyright %}
  2. <div class="my_post_copyright">
  3. <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  4. <!-- JS sweetalert 可修改路径 -->
  5. <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  6. <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  7. <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  8. <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  9. <p><span>发布时间:</span>{{ page.date.format("YYYYMMDD - HH:MM") }}</p>
  10. <p><span>最后更新:</span>{{ page.updated.format("YYYYMMDD - HH:MM") }}</p>
  11. <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
  12. <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}" aria-label="复制成功!"></i></span>
  13. </p>
  14. <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>
  15. </div>
  16. <script>
  17. var clipboard = new Clipboard('.fa-clipboard');
  18. $(".fa-clipboard").click(function(){
  19. clipboard.on('success', function(){
  20. swal({
  21. title: "",
  22. text: '复制成功',
  23. icon: "success",
  24. showConfirmButton: true
  25. });
  26. });
  27. });
  28. </script>
  29. {% endif %}

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

  1. .my_post_copyright {
  2. width: 85%;
  3. max-width: 45em;
  4. margin: 2.8em auto 0;
  5. padding: 0.5em 1.0em;
  6. border: 1px solid #d3d3d3;
  7. font-size: 0.93rem;
  8. line-height: 1.6em;
  9. word-break: break-all;
  10. background: rgba(255,255,255,0.4);
  11. }
  12. .my_post_copyright p{margin:0;}
  13. .my_post_copyright span {
  14. display: inline-block;
  15. width: 5.2em;
  16. color: #b5b5b5;
  17. font-weight: bold;
  18. }
  19. .my_post_copyright .raw {
  20. margin-left: 1em;
  21. width: 5em;
  22. }
  23. .my_post_copyright a {
  24. color: #808080;
  25. border-bottom:0;
  26. }
  27. .my_post_copyright a:hover {
  28. color: #a3d2a3;
  29. text-decoration: underline;
  30. }
  31. .my_post_copyright:hover .fa-clipboard {
  32. color: #000;
  33. }
  34. .my_post_copyright .post-url:hover {
  35. font-weight: normal;
  36. }
  37. .my_post_copyright .copy-path {
  38. margin-left: 1em;
  39. width: 1em;
  40. +mobile(){display:none;}
  41. }
  42. .my_post_copyright .copy-path:hover {
  43. color: #808080;
  44. cursor: pointer;
  45. }

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

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

之前添加增加如下代码:

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

如下:

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

  1. @import "my-post-copyright"

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

  1. ---
  2. title: 前端小项目:使用canvas绘画哆啦A
  3. date: 2017-05-22 22:53:53
  4. tags: canvas
  5. categories: 前端
  6. copyright: true
  7. ---

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

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


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

实现效果图

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

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

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

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

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

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

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

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

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

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

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

具体位置如下:

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


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

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

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

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

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

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

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

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

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

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

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

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


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

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


23. 修改网页底部的桃心

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


24. 文章加密访问

实现效果图

具体实现方法

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

代码如下:

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

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


25. 添加jiathis分享

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

默认是这样子的:

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


26. 博文置顶

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

  1. 'use strict';
  2. var pagination = require('hexo-pagination');
  3. module.exports = function(locals){
  4. var config = this.config;
  5. var posts = locals.posts;
  6. posts.data = posts.data.sort(function(a, b) {
  7. if(a.top && b.top) { // 两篇文章top都有定义
  8. if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
  9. else return b.top - a.top; // 否则按照top值降序排
  10. }
  11. else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
  12. return -1;
  13. }
  14. else if(!a.top && b.top) {
  15. return 1;
  16. }
  17. else return b.date - a.date; // 都没定义按照文章日期降序排
  18. });
  19. var paginationDir = config.pagination_dir || 'page';
  20. return pagination('', posts, {
  21. perPage: config.index_generator.per_page,
  22. layout: ['index', 'archive'],
  23. format: paginationDir + '/%d/',
  24. data: {
  25. __index: true
  26. }
  27. });
  28. };

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

  1. ---
  2. title: 解决Charles乱码问题
  3. date: 2017-05-22 22:45:48
  4. tags: 技巧
  5. categories: 技巧
  6. copyright: true
  7. top: 100
  8. ---

27. 修改字体大小

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

  1. $font-size-base =16px

28. 修改打赏字体不闪动

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

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

29. 自定义鼠标样式

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

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

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


30.为博客加上萌萌的宠物

实现效果图

具体实现方法
在终端切换到你的博客的路径里,然后输入如下代码:

  1. npm install -save hexo-helper-live2d

然后打开Hexo/blog/themes/next/layout
_layout.swig,将下面代码放到</body>之前:

  1. {{ live2d() }}

然后在在 hexo_config.yml中添加参数:

  1. live2d:
  2. model: wanko
  3. bottom: -30

然后hexo clean ,hexo g ,hexo d 就可以看到了。

下面是一些model,可以换不同的宠物

  • model 模型名称 默认值: z16
    • Gantzert_Felixander
    • Epsilon2.1
    • haru
    • miku
    • ni-j
    • nico
    • nito
    • nipsilon
    • nietzsche
    • shizuku
    • tsumiki
    • wanko
    • z16
    • hibiki
    • koharu
    • haruto
    • Unitychan
    • tororo
    • hijiki
  • width 宽度 默认值: 150
  • height 高度 默认值: 300
  • className <canvas>元素的类名 默认值: live2d
  • id <canvas> 元素的id 默认值: live2dcanvas
  • bottom <canvas> 元素的底部偏移 默认值: -20 如果嫌模型位置不正确 可以调整这个参数

用这个有缺点,如果是在手机上看的话,感觉不是很好,宠物一直挡着文字,还有就是加载有点慢

(感谢Layne网友的提醒,目前手机上显示宠物的问题已经解决,如果不想在手机上显示宠物的话,修改主题配置文件,改为如下:)

  1. live2d:
  2. model: wanko
  3. bottom: -30
  4. mobileShow: false

注意!如果你在 hexo d 的时候出现我下面这个问题

你可以这样,首先删除hexo 下面的.deploy_git文件夹,然后运行

  1. git config --global core.autocrlf false

重新 hexo clean,hexo g,hexo d就行了


31.DaoVoice 在线联系

实现效果图

具体实现方法

首先在 daovoice 注册账号,邀请码0f81ff2f,注册完成后会得到一个 app_id :


,记下这个 app_id的值,然后打开/themes/next/layout/_partials/head.swig,写下如下代码:

  1. {% if theme.daovoice %}
  2. <script>
  3. (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
  4. daovoice('init', {
  5. app_id: "{{theme.daovoice_app_id}}"
  6. });
  7. daovoice('update');
  8. </script>
  9. {% endif %}

接着打开主题配置文件,在最后写下如下代码:

  1. # Online contact
  2. daovoice: true
  3. daovoice_app_id: 这里填你的刚才获得的 app_id

重新 hexo g ,hexo s 就能看到效果了。

安装成功后可以在DaoVoice 控制台上的聊天设置里设置聊天窗口样式,附上我的设置


33.点击爆炸效果

实现效果图

实现方法

跟那个红心是差不多的,首先在themes/next/source/js/src里面建一个叫fireworks.js的文件,代码如下:

  1. "use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};

打开themes/next/layout/_layout.swig,在</body>上面写下如下代码:

  1. {% if theme.fireworks %}
  2. <canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
  3. <script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
  4. <script type="text/javascript" src="/js/src/fireworks.js"></script>
  5. {% endif %}

打开主题配置文件,在里面最后写下:

  1. # Fireworks
  2. fireworks: true


致谢

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

欢迎访问我的博客


参考的文章:

  1. http://blog.csdn.net/MasterAnt_D/article/details/56839222
  2. http://zidingyi4qh.com/2017/04/27/NexT底部logo添加访问量/
  3. https://fuyis.me/2017/01/25/Hexo-theme-next-and-optimized-configuration/
  4. http://www.vitah.net/posts/20f300cc/
  5. http://thief.one/2017/03/03/Hexo搭建博客教程/
  6. https://chanshiyu.com/2017/11/24/变形记 ● NexT主题美化/

你的支持将鼓励作者继续创作

评论(0)

(无)