话题一:请结合视频和中国共产党的百年历程,说明为什么中国共产党领导中国人民走社会主义道路是历史的选择。
话题二:100年来,中国共产党为人民谋幸福,为民族谋复兴,为人类谋进步,为世界谋大同,初心不改,使命不辍。请结合视频和实际说说当代大学生如何牢记初心使命,谱写时代华章。
话题一:请结合视频和中国共产党的百年历程,说明为什么中国共产党领导中国人民走社会主义道路是历史的选择。
1.中国共产党能够坚持不懈地领导人民进行革命斗争,是因为党的理论基础和组织体系得到了不断加强和完善。从中国共产党成立之初就始终坚持马列主义、毛泽东思想等革命理论的指导,同时注重团结群众,并建立了具有强大战斗力的党组织。这些都为中国共产党的领导奠定了坚实的基础。
2.中国共产党领导人民进行农村包围城市、武装夺取政权的革命实践,为社会主义建设打下了基础。通过土地改革和镇压反动势力,中国共产党成功地实现了对全国的控制,并且在政治、经济、文化等方面采取了一系列重要的措施,比如创立了人民代表大会制度、普及教育、使中国快速地进入了社会主义阶段。
3.在中国共产党的领导下,中国人民进行了多次改革开放,为中国经济和社会的快速发展奠定了基础。通过改革开放,中国成功地引入了市场机制,发展私营企业,在对外开放方面积极参与国际合作,吸引外资等,扩大了经济联系,提高了国家的生产力和竞争力,使中国经济得以快速发展。
2001年加入WTO,逐步与世界市场接轨,促进了中国经济的快速发展。
4.中国共产党的领导思想、组织能力和成就受到了全球认可。无论是在实现国家繁荣富强方面还是在国际事务上,中国共产党都赢得了更多的支持和信任。
5.国防建设方面。自1949年起,中国共产党领导下的人民解放军不断加强自身的建设,形成了一支强大的国防力量。同时,在1950年至1953年期间抗美援朝战争,1962年中印爆发了边境战争。1979年对越自卫反击战,中国人民解放军取得了胜利,坚定维护国家领土完整和主权,维护了国家的主权和安全。这充分证明了中国共产党领导下走社会主义道路是历史的选择。
话题二:100年来,中国共产党为人民谋幸福,为民族谋复兴,为人类谋进步,为世界谋大同,初心不改,使命不辍。请结合视频和实际说说当代大学生如何牢记初心使命,谱写时代华章。
当代大学生作为新时代的接班人,肩负着传承和发扬中国共产党的初心和使命的重要使命。他们应该以习近平总书记提出的“不忘初心、牢记使命”为指导思想,从自身做起,从小事做起,牢记初心,勇于担当,将个人理想与国家和民族的命运紧密联系起来。
1.当代大学生应该注重学习,树立正确的价值观。只有通过不断学习和掌握科学知识,才能更好地为实现初心和使命而努力奋斗。
2.当代大学生需要具有强烈的社会责任感和使命感,时刻谨记共产党的初心,不断提高自己的思想觉悟和工作能力。积极参与各种志愿服务和社会实践活动,积极投身到各种公益事业中去,比如探访老人志愿活动,积极参加学校组织的暑期三下乡实践活动,把个人的力量贡献给社会,始终保持一颗为人民服务的心,为社会作出贡献。
3.当代大学生还需要勇敢地面对困难和挑战。当今世界正面临百年未有之大变局,我们需要站在历史的高度上看待问题,自觉肩负起民族复兴的历史责任。他们应该有一颗坚定的信念,不断克服自身的困难和挑战,为实现中国梦、人民幸福和世界和平而努力。
4.树立正确的价值观念。作为当代大学生,深入学习马克思列宁主义、毛泽东思想、邓小平理论、三个代表重要思想、科学发展观、习近平新时代中国特色社会主义思想等,不断提升自己的政治素养和文化修养,强化责任感和使命感,树立远大理想和崇高信仰,为实现中华民族伟大复兴而努力奋斗。
5.传承中华文化,弘扬民族精神。当代大学生应该传承好中华文化,推广中华文化的精髓和价值,同时也要弘扬爱国主义精神和民族自信心。通过阅读相关历史书籍、参加文化课程、参观博物馆等方式,深入了解中国文化的内涵和历史渊源。在社区和学校开展各种文化活动,让更多的人了解和喜爱中华文化。
6.勇于创新,推动科技进步。参与社团和实践项目,比如“互联网+创新创业大赛”。
7.强化自身纪律意识,不断提高政治觉悟。我们应该以党员标准严格要求自己,自觉做到乐于奉献、服务人民。在日常生活中,要注意言行举止,不做违反纪律的事情,发挥模范带头作用。
8.加强对马克思主义理论基础和中国特色社会主义理论体系的学习,掌握最新的政治理论和科学知识。通过学习,不断增强自己的政治觉悟和辨别能力,拒绝各种错误思想和行为。
9.关注时事政治新闻,从多个角度去了解国家政策,增强对国家事务的理解和把握。
]]>是个好软件。
从21年写博客,就开始用typora测试版。
然后正式版出来,一次性付费激活。当时测试版还能用。过不久,就不能用了。
后面开始用真香版,但是那个版本没有记忆功能,就是每次都要手动显示大纲,而且每次打开都是默认主题。
点击下载1.5.6真香版
最近忍受不了了,在网上搜索一番,想找以前的测试版本,或者正式版1.0
然后发现了一个1.0.3版本的,下载之后,终于是有记忆功能的。分享一下:
点击下载1.0.3版本
安装过程就是
先运行exe安装软件,记住安装在哪里。
然后把app.asar.txt去掉后缀txt,恢复app.asar,复制到安装路径的resource下,替换掉原来的文件app.asar。
接着打开Typora,选择随便一个序列号输入。
Enjoy!
聚合网盘程序Alist宝塔面板安装部署教程 (网盘挂载程序)
宝塔面板建站后,先在配置文件删除这三个代码块
接着在配置文件中随便找个地方粘贴以下配置:
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Range $http_range;
proxy_set_header If-Range $http_if_range;
proxy_redirect off;
proxy_pass http://127.0.0.1:5244;
# the max size of file to upload
client_max_body_size 20000m;
}
然后在终端开始拉取alist文件
curl -fsSL "https://alist.nn.ci/v3.sh" | bash -s install /www/wwwroot/cloud.dragonadd.xyz
下载之后,根据alist参考文档给出的获取密码命令:3.25.0以上版本将密码改成加密方式存储的hash值,无法直接反算出密码,如果忘记了密码只能通过重新 随机生成
或者 手动设置
# 随机生成一个密码
./alist admin random
# 手动设置一个密码,`NEW_PASSWORD`是指你需要设置的密码
./alist admin set NEW_PASSWORD
然后在 /alist/data 中找到config.json文件,双击打开后,在“site_url”后面填写你的域名(需要带http://或https://请求头,视情况而定),如图所示:
当有了密码和增加以上域名之后,就可以直接用域名打开alist,然后用admin+密码登录,再进入到后台。
<!---去掉原生底部文字--->
<style type="text/css">
.footer { display: none !important; }
</style>
<!---增加新的底部文字--->
<link href="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/6.0.0/css/all.min.css" rel=" stylesheet ">
<div id="customize"
style="display:none;text-align:center;">
<br />
<div style="font-size:13px;">
<span class="nav-item">
<a class="nav-link" href="https://dragonadd.xyz" target="_blank">
<b>
Copyright <i class="fa-solid fa-copyright" style="color:#5ef272" aria-hidden="true"></i>
2021 DragonAdd |
<i class="fa fa-address-card-o" style="color:#5ef272" aria-hidden="true"></i>
个人主页
</b>
</a>
</span>
<br />
<a target="_blank" href="/@manage" >
<b><i class="fa fa-gear" style="color:#fcc5fc" aria-hidden="true"></i>
管理 </b>
</a>
<span>|</span>
<span class="nav-item">
<a class="nav-link" href="https://github.com/Xhofe/alist" target="_blank">
<b>
Powered by
<i class="fa fa-heart" style="color:#fcc5fc" aria-hidden="true"></i>
Alist </b>
</a>
</span>
</div>
<br />
</div>
<script>
let interval = setInterval(() =>
{
if (document.querySelector(".footer"))
{
document.querySelector("#customize").style.display = "";
clearInterval(interval);
}
},200);
</script>
<!-- head -->
<style>
/*渐变背景CSS */
#canvas-basic {
position: fixed;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -999;
}
</style>
<!-- body -->
<!-- 渐变背景初始化 -->
<canvas id="canvas-basic"></canvas>
<script src="https://npm.elemecdn.com/granim@2.0.0/dist/granim.min.js"></script>
<script>
var granimInstance = new Granim({
element: '#canvas-basic',
direction: 'left-right',
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#a18cd1', '#fbc2eb'],
['#fff1eb', '#ace0f9'],
['#d4fc79', '#96e6a1'],
['#a1c4fd', '#c2e9fb'],
['#a8edea', '#fed6e3'],
['#9890e3', '#b1f4cf'],
['#a1c4fd', '#c2e9fb'],
['#fff1eb', '#ace0f9']
]
}
}
});
</script>
<!-- 修改字体 -->
<link rel="stylesheet" type="text/css" href="https://fonts.loli.net/css?family=Source+Code+Pro">
<link rel="stylesheet" type="text/css" href="https://fonts.loli.net/css?family=Noto+Serif+SC">
<style type="text/css">
div{font-family: 'Source Code Pro','Noto Serif SC';}
span{font-family: 'Source Code Pro','Noto Serif SC';}
a{font-family: 'Source Code Pro','Noto Serif SC';}
</style>
<!--鼠标点击出随机颜色的爱心-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 网页鼠标点击特效(爱心) -->
<script type="text/javascript">
! function (e, t, a) {
function r() {
for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)) : (s[
e].y--, s[e].scale += .004, s[e].alpha -= .013, s[e].el.style.cssText = "left:" + s[e].x +
"px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," + s[e]
.scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function n() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e) {
t && t(), o(e)
}
}
function o(e) {
var a = t.createElement("div");
a.className = "heart", s.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: c()
}), t.body.appendChild(a)
}
function i(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function c() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math
.random()) + ")"
}
var s = [];
e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
setTimeout(e, 1e3 / 60)
}, i(
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
), n(), r()
}(window, document);
</script>
## 搭建参考
[怎样安装Alist,搭建私人网盘?—利用宝塔面板](https://www.ifree6.cn/2110.html)
[聚合网盘程序Alist宝塔面板安装部署教程 (网盘挂载程序)](
## Document
https://alist.nn.ci/zh/
## 更新
curl -fsSL "https://alist.nn.ci/v3.sh" | bash -s update /www/wwwroot/cloud.dragonadd.xyz/alist
]]>[scode type="lblue"]以下是比较原始的评论邮件推送插件,在本博客插件更换中,测试可行,欢迎朋友尝试。[/scode]
[button color="success" icon="glyphicon glyphicon-send" url="https://yzlog.top/46.html"]点击前往学习[/button]
[scode type="green"]目前本博客正在使用LoveKKComment,下面贴出本博客修改后的插件下载链接,有想法的朋友可以下载使用。原装插件请自行搜索下载。[/scode]
[button color="info" icon="glyphicon glyphicon-send" url="https://wwt.lanzouj.com/iYOIv00pcs0b"]点击下载[/button]
每当访客给你进行评论或者留言时,同时内容以邮件形式发送到博主邮箱。博主能够第一时间知道,并且给访客回复时候,可以将回复内容发送到访客留下的邮件。
首先,CommentToMail插件大致上有俩个版本,一个是正式版
,需要设置网站监控,另一个是修改版
,则不需要设置网站监控。
(本站经尝试正式版后发现无法生效,已使用大佬的修改版并作了一些修改)
点击下载本站所使用插件:CommentToMail-修改.zip ——作者:林林小窝
I. 首先去配置你的邮箱,开启smtp。(这里以QQ邮箱为例)
登录网页版QQ邮箱,从设置
进入你的账户
:
往下拉,找到开启pop3/smtp服务
,开启第一个服务。
开启服务需要邮箱绑定的手机号码发送短信进行验证,验证成功后,会得到一个授权码
。请把它复制保存到其他地方作为备用。(不会二次出现,除非重新验证)
II. 把下载完成的插件解压上传到/usr/plugins
目录,接着进入后台,点击启用插件并设置填写smtp
服务器地址、邮箱地址、密码等信息。
smtp服务器地址:smtp.qq.com
SMTP端口:465
SMTP用户:已开启smtp服务的邮箱账户
SMTP密码:开启smtp时获取的授权码
服务器需要验证和ssl加密勾选,不勾选ssl将会失败
其他默认即可,如果要测试的话,勾选 自己回复自己的评论时,发邮件通知。(同时针对博主和访客)
效果图如下:
插件解压文件中可以自定义以上owner
、guest
的内容。文件名为:owner.html
、guest.html
.
下载本站插件后,记得找到以上两个文件,把里面的网址改为贵站网址,不然贵站访客会误入本站噢~
不造轮子
的原则,本篇不总结又拍云+Picgo自建图床
教程了,请参考大佬的教程。提供两点建议:
I. 创建云存储服务后绑定域名的时候,是用二级域名作为加速域名(图床的地址),没有理解何为二级域名,请先自行学习。
II. 在 PicGo 的又拍云图床配置时,设定加速域名
记得添加前缀(即http(s)://),否则 PicGo 相册无法查看上传的图片。
[button color="success" icon="glyphicon glyphicon-send" url="https://console.upyun.com/register/?invite=By_E_pYeF"]点击此邀请链接注册又拍云[/button]
可获得:
加入又拍云联盟
,
可以每月免费获取 10 GB 存储空间 + 15 GB CDN 流量
这对于免费为自己博客加速还是免费拥有自己的储存桶非常香。
加入又拍云联盟最关键一步为:“在您申请的网站 / 应用底部添加又拍云 LOGO 及下方链接”
这里分享本站代码,诸位复制即可。
<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral">
<img src="https://img.dragonadd.xyz/blog/%E5%8F%88%E6%8B%8D%E4%BA%91.png"align="absmiddle" width="59px" height="30px" /></a>
<span>提供加速服务</span>
更新一下问答:
Q: 加入又拍云联盟后,哪里可以看到自己的流量和存储流量用了多少?
A: 可以看每天的账单。因为联盟送的是代金券,每天的账单会显示您的存储和流量的值已经对应的费用(https://console.upyun.com/billing/bills/)。
联盟送的是67元代金券,不是送空间和流量的,现在已经转换成代金券了。
10G空间365天+15G流量12个月就是67元。
一共用了多少您可以看代金券剩余额度。(https://console.upyun.com/billing/vouchers/)
08.27更新
以上教程为利用又拍云联盟加速图床
其实也有很多人利用又拍云加速博客。
这里分享一篇茅塞顿开的文章,写得太好了。
此文最初发布于:你真的该学学如何配置CDN了
]]>[scode type="red"] 不要靠近。 [/scode]
[scode type="lblue"] 主人请点击登录 [/scode]
]]>其中第一和第二的iconfont图标、fontello图标皆为图片展示格式,对于习惯用Ctrl+C、Ctrl+V的懒人患者来说,是极为痛苦的事,因此经博主整理如下。
以下为可粘贴文本(从左往右):
.icon-qzone、.icon-comments、.icon-comments-o、.icon-links、.icon-c-classification、.icon-pages、.icon-kinds、.icon-shouyeshouye、.icon-user、.icon-star、.icon-iconguanzhu、.icon-wechatpay、.icon-youqinglianjie、.icon-fork、.icon-zhuye、.icon-redo、.icon-bokeyuan 。
以下为可粘贴文本(从左往右):
fontello-home、fontello-sign-in、fontello-chevron-right、fontello-chevron-left、fontello-play-circle-o、fontello-cogs、fontello-gear、fontello-emo-tongue、fontello-check、fontello-emo-sunglasses、fontello-dedent、fontello-indent 。
fontello-search、fontello-headphones、fontello-bell、fontello-picture、fontello-eye、fontello-volume-upfontello-user、fontello-clock-o、fontello-tags、fontello-gratipay、fontello-refresh、fontello-edit 。
fontello-emo-devil、fontello-chat-alt、、fontello-camera、fontello-lockfontello-pencil、fontello-wallet、fontello-twitter、fontello-facebook、fontello-rss、fontello-menu、fontello-google-plus、fontello-angle-double-left 。
fontello-angle-double-right、fontello-angle-right、fontello-angle-down、fontello-spinner、fontello-chevron-circle-up、fontello-unlock-alt、fontello-rss-square、fontello-youtube-play、fontello-instagram、fontello-weibo、fonello-paypal、fontello-pause-circle-o 。
bootcss自带的Glyphicons字体图标: 详细见Glyphicons 字体图标
]]>以下这两篇对照着看几遍就大概知道思路了
https://blog.csdn.net/qq_36923257/article/details/112688395
https://www.moeor.com/24.html(已失效)
https://juejin.cn/post/6844903998302978055 (推荐)
关于主题:去搜索你喜欢的主题下载,然后上传根目录/usr/themes/目录里面,在后台外观设置中更换。各主题教程以及配置教程都有主题文档。
关于插件:插件安装是将下载的插件上传根目录/usr/plugin/ 目录里面,在后台设置中启用插件,设置插件。
后台管理:你的后台面板地址就是你的域名/admin,用设置的用户名和密码登录即可。
[scode type="green"]建站不易,在此祝贺各位建站成功,加油![/scode]
[scode type="blue"]以下为本站Handsome主题的特效魔改,版本为8.2.0,如果你还没有此主题,请自行购买。[/scode]
将以下代码放在主题的handsome/component/footer.php
中的</body>
之前即可。
//字体自行修改
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#ff6651"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
本站使用点击爱心特效,代码直接放在后台-更改外观-设置外观-开发者设置-自定义JavaScript
,代码如下:
// 点击爱心
! function (e, t, a) {
function n() {
c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), o(), r()
}
function r() {
for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
requestAnimationFrame(r)
}
function o() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function (e) {
t && t(), i(e)
}
}
function i(e) {
var a = t.createElement("div");
a.className = "heart", d.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: s()
}), t.body.appendChild(a)
}
function c(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}
function s() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
}
var d = [];
e.requestAnimationFrame = function () {
return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
setTimeout(e, 1e3 / 60)
}
}(), n()
}(window, document);
打开后台-更改外观-设置外观-开发者设置-选择好需要的颜色粘贴至自定义JavaScript即可。
<!--纯黑标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#000000", "#000000", "#000000", "#000000", "#000000", "#000000"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--银白标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0", "#C0C0C0"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--淡蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6", "#ADD8E6"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--彩色标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
<!--天蓝标签云-->
let tags = document.querySelectorAll("#tag_cloud-2 a");
let colorArr = ["#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF", "#00BFFF"];
tags.forEach(tag => {
tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];
tag.style.backgroundColor = tagsColor;
});
在Handsome/post.php
内<?php echo Content::exportPayForAuthors(); ?>
和<?php endif; ?>
中添加以下内容(Handsome8.2.0版本在87行)
<!--版权声明开始-->
<div class="entry-content l-h-2x">
<div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 20px 0px;text-align: center;width: 100%;">
<span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">END</span>
</div>
<div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid;text-align: left;">
<span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a><br></span>
<span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a><br></span>
<span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a><br></span>
<span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
</div>
</div>
<!--版权声明结束-->
删除Handsome/component/footer.php
原来的底部版权 ,也就是删除如下代码:
Powered by <a target="_blank" href="http://www.typecho.org">Typecho</a> | Theme by <a target="_blank" href="https://www.ihewro.com/archives/489/">handsome</a>
以及下一行中的,不要删除多了
© <?php echo date("Y"); ?> Copyright
添加以下代码到主题设置->开发者设置->自定义css
中:
/*底部页脚*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
line-height: 15px;
background-color: #abbac3;
margin-bottom: 5px
}
.github-badge .badge-subject {
display: inline-block;
background-color: #4d4d4d;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.github-badge .bg-blue {
background-color: #007ec6
}
.github-badge .bg-orange {
background-color: #ffa500
}
.github-badge .bg-red {
background-color: #f00
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-purple {
background-color: #ab34e9
}
将下列代码修改后分别填写到 主题设置->开发者设置->博客底部左/右侧信息
中即可。
<!-- 博客底部左侧信息 -->
<div class="github-badge">
<span class="badge-subject">Copyright</span>
<a href="./" target="_blank">
<span class="badge-value bg-blue">©2021 Dragon Add</span></a>
</div> |
<div class="github-badge">
<span class="badge-subject">XICP备</span>
<a href="http://beian.miit.gov.cn/" target="_blank">
<span class="badge-value bg-green">xxxxxxx号-1</span></a>
</div>
[scode type="lblue"]关于左侧信息,请认真阅读代码,自行修改属于自己的内容。[/scode]
<!-- 博客底部右侧信息 -->
<div class="github-badge">
<span class="badge-subject">Powered by</span>
<a href="http://www.typecho.org" target="_blank">
<span class="badge-value bg-blue">Typecho</span></a>
</div> |
<div class="github-badge">
<span class="badge-subject">Theme by</span>
<a href="https://www.ihewro.com/" target="_blank">
<span class="badge-value bg-orange">Handsome</span></a>
</div>
后台-设置外观-初级设置-博客介绍添加以下代码:
<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "❤", o = ["Hello World"].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>
[scode type="yellow"]此特效在本站某些页面出现诡异效果,因此已停用。目前未在其他同类博客发现问题,各位客官自行尝试,发现问题就把代码删去即可,问题不大,多尝试。还挺好看的。[/scode]
代码直接放在后台-更改外观-设置外观-开发者设置-自定义JavaScript
,代码如下:
//搞怪网页动态标题
var OriginTitile = document.title,
titleTime;
document.addEventListener("visibilitychange",
function() {
if (document.hidden) {
document.title = ">﹏<呜呜呜~";
clearTimeout(titleTime)
} else {
document.title = "(^∀^●)好耶! " ;
titleTime = setTimeout(function() {
document.title = OriginTitile
},
2000)
}
});
首先下载JS
文件,然后把它放在网站目录某个地方。
可参考博主放在主题js文件里面:/usr/themes/handsome/assets/js/
[button color="success" icon="glyphicon glyphicon-send" url="http://47.106.106.169:8888/down/juQ54SCc4a9s"]点击下载[/button]
然后将以下代码放在后台-更改外观-设置外观-开发者设置-自定义输出body 尾部的HTML代码
,代码如下:
<!--文本框打字机特效-->
<script type="text/javascript" src="https://dragonadd.xyz/usr/themes/handsome/assets/js/commentTyping.js"></script>
以上代码不出意外(博主不跑路)的话,可以应用于其他主题,复制至对应的component/footer.php
,在 </body>
下面一行添加即可。
基础代码为:
<!--打字特效-->
<script type="text/javascript" src="JS文件路径"></script>
将下列代码修改后分别填写到 主题设置->开发者设置->博客底部左侧信息
中即可。
<!--建站时间-->
<span>
| 本站已经运行了
</span>
<span id="span_dt_dt">
</span>
<script>
/*建站时间*/
function show_date_time() {
window.setTimeout("show_date_time()", 1e3);
var BirthDay = new Date("2021/07/25 18:30:41"),
today = new Date,
timeold = today.getTime() - BirthDay.getTime(),
msPerDay = 864e5,
e_daysold = timeold / msPerDay,
daysold = Math.floor(e_daysold),
e_hrsold = 24 * (e_daysold - daysold),
hrsold = Math.floor(e_hrsold),
e_minsold = 60 * (e_hrsold - hrsold),
minsold = Math.floor(60 * (e_hrsold - hrsold)),
seconds = Math.floor(60 * (e_minsold - minsold));
span_dt_dt.innerHTML = daysold + "天" + hrsold + "小时" + minsold + "分" + seconds + "秒";
}
show_date_time();
</script>
[scode type="lblue"]本站弃用原因,好长,影响观感。自行尝试使用[/scode]
1). 制作favicon.ico图片文件
先准备一张长宽比为1:1的图片文件,然后将图片上传到第三方ico生成网站。
生成后的.ico后缀图片会自动下载到本地,将其更名为favicon.ico。
2). 将favicon.ico上传到Typecho主题目录下
使用FTP或其他方式,将刚刚生成的favicon.ico图片上传到你的Typecho主题目录下:
上传目录:/usr/themes/你的主题名字/
3). 找到主题文件目录下的header.php
,在 link 标签或者head/title标签下,网上各个教程不一,本站handsome8.2.0是把34行代替为以下代码,请自行摸索,谨记先全部备份再修改。
<link rel="shortcut icon" href="/usr/themes/handsome/favicon.ico" type="image/x-icon" />
1、复制下面的代码添加到开发者设置
- 自定义输出body尾部的HTML代码
<script>
/*五颜六色字体*/
function sjcolor(){
var colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999", "#3bca6e", "#f23232", "#834e75", "#23b7e5", "#f60"];
/*设置颜色*/
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > a > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#aside > div > div.navi-wrap.scroll-y.scroll-hide > nav > ul > li > ul > li > a > b").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*左侧导航字体颜色*/
document.querySelectorAll("#post-panel > div > div > div > div.panel-body > div.nav-tabs-alt > ul > li > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#post-panel > div > div > div > div").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#post-panel > div.blog-post > div > div.post-meta.wrapper-lg > h2 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*首页面板*/
document.querySelectorAll("#small_widgets > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#small_widgets > ul").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#content > main > div > div > div > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*博客名称*/
document.querySelectorAll(".m-l-xs").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*文章标题*/
document.querySelectorAll("#search_input").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*搜索框*/
document.querySelectorAll("#content > main > div > div > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#content > main > div > div > div > div a >span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*友情链接*/
document.querySelectorAll("#header > div > ul > li > div > div > div > div > div > div > a > span > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*工具导航*/
document.querySelectorAll("#tag_toc > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*文章目录*/
document.querySelectorAll("#content > main > div > div > header > h1").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#typedWord").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*签名标题*/
document.querySelectorAll("#tag_cloud-2 h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#tag_cloud-2 a").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*标签颜色*/
document.querySelectorAll("#blog_info > ul > li > span.badge.pull-right").forEach(e => {
e.style.backgroundColor = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*博客信息*/
document.querySelectorAll("#blog_info > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > ul > li > div > h4 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-hots > ul > li > div > small > span > span.meta-value").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*热门文章颜色*/
document.querySelectorAll("#widget-tabs-4-comments > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-comments > ul > li > div > div > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-comments > ul > li > div > small > span").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*最新评论颜色*/
document.querySelectorAll("#widget-tabs-4-random > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-random > ul > li > div > h4 > a").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
document.querySelectorAll("#widget-tabs-4-random > ul > li > div > small > span > span.meta-value").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*随机文章颜色*/
document.querySelectorAll("#sidebar > section.widget.widget_categories.wrapper-md.clear.visible-lg.visible-md > h5").forEach(e => {
e.style.color = colorArr[Math.floor(Math.random() * colorArr.length)];
});
/*手机阅读标题*/
}sjcolor();
</script>
2、复制下面的css代码添加到主题
--> 设置外观
--> 开发者设置
--> 自定义CSS
/* 右侧列表导航栏图标颜色 */
.sidebar-icon svg.feather.feather-thumbs-up{color: #ff0000;}
.sidebar-icon svg.feather.feather-message-square{color:#495dc3;}
.sidebar-icon svg.feather.feather-gift{color:#52DE97;}
3、在后台 - PJAX- PJAX回调函数中输入以下代码。这样打开其他网页时,不需要重新加载就能生效了
/*全局彩色*/
sjcolor();
保存完毕,刷新前台就可以看到效果了。
本步骤学习参考:https://cry33.com/archives/495.html
参见Zeruns's Blog的文章:点击学习
打开Typecho网站文件:var/Widget/Abstract/Contents.php
Typecho版本1.1(17.10.30)在744行左右,找到:
$value['title'] = _t('此内容被密码保护');
改成下面的这个,也就是注释注释掉这行就好了。
/** $value['title'] = _t('此内容被密码保护'); */
你会注释,用//单行注释符注释掉也可以,不会的直接复制我的也行。
在宝塔面板中打开phpMyAdmin,复制网址另外页面进入以下画面:
进入后,根据以上图片在SQL中输入以下命令并执行:
alter table typecho_comments convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_contents convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_fields convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_metas convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_options convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_relationships convert to character set utf8mb4 collate utf8mb4_general_ci;
alter table typecho_users convert to character set utf8mb4 collate utf8mb4_general_ci;
注意:
在宝塔文件的网站(自己网站名)的根目录中,有一个config.inc.php
的文件,点击编辑。
在大概60行的位置修改为'charset' => 'utf8mb4'
,示例如图:
值得注意的是,在此文件中可以知道你的数据库名字和密码,也就是user和password。
以上参考见:Typecho支持Emoji表情(采用utf8mb4编码)_Mr.zwX-程序员资料
参考见:https://www.xcnte.com/archives/527/
在handsome主题后台的自定义输出body 尾部的HTML代码
中添加以下代码:
<!--灯笼挂件-->
<div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">元旦</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div>
<div class="deng-box2"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"><div class="deng-t">快乐</div></div> </div> <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div> </div> </div>
接着在自定义css
中添加如下代码:
/*灯笼挂件*/
.deng-box1 {
pointer-events: none;
}
.deng-a {
width: 100px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: 12px 8px 8px 10px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-b {
width: 45px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -2px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.deng-t {
font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
font-size: 1.5rem;
color: #ffa500;
font-weight: bold;
line-height: 42px;
text-align: center;
width: 25px;
margin: 0 auto;
}
.shui-a {
position: relative;
width: 5px;
height: 20px;
margin: -5px 0 0 59px;
-webkit-animation: swing 4s infinite ease-in-out;
-webkit-transform-origin: 50% -45px;
background: #ffa500;
border-radius: 0 0 5px 5px;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.shui-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.deng::after {
position: absolute;
bottom: -7px;
left: 10px;
height: 12px;
width: 60px;
content: " ";
display: block;
margin-left: 20px;
border-radius: 0 0 5px 5px;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-box2 {
position: fixed;
top: -30px;
right: 5px;
z-index: 9999;
pointer-events: none;
}
.deng-box2 .deng {
position: relative;
width: 120px;
height: 90px;
margin: 50px;
background: #d8000f;
background: rgba(216, 0, 15, 0.8);
border-radius: 50% 50%;
-webkit-transform-origin: 50% -100px;
-webkit-animation: swing 5s infinite ease-in-out;
box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng-box2 {
pointer-events: none;
}
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
该网页效果于手机端显示会被占据大概四分之一的顶部空间,一定程度上影响阅读体验,若需要去除,可以在自定义css中追加如下代码:
@media (max-width: 900px){.deng-box1{display:none;}}
@media (max-width: 900px){.deng-box2{display:none;}}
若您需要修改灯笼的位置,可在css代码中找到.deng-box1
,调整left的px值,找到.deng-box2
,调整right的px值。
此效果借鉴于“深度博客的《给你的typecho添加灯笼挂件》”。
登录网站管理面板,进入网站根目录,找到/admin/login.php
,将里面的内容进行全部替换:
<?php
include 'common.php';
if ($user->hasLogin()) {
$response->redirect($options->adminUrl);
}
$rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name'));
Typecho_Cookie::delete('__typecho_remember_name');
$bodyClass = 'body-100';
include 'header.php';
?>
<!--canvas画布-->
<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
<canvas id="c" width="300" height="150"></canvas>
<div class="typecho-login-wrap">
<div class="typecho-login">
<h1><a href="https://dragonadd.xyz/" class="i-logo">Dragon Add</a></h1>
<form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form">
<p>
<label for="name" class="sr-only"><?php _e('用户名'); ?></label>
<input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus />
</p>
<p>
<label for="password" class="sr-only"><?php _e('密码'); ?></label>
<input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" />
</p>
<p class="submit">
<button type="submit" class="btn btn-l w-100 primary"><?php _e('登录'); ?></button>
<input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" />
</p>
<p><label for="remember"><input type="checkbox" name="remember" class="checkbox" value="1" id="remember" /> <?php _e('下次自动登录'); ?></label></p>
</form>
<p class="more-link">
<a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?></a>
<?php if($options->allowRegister): ?>
•
<a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?></a>
<?php endif; ?>
</p>
</div>
</div>
<!--登录样式-->
<style> .typecho-login-wrap { position: fixed; }
.typecho-login {display: block;padding: 10px 20px;margin-top: 20vh;border-radius: 15px;-moz-box-shadow: 0 0 10px #ffffff;box-shadow: 0 0 15px 0px #868686;background: rgb(255 255 255 / 60%);}
.i-logo{display: unset;background: unset;filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55);opacity: 0.55;}
input{outline: 0;}
input:focus {box-shadow: 0 0 0 0.2rem rgb(167 191 232 / 25%);}
body {display: flex;align-items: center;justify-content: center;}
</style>
<script>
$(document).ready(function () {
$('#name').focus();
});
</script>
<?php include 'footer.php'; ?>
<!--canvas背景动画js-->
<script type="text/javascript">
$(document).ready(function() {var canvas = document.getElementById("c");var ctx = canvas.getContext("2d");var c = $("#c");var w,h;var pi = Math.PI;var all_attribute = {num:100,/*个数*/start_probability:0.1,/*如果数量小于num,有这些几率添加一个新的*/radius_min:1,/*初始半径最小值*/radius_max:2,/* 初始半径最大值*/radius_add_min:.3,/* 半径增加最小值*/radius_add_max:.5,/*半径增加最大值*/opacity_min:0.3,/*初始透明度最小值*/opacity_max:0.5,/*初始透明度最大值*/opacity_prev_min:.003,/* 透明度递减值最小值*/opacity_prev_max:.005,/* 透明度递减值最大值*/light_min:40,/* 颜色亮度最小值*/light_max:70,/* 颜色亮度最大值*/};var style_color = find_random(0,360);var all_element =[];window_resize();function start(){window.requestAnimationFrame(start);style_color+=.1;ctx.fillStyle = 'hsl('+style_color+',100%,97%)';ctx.fillRect(0, 0, w, h);if (all_element.length < all_attribute.num && Math.random() < all_attribute.start_probability){all_element.push(new ready_run);}all_element.map(function(line) {line.to_step();})};function ready_run(){this.to_reset();};ready_run.prototype = {to_reset:function(){var t = this;t.x = find_random(0,w);t.y = find_random(0,h);t.radius = find_random(all_attribute.radius_min,all_attribute.radius_max);t.radius_change = find_random(all_attribute.radius_add_min,all_attribute.radius_add_max);t.opacity = find_random(all_attribute.opacity_min,all_attribute.opacity_max);t.opacity_change = find_random(all_attribute.opacity_prev_min,all_attribute.opacity_prev_max);t.light = find_random(all_attribute.light_min,all_attribute.light_max);t.color = 'hsl('+style_color+',100%,'+t.light+'%)';},to_step:function(){var t = this;t.opacity -= t.opacity_change;t.radius += t.radius_change;if(t.opacity <= 0){t.to_reset();return false;}ctx.fillStyle = t.color;ctx.globalAlpha = t.opacity;ctx.beginPath();ctx.arc(t.x,t.y,t.radius,0,2*pi,true);ctx.closePath();ctx.fill();ctx.globalAlpha = 1;}};function window_resize(){w = window.innerWidth;h = window.innerHeight;canvas.width = w;canvas.height = h;};$(window).resize(function(){window_resize();});function find_random(num_one,num_two){return Math.random()*(num_two-num_one)+num_one;};(function() {var lastTime = 0;var vendors = ['webkit', 'moz'];for(var xx = 0; xx < vendors.length && !window.requestAnimationFrame; ++xx) {window.requestAnimationFrame = window[vendors[xx] + 'RequestAnimationFrame'];window.cancelAnimationFrame = window[vendors[xx] + 'CancelAnimationFrame'] ||window[vendors[xx] + 'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame) {window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));var id = window.setTimeout(function() {callback(currTime + timeToCall);}, timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame) {window.cancelAnimationFrame = function(id) {clearTimeout(id);};}}());start();});
</script>
注意:粘贴以上代码后,记得修改第16行的相关信息。改为自己家博客的。
以防以后不想要这个画布模板了,这里备份源代码:
<?php
include 'common.php';
if ($user->hasLogin()) {
$response->redirect($options->adminUrl);
}
$rememberName = htmlspecialchars(Typecho_Cookie::get('__typecho_remember_name'));
Typecho_Cookie::delete('__typecho_remember_name');
$bodyClass = 'body-100';
include 'header.php';
?>
<div class="typecho-login-wrap">
<div class="typecho-login">
<h1><a href="http://typecho.org" class="i-logo">Typecho</a></h1>
<form action="<?php $options->loginAction(); ?>" method="post" name="login" role="form">
<p>
<label for="name" class="sr-only"><?php _e('用户名'); ?></label>
<input type="text" id="name" name="name" value="<?php echo $rememberName; ?>" placeholder="<?php _e('用户名'); ?>" class="text-l w-100" autofocus />
</p>
<p>
<label for="password" class="sr-only"><?php _e('密码'); ?></label>
<input type="password" id="password" name="password" class="text-l w-100" placeholder="<?php _e('密码'); ?>" />
</p>
<p class="submit">
<button type="submit" class="btn btn-l w-100 primary"><?php _e('登录'); ?></button>
<input type="hidden" name="referer" value="<?php echo htmlspecialchars($request->get('referer')); ?>" />
</p>
<p>
<label for="remember"><input type="checkbox" name="remember" class="checkbox" value="1" id="remember" /> <?php _e('下次自动登录'); ?></label>
</p>
</form>
<p class="more-link">
<a href="<?php $options->siteUrl(); ?>"><?php _e('返回首页'); ?></a>
<?php if($options->allowRegister): ?>
•
<a href="<?php $options->registerUrl(); ?>"><?php _e('用户注册'); ?></a>
<?php endif; ?>
</p>
</div>
</div>
<?php
include 'common-js.php';
?>
<script>
$(document).ready(function () {
$('#name').focus();
});
</script>
<?php
include 'footer.php';
?>
此步骤借鉴于:Typecho|Handsome 主题的一些修改教程
参考:https://limbopro.com/archives/Falling-snowflakes.html
如果你是handsome主题,请在首页列表最前方广告位
处添加以下代码,年份和结束日期记得自己改。
<style>
.gn_box{ border: none; border-radius: 15px; }
.gn_box {
padding: 10px 14px; margin: 10px; margin-bottom: 20px; text-align: center; background-color: #fff; }
#t_d{ color: #982585; font-size: 18px; }
#t_h{ color: #8f79c1; font-size: 18px; }
#t_m{ color: #65b4b5; font-size: 18px; }
#t_s{ color: #83caa3; font-size: 18px; }
</style>
<div class="gn_box">
<h1><font color=#E80017>
2</font><font color=#D1002E>
0</font><font color=#BA0045>
2</font><font color=#A3005C>
4</font><font color=#8C0073>
年</font><font color=#75008A>-</font> <font color=#5E00A1>
新</font><font color=#4700B8>
年</font><font color=#3000CF>
倒</font><font color=#1900E6>
计</font><font color=#0200FD>
时</font></h1><center> <div id="CountMsg" class="HotDate"><span id="t_d">
天</span><span id="t_h">
时</span><span id="t_m">
分</span><span id="t_s">
秒</span></div></center>
<script type="text/javascript">
function getRTime() {
var EndTime = new Date('2024/01/01 00:00:00');
var NowTime = new Date();
var t = EndTime.getTime() - NowTime.getTime();
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
var m = Math.floor(t / 1000 / 60 % 60);
var s = Math.floor(t / 1000 % 60);
var day = document.getElementById("t_d");
if (day != null) {
day.innerHTML = d + " 天"; }
var hour = document.getElementById("t_h");
if (hour != null) {
hour.innerHTML = h + " 时"; }
var min = document.getElementById("t_m");
if (min != null) {
min.innerHTML = m + " 分"; }
var sec = document.getElementById("t_s");
if (sec != null) {
sec.innerHTML = s + " 秒"; }
}
setInterval(getRTime, 1000);
</script>
</div>
]]>以下是分享我认识的以及我常用的指令
hexo 命令:
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
缩写:
hexo n = hexo new
hexo g = hexo generate
hexo s = hexo server
hexo d = hexo deploy
在Hexo里面:
我的常用Hexo指令
新开文章:
hexo new "我的常用Hexo指令"
一般发布文章或者修改博客后需要这些操作:清除缓存>生成静态文件>启动服务器,测试没问题后再部署。因此我们可以输入以下命令:
hexo clean && hexo g && hexo s
最后部署到GitHub:
hexo d
最后,还有一个指令也用得很多,我懒得打都是直接复制,那就是在Next主题下,给文章添加"阅读全文"的指令:
<!-- more -->
把它插入你文章指定的位置,那么指令前面的文字就会显示在文章预览那里,可以起到前言的作用,读者点阅读全文
进入文章主页就可以对整篇文章进行阅读了。
————
]]>这篇文章并不是教程分享向的博文,写得不是很详细,文字排版也没有完全美化、没有参考图片。对于找到这里的你,我要说声抱歉。
本文纯是博主对于自己博客美化所作的步骤顺序,出发点是为了在优化过程中若出现错误可以撤销上一步的操作。博主自己每做一步就hexo clean && hexo g && hexo s
本地预览一下,如果没有出现错误就上传,否则就撤销操作。
所以我做了什么?
打开主题配置文件,找到social字段,修改
npm install hexo-generator-searchdb --save
search:
path: search.xml
field: post
format: html
limit: 10000
如何创建一个JS文件(建立一个txt文件更改后缀名为js,建立完成.),用记事本打开.swig文件。(OS:记事本真是永远的神)。修改了,好像没有作用。(我学会了,我懒得改序号了,教程见第28点
Github标识:在 GitHub Corners 选择自己喜欢的按钮样式并复制代码,将https://your-url换成自己的链接,将改好的代码粘贴到themes/next/layout/_layout.swig文件中
下面一行。(OS:但我在文件中没有找到我的GitHub,我之前用了其他方法,这个方法是后来总结。)打开 themes/next/layout/_partials/footer.swig
,找到:div class="powered-by,把这段代码首尾分别加上:,或者直接删除.
(后续我了解到,最新版next可以在next文件中的其他文件打开开关就行)
打开主题配置文件,找到back2top:,把 scrollpercent: 的false 改为 true
相关代码解释:
back2top:
enable: true # 开启 back to top 按钮
# Back to top in sidebar.
sidebar: true # true 表示在侧边栏显示,false则在侧下角
# Scroll percent label in b2t button.
scrollpercent: true # 开启进度百分比
打开主题配置文件,找到reading_progress:,把false 改为 true
相关代码解释:
# Reading progress bar
reading_progress:
enable: true # 开启进度条
# Available values: top | bottom
position: bottom # 设置位置 可以为 top | bottom
color: "#37c6c0" # 进度条颜色 16进制RGB
height: 3px # 高度
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top –save
打开:/themes/next/layout/_macro
目录下的post.swig
文件,定位到<div class="post-meta">
标签下,插入如下代码:
{% if post.top %}
<i class="fa fa-thumb-tack"></i>
<font color="RED">置顶</font>
<span class="post-meta-divider">|</span>
{% endif %}
title: a
top: 1
根目录输入指令下载插件:
npm install hexo-symbols-count-time
打开themes/next/
下的_config.yml,查找sidebar,将想要的方案打开。
(在这里出现了一些问题。不知所以然就改好了。但是我被惊出了一身汗,因为我没有备份配置文件就立刻改了,而且我还是在改了12点后预览才发现无法配置。于是我在11、12两点反复改动。我下次改一次之前必备份一次,并且只改一点,绝不多改。太可怕了。后果很严重,严重到关站大吉。)
打开themes/next/
下的_config.yml,查找creative_commons, 将post的false改为true即可显示版权信息
Git输入下方代码:
npm install -save hexo-helper-live2d
然后在根目录的配置文件 _config.yml中添加参数:
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-<你喜欢的模型名字>
display:
position: right
width: 150
height: 300
mobile:
show: true
(预览图 )
在站点目录下建文件夹live2d_models
,再在live2d_models
下建文件夹<你喜欢的模型名字>
,
再在<你喜欢的模型名字>
下建json
文件,文件名为:<你喜欢的模型名字>.model.json
安装模型。在命令行(即Git Bash)运行以下命令即可:
npm install --save live2d-widget-model-<你喜欢的模型名字>
OS:1. 在写名字的时候,记得把<>删掉
想看预览图来这里看:https://blog.csdn.net/as480133937/article/details/100138838 (自己找到那个为博客添加妹子的位置。)
打开主题配置文件
,搜索animated:,把false改为true
打开主题配置文件
,找到tag_icon:,把false改为true
打开 themes/next/layout/_macro/post.swig
文件,找到文章结束语标语END POST BODY位置,复制以下代码,将其插入。
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">
----- 本文结束 <i class="fa fa-heart-o"></i> 感谢您的阅读 -----
</div>
{% endif %}
</div>
打开\themes\next\source\css\_variables\base.styl
,找到colors for use across theme.,可以参考以下一位博主的修改,该主题为紫色。
// Colors
// colors for use across theme.
// --------------------------------------------------
$whitesmoke = #daa5ff; // 菜单栏当前菜单,归档线条
$gainsboro = #e3c6f0; // 菜单栏头像边框,分割线。单行代码块
$gray-lighter = #cccedd; // 菜单栏子标题
$grey-light = #ab2acc; // 菜单栏文章计数器
$grey = #6a2dbb; // 时间节点
$grey-dark = #67439a; // 菜单栏博主卡片区文字【描述|日志|分类|标签】
$grey-dim = #9059bf;
$black-light = #3d155a; // 文章正文颜色
$black-dim = #5b2293;
$black-deep = #6947bb; // 菜单栏背景
补充: 以上#数字字母为RGB的16进制
Canvas-nest风格、JavaScript 3D library风格 、Canvas-ribbon风格。
我终于知道这是怎么弄的!!网上很多教程都没有更新。我走了很多弯路。原来我所用的next版本都没有下载这些动画包。需要自己下载。链接就在注释中``# Dependencies 项后面。
例如我下载第一种,即选择Canvas-nest风格,在主目录执行:
git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
然后打开themes/next/
下的_config.yml文件,搜索Canvas-nest,将canvas_nest的中enable值改为true即可。如果没有这段代码,需要自行添加:
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: "0,0,255" # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines
同理,其他两种动画包也要自行下载,下载指令为:
Git clone 动画链接 themes/next/source/lib/(动画链接后面next-后面的名称)
请自行领悟参考我下载Canvas-nest风格的指令
(至2021.7.17,我的博客用了两个动画,nest和ribbon
我们自己写文章的时候一般都会自己带上标题编号,但是默认的主题会给我们带上编号,很是别扭,如何去掉呢?
在主题配置文件中找到toc属性,将其中的number属性设置成false,如下:
toc:
enable: true
number: false
wrap: false
把你要加的头像复制粘贴到\themes\next\source\images
文件下,名称为avatar.gif(后缀可为jpg,自己变通),在主题配置文件_config.yml里面找到avatar,以下:
avatar:
url: /images/avatar.jpg # 设置头像资源的位置
rounded: true # 开启圆形头像
opacity: 1 # 不透明的比例:0就是完全透明
rotated: false # 不开启旋转
使用next新的主题时,在hexo中添加live2D看板娘后next原生自带的不蒜子统计会失效,解决方法:
npm uninstall --save hexo-helper-live2d
打开主题配置文件,搜索busuanzi_count:,把false改为true
在Hexo根目录/themes/next/layout/_partials/
文件夹中修改 footer.swig,在最后一行前加入代码:
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span><br></span>
<span class="post-meta-item-icon">
<i class="fa fa-group"></i>
</span>
<span>总访客 <span id="busuanzi_value_site_uv"></span> 人</span>
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
<i class="fa fa-eye"></i>
</span>
<span>访问总量 <span id="busuanzi_value_site_pv"></span> 次</span>
{{- next_inject('footer') }}
开启 主题配置文件 - valine 评论中的 visitor 开关来替代不蒜子的统计功能。
在根目录下,找到scaffolds/post.md
,将其修改为你需要的模式,新建文章就是模板的形式了,可以参考我的:
title: {{ title }}
date: {{ date }}
categories:
tags:
top:
在微信、支付宝中拿到赞赏码、付款码图片,放入themes/next/source/images
文件夹中。比如我的是 wechatpay.jpg和alipay.jpg,修改主题配置文件,找到reward_settings:,打开enbale,填写comment,在下面的reward:,填写图片路径。
如果你不喜欢Donate、 Wechat Pay 和 Alipay这样的字眼,可以在 themes/next/languages/zh-CN.yml 中自行翻译。
首先把主题配置文件,取消 variables.styl 的注释(即去掉#),然后在根目录source创立_data
文件夹,然后创建记事本variables.styl,在里面输入以下代码:
// 圆角设置
$border-radius-inner = 20px 20px 20px 20px;
$border-radius = 20px;
在根目录source的 _data
文件夹创建记事本style.styl,在里面输入以下代码:
// 主页文章添加阴影效果
.post {
margin-top: 60px;
padding: 20px;
margin-bottom: 60px;
-webkit-box-shadow: 0 0 5px rgba(120, 128, 114, 1.5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}
把想设置的背景放入/themes/next/source/images
中,命名为background.jpg。在根目录的source
文件夹下的_data/styles.styl
,输入以下代码:
body {
background:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:100% 100%;
}
(记得在主题_config.yml
文件中打开styles.styl的注释。
在根目录的source
文件夹下的_data/styles.styl,输入以下代码:
//博客内容透明化
//文章内容的透明度设置
.content-wrap {
opacity: 0.9;
}
//侧边框的透明度设置
.sidebar {
opacity: 0.9;
}
//菜单栏的透明度设置
.header-inner {
background: rgba(255,255,255,0.9);
}
//搜索框(local-search)的透明度设置
.popup {
opacity: 0.9;
}
找到文件 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/source/js/src
(如果没有src那就去创建一个啊!)里面建一个叫fireworks.js的文件,然后在里面写代码如下:
"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
,在