- 在
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> 复制代码
- 效果如下
三 添加网站运行时间
- 记录网站运行时间在页脚显示，所以在
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> 复制代码
- 效果如下：
四 添加浏览器标题恶搞
- 在用户切换标签页的时候，更改浏览器标题呼唤用户回归，在
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); } }); 复制代码
- 其中的
favicon.ico为正常显示图标，funny.ico为用户切换后的图标，需要你自己设置🙈
五 添加动态诗词
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script> 复制代码
- 如果不成功，请将主题配置文件
subtitle的值为false🙈
六 添加动态科技线条背景
- 在
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> 复制代码
color表示线条颜色，opactity表示线条透明度，count表示线条总数量，都可自己修改~
七 添加雪花飘落效果
- 在
themes/你选择的主题/source/js下新建文件snow.js，添加：
(function($){ $.fn.snow = function(options){ var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('❄'), 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 // 定义密集程度，数字越小越密集 }); }); 复制代码
- 在
themes/你选择的主题/layout/layout.ejs下添加：
<script src="/js/snow.js"></script> 复制代码
八 添加评论系统
来必力
官网地址：来必力 (livere.com)
- 点击导航栏的安装，选择免费版本，注册填写网站信息，填写完成后会给你一段代码把
uid复制下来：
- 在主题配置下修改：
# Livere comment configuration, the default is not activated # Livere 来必力评论模块的配置，默认为不激活 livere: enable: true # true为开启评论系统 uid: # 这里填写上一步获取的uid 复制代码
Valine
- 注册并登录LeanCloud，创建应用并在设置页面找到应用Keys，复制其中的
APPID和APPKEY：
- 修改主题配置文件：
# 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: # 设置评论区背景图 复制代码
九 添加百度统计
- 注册登陆后，在管理界面网站列表添加自己的网站地址
- 接着点击代码获取，复制该代码
- 接着在
themes/你选择的主题/layout/_partial下新建文件baidu-analytics.ejs，里面粘贴你刚复制的代码~ - 修改主题文件夹下的配置文件
baidu_analytic:，将你的key（图中马赛克部分）填进去即可。
十 添加各种网页小挂件
- abowman.com/ 里面有很多有趣的小挂件，可以养养鱼、龟、狗、仓鼠等各式各样的虚拟宠物，直接复制代码就可以用。
- www.revolvermaps.com/ 它提供网站访客地理信息，可以以2D、3D等形式显示。
- www.amazingcounters.com/ 免费网站计数器，有非常多的样式供你选。
- www.seniverse.com/widget/get 心知天气提供基于Web的免费天气插件，可以为你的网站添加一项简洁美观的天气预报功能，并自动适配PC和手机上的浏览。
