【Hexo】全面改造属于你的个性化博客(下)

简介: 【Hexo】全面改造属于你的个性化博客(下)
  • themes/你选择的主题/layout/layout.ejs 下添加:


<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/firework.js"></script>
复制代码


  • 效果如下


image.png


三 添加网站运行时间


  1. 记录网站运行时间在页脚显示,所以在 themes/你选择的主题/layout/_partial/footer.ejs 下添加:


<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt = new Date("08/10/2018 17:38:00"); //在此处修改你的建站时间
        now.setTime(now.getTime() + 250);
        days = (now - grt) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt) / 1000 / 60 / 60 - 24 * dnum;
        hnum = Math.floor(hours);
        if (String(hnum).length == 1) {
            hnum = "0" + hnum;
        }
        minutes = (now - grt) / 1000 / 60 - 24 * 60 * dnum - 60 * hnum;
        mnum = Math.floor(minutes);
        if (String(mnum).length == 1) {
            mnum = "0" + mnum;
        }
        seconds = (now - grt) / 1000 - 24 * 60 * 60 * dnum - 60 * 60 * hnum - 60 * mnum;
        snum = Math.round(seconds);
        if (String(snum).length == 1) {
            snum = "0" + snum;
        }
        document.getElementById("timeDate").innerHTML =
            "本站已运行 " + dnum + " 天 ";
        document.getElementById("times").innerHTML =
            hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }
    setInterval("createtime()", 250);
</script>
复制代码


  1. 效果如下:


image.png


四 添加浏览器标题恶搞



  1. 在用户切换标签页的时候,更改浏览器标题呼唤用户回归,在 themes/你选择的主题/source/js 下新建文件 funny.js ,添加:


var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/funny.ico");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好啦 ~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});
复制代码


  1. 其中的 favicon.ico 为正常显示图标,funny.ico 为用户切换后的图标,需要你自己设置🙈


五 添加动态诗词



  1. 采用的是今日诗词,每次返回一句诗词,根据时间、地点、天气、事件智能推荐。官网 API 文档,在 themes/你选择的主题/layout/_partial/head.ejs 添加下面的一行代码:


<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
复制代码
  1. 如果不成功,请将主题配置文件subtitle的值为false🙈


六 添加动态科技线条背景



  1. themes/你选择的主题/layout/layout.ejs文件中添加:


<!--动态线条背景-->
<script type="text/javascript"
color="122 103 238" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>
复制代码
  1. color表示线条颜色,opactity表示线条透明度,count表示线条总数量,都可自己修改~


七 添加雪花飘落效果


  1. themes/你选择的主题/source/js下新建文件snow.js,添加:


(function($){
  $.fn.snow = function(options){
  var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
  documentHeight  = $(document).height(),
  documentWidth = $(document).width(),
  defaults = {
    minSize   : 10,
    maxSize   : 20,
    newOn   : 1000,
    flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
  },
  options = $.extend({}, defaults, options);
  var interval= setInterval( function(){
  var startPositionLeft = Math.random() * documentWidth - 100,
  startOpacity = 0.5 + Math.random(),
  sizeFlake = options.minSize + Math.random() * options.maxSize,
  endPositionTop = documentHeight - 200,
  endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  durationFall = documentHeight * 10 + Math.random() * 5000;
  $flake.clone().appendTo('body').css({
    left: startPositionLeft,
    opacity: startOpacity,
    'font-size': sizeFlake,
    color: options.flakeColor
  }).animate({
    top: endPositionTop,
    left: endPositionLeft,
    opacity: 0.2
  },durationFall,'linear',function(){
    $(this).remove()
  });
  }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
      minSize: 5,   // 定义雪花最小尺寸 
      maxSize: 50,  // 定义雪花最大尺寸 
      newOn: 300    // 定义密集程度,数字越小越密集 
    });
});
复制代码
  1. themes/你选择的主题/layout/layout.ejs下添加:


<script src="/js/snow.js"></script>
复制代码


八 添加评论系统



来必力


官网地址:来必力 (livere.com)


  1. 点击导航栏的安装,选择免费版本,注册填写网站信息,填写完成后会给你一段代码把uid复制下来:


image.png


  1. 在主题配置下修改:


# Livere comment configuration, the default is not activated
# Livere 来必力评论模块的配置,默认为不激活
livere:
  enable: true    # true为开启评论系统
  uid:    # 这里填写上一步获取的uid
复制代码


Valine


官网地址:介绍 | Valine 一款快速、简洁且高效的无后端评论系统。


  1. 注册并登录LeanCloud,创建应用并在设置页面找到应用Keys,复制其中的APPIDAPPKEY


image.png


  1. 修改主题配置文件:


# The configuration of the Valine comment module is not activated by default.
# To use it, activate the configuration item and set appId and appKey.
# Valine 评论模块的配置,默认为不激活,如要使用,就请激活该配置项,并设置 appId 和 appKey.
valine:
  enable: false   # true即为开启评论系统
  appId:        # 此处填写你的appid
  appKey:       # 此处填写你的appkey
  notify: false
  verify: false
  visitor: true
  avatar: 'mm' 
  pageSize: 10
  placeholder: 'test test'  # Comment Box placeholder
  background:  # 设置评论区背景图
复制代码


九 添加百度统计



官网地址:百度统计——领先的中文网站分析平台 (baidu.com)


  1. 注册登陆后,在管理界面网站列表添加自己的网站地址
  2. 接着点击代码获取,复制该代码


image.png


  1. 接着在themes/你选择的主题/layout/_partial下新建文件 baidu-analytics.ejs,里面粘贴你刚复制的代码~
  2. 修改主题文件夹下的配置文件baidu_analytic:,将你的key(图中马赛克部分)填进去即可。


十 添加各种网页小挂件



  • abowman.com/ 里面有很多有趣的小挂件,可以养养鱼、龟、狗、仓鼠等各式各样的虚拟宠物,直接复制代码就可以用。
  • www.revolvermaps.com/ 它提供网站访客地理信息,可以以2D、3D等形式显示。
  • www.amazingcounters.com/ 免费网站计数器,有非常多的样式供你选。
  • www.seniverse.com/widget/get 心知天气提供基于Web的免费天气插件,可以为你的网站添加一项简洁美观的天气预报功能,并自动适配PC和手机上的浏览。


最后的主题推荐



目录
相关文章
|
8月前
|
开发者
一键自动化博客发布工具,用过的人都说好(阿里云篇)
使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到阿里云上。
一键自动化博客发布工具,用过的人都说好(阿里云篇)
一键自动化博客发布工具,用过的人都说好(知乎篇)
使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到知乎上。
一键自动化博客发布工具,用过的人都说好(知乎篇)
一键自动化博客发布工具,用过的人都说好(掘金篇)
使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到掘金上。
一键自动化博客发布工具,用过的人都说好(掘金篇)
|
8月前
|
Web App开发
一键自动化博客发布工具,用过的人都说好(简书篇)
给大家推荐一个一键自动化博客发布工具,完全的一键操作,让你轻松告别手动发布博客的烦恼。
|
网络安全 开发工具 git
从零开始搭建属于自己的hexo博客
整个搭建过程大概需要30分钟不到,请各位控制自己的时间~
152 0
|
JavaScript 搜索推荐 程序员
使用Hexo 搭建你的技术博客
使用Hexo 搭建你的技术博客
270 0
|
JavaScript Shell 开发工具
使用vuepress从零开始搭建我的技术文档|已部署到线上
几天前为了深入学习JS我手写了一个JS工具库,并且发布到了npm上 我把具体步骤,从零搭建再到发布上线的全部细节都写在这这一片文章上了:手写了一个JS工具库并发布到npm 既然已经写了JS工具库,那必须要有文档呀,要不然谁知道怎么使用!!! 所以今天这篇文章就介绍一下怎么使用vuepress2.x搭建一个文档,内容不深,小白也能看懂,因为我只是小小的写了一下 ^_^嘿嘿 文档效果可以点击此处查看☞:LearnJTs文档
692 1
使用vuepress从零开始搭建我的技术文档|已部署到线上
|
JavaScript 搜索推荐 前端开发
【Hexo】全面改造属于你的个性化博客(上)
【Hexo】全面改造属于你的个性化博客
138 0
【Hexo】全面改造属于你的个性化博客(上)
|
JavaScript 算法 应用服务中间件
搭建个人博客用到了这么些技术~ | 项目复盘
观前提醒 只需几分钟,你就可以 搭建一个 超级酷炫的个人博客! 😋 只要一行命令就可以实现博客的自动部署和邮件提醒 😝 文章有点长~ 建议收藏慢慢看😄 博客简介 博客采用 Hexo 搭建,使用了 Butterfly 主题,结合 Gitee 仓库, Aliyun 服务器(运用到 Nginx , docker , node.js 等技术) HEXO 简介 HEXO是一个 静态网页 博客框架 , HEXO基于 Node.js, 采用 markdown 解析文章 具体可以通过该链接了解: HEXO官方文档 安装 需要先安装 Node.js 和 Git ,为什么要安装这两个呢,博主使用后的
575 0
比hexo更好用的轻量级博客,5分钟部署上线!
比hexo更好用的轻量级博客,5分钟部署上线!
比hexo更好用的轻量级博客,5分钟部署上线!