博客折腾向
博客主题折腾进去一些个性化的功能，插件之类的没有填写，只记录下代码设置之类的，防止以后再找不到怎么设置
折腾记录
底部添加又拍云logo和网站运行时间
在本主题footer.php文件72行修改成以下代码
// 又拍云logo
<footer id="footer" role="contentinfo">
<div class="container" data-index="<?php echo (Mirages::$options->timeValid - intval(Mirages::$options->timeValid / 1170) * 1170)?>"><a href="https://console.upyun.com/register/?invite=Hy04fCgSL" target="_blank" rel="nofollow"><div class="footer"><img src="图片外链或本地地址自行台添加" width="80" height="38" /></div>
// 运行时间代码
<span id="momk"></span>
<script language=javascript>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("03-06-2020 00:00:00");//建站日期设置
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(daysold-e_daysold)*-24;
hrsold=Math.floor(e_hrsold);
e_minsold=(hrsold-e_hrsold)*-60;
minsold=Math.floor((hrsold-e_hrsold)*-60);
seconds=Math.floor((minsold-e_minsold)*-60);
momk.innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒" ;
}
show_date_time();
</script>
评论区添加UA
将 css代码加入到 Mirages.min.css 文件末尾
然后在functions.php文件末尾加入以下代码
// 获取浏览器信息
function getBrowser($agent)
{
if (preg_match('/MSIE\s([^\s|;]+)/i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-ie"></i> Internet Explore';
} else if (preg_match('/FireFox\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Firefox/', $regs[0]);
$FireFox_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-firefox"></i> FireFox';
} else if (preg_match('/Maxthon([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Maxthon/', $agent);
$Maxthon_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-edge"></i> MicroSoft Edge';
} else if (preg_match('#360([a-zA-Z0-9.]+)#i', $agent, $regs)) {
$outputer = '<i class="ua-icon icon-360"></i> 360极速浏览器';
} else if (preg_match('/Edge([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Edge/', $regs[0]);
$Edge_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-edge"></i> MicroSoft Edge';
} else if (preg_match('/UC/i', $agent)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc"></i> UC浏览器';
} else if (preg_match('/QQ/i', $agent, $regs)||preg_match('/QQBrowser\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('rowser/', $agent);
$QQ_vern = explode('.', $str1[1]);
$outputer = '<i class= "ua-icon icon-qq"></i> QQ浏览器';
} else if (preg_match('/UBrowser/i', $agent, $regs)) {
$str1 = explode('rowser/', $agent);
$UCBrowser_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-uc"></i> UC浏览器';
} else if (preg_match('/Opera[\s|\/]([^\s]+)/i', $agent, $regs)) {
$outputer = '<i class= "ua-icon icon-opera"></i> Opera';
} else if (preg_match('/Chrome([\d]*)\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Chrome/', $agent);
$chrome_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-chrome""></i> Google Chrome';
} else if (preg_match('/safari\/([^\s]+)/i', $agent, $regs)) {
$str1 = explode('Version/', $agent);
$safari_vern = explode('.', $str1[1]);
$outputer = '<i class="ua-icon icon-safari"></i> Safari';
} else{
$outputer = '<i class="ua-icon icon-chrome"></i> Google Chrome';
}
echo $outputer;
}
// 获取操作系统信息
function getOs($agent)
{
$os = false;
if (preg_match('/win/i', $agent)) {
if (preg_match('/nt 6.0/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> Windows Vista / ';
} else if (preg_match('/nt 6.1/i', $agent)) {
$os = ' <i class= "ua-icon icon-win1"></i> Windows 7 / ';
} else if (preg_match('/nt 6.2/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> Windows 8 / ';
} else if(preg_match('/nt 6.3/i', $agent)) {
$os = ' <i class= "ua-icon icon-win2"></i> Windows 8.1 / ';
} else if(preg_match('/nt 5.1/i', $agent)) {
$os = ' <i class="ua-icon icon-win1"></i> Windows XP / ';
} else if (preg_match('/nt 10.0/i', $agent)) {
$os = ' <i class="ua-icon icon-win2"></i> Windows 10 / ';
} else{
$os = ' <i class="ua-icon icon-win2"></i> Windows X64 / ';
}
} else if (preg_match('/android/i', $agent)) {
if (preg_match('/android 9/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android Pie / ';
}
else if (preg_match('/android 8/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android Oreo / ';
}
else{
$os = ' <i class="ua-icon icon-android"></i> Android / ';
}
}
else if (preg_match('/ubuntu/i', $agent)) {
$os = ' <i class="ua-icon icon-ubuntu"></i> Ubuntu / ';
} else if (preg_match('/linux/i', $agent)) {
$os = ' <i class= "ua-icon icon-linux"></i> Linux / ';
} else if (preg_match('/iPhone/i', $agent)) {
$os = ' <i class="ua-icon icon-apple"></i> iPhone / ';
} else if (preg_match('/mac/i', $agent)) {
$os = ' <i class="ua-icon icon-mac"></i> MacOS / ';
}else if (preg_match('/fusion/i', $agent)) {
$os = ' <i class="ua-icon icon-android"></i> Android / ';
} else {
$os = ' <i class="ua-icon icon-linux"></i> Linux / ';
}
echo $os;
}最后在comments.php文件中123行插入以下代码
<span class="comment-ua">
<?php getOs($comments->agent); ?>
<?php getBrowser($comments->agent); ?></span>如果修改完都显示 Linux 的话，需要将上面的 $comments 替换成 $this 即可，注意代码缩进
以上转自左岸博客，经过部分修改
添加评论框打字特效
在主题外观设置自定义扩展中自定义 HTML 元素拓展 - 在 body 标签结束前框中加入以下代码，保存设置即可
<script>
(function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/\s/g,"\u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);
</script>
添加灰色代码
在主题自定义扩展的自定义 HTML 元素拓展 - 标签: head 头部 (meta 元素后)中添加代码
<style>
html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%);}
</style>
博客服务器系统更换
原先不怎么会linux的时候怕设置麻烦，于是选用的windows系统，现在部署服务十分不方便，系统本身占用也太多，经常卡顿，于是趁着放假更换了服务器系统
备份
更换系统前一定要备份文件，我的服务器只有博客在跑，所以备份了数据库和网站就行了，把文件下到电脑上或者传输到云上，数据库最好记录下密码等信息，重新设置时可以少走些弯路
更换系统
云服务器嘛，直接重装就好了，linux系统看个人爱好，系统随意，我选择了Ubuntu 18.04.4 LTS版本
安装软件
我一直在服务器上使用宝塔面板，非常方便操作，所以重装后直接安装宝塔
宝塔安装教程提示腾讯云需要开通一些端口
配置好的端口导入文件放在这，下载后直接导入就行，包含了腾讯云默认规则模板和宝塔安装模板
Ubuntu 18.04.4 LTS安装命令
wget -O install.sh http://123.129.198.197/install/install-ubuntu_6.0.sh && sudo bash install.sh耐心等待安装，安装完成后会有入口地址和初始账密，复制地址进入，账密验证通过后进入宝塔面板
进入面板后可以进入面板设置个性化设置，设置好后准备安装服务软件
LNPM环境
你可以用宝塔一键安装环境，你也可以自定义，我是重装，因此尽量选用当初的环境
nginx 1.17
mysql 5.6
php-7.4
phpmyadmin 4.6
又拍云存储选择对应版本安装即可
恢复网站
建立数据库，名称-用户名-密码最好和之前相同，可以避免导入备份文件时出现不可知问题
建立网站，填入之前的设置
下载typecho文件并解压目录文件在网站目录下，访问网址，安装typecho，完成后进入后台
此时切换到宝塔面板把数据库文件导入，然后复制备份的网站文件覆盖网站目录，切换成后台，刷新，就是之前的网站后台界面。
宝塔使用
此次安装的宝塔比我之前用的较新，因此安装了几个有用的插件
frp服务端
linux工具箱
一键部署源码端口开放
宝塔内的插件如果需要开放端口使用，需要在安全设置内对防火墙进行端口放行，服务器安全组放行对应端口。
添加代码高亮插件
插件下载
插件适配作者的handsome主题，因此应用于本主题需要进行修改
插件开启后我用的是GrayMac.css风格，因此修改GrayMac.css文件
code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:#696969;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:2;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}pre[class*="language-"]{padding:.5em;margin:.5em 0;overflow:auto;}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#21252a}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#999;}.token.punctuation{color:#ccc;}.token.tag,.token.attr-name,.token.namespace,.token.deleted{color:#e2777a;}.token.function-name{color:#6196cc;}.token.boolean,.token.number,.token.function{color:#f08d49;}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555;}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#cc99cd;}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#7ec699;}.token.operator,.token.entity,.token.url{color:#67cdcc;}.token.important,.token.bold{font-weight:bold;}.token.italic{font-style:italic;}.token.entity{cursor:help;}.token.inserted{color:green;}pre.line-numbers{padding-bottom:.8em;padding-left:3.3em;counter-reset:linenumber;margin-left: 38px;}pre.line-numbers>code{white-space:inherit font-size:15px}.line-numbers .line-numbers-rows{position: absolute;pointer-events: none;top: 0;font-size: 100%;left: -0.1em;width: 3em;letter-spacing: -1px;user-select: none;margin-top: 30px;width: 38px;margin-left: 1px;}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#D3D3D3;display:block;padding-right:.9em;text-align:right;background:#424242}div.code-toolbar{font-size:100%;border-radius:4px;position:relative;box-shadow:0 0 20px 5px rgba(0,0,0,.4);padding-top:30px;background-color:#3f3f3f;margin:20px 0 20px 0}.code-toolbar:before{content:" ";position:absolute;-webkit-border-radius:50%;border-radius:50%;background:#fc625d;width:11px;height:11px;left:10px;top:10px;-webkit-box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;box-shadow:20px 0 #fdbc40,40px 0 #35cd4b;z-index:2}div.code-toolbar>.toolbar{padding-right:.4em;position:absolute;top:.09em;right:.2em;width:100%;text-align:center;}div.code-toolbar:hover>.toolbar{opacity:1}div.code-toolbar>.toolbar .toolbar-item{padding:0 1px 1px 3px;display:inline-block}div.code-toolbar>.toolbar button{cursor:pointer;transition:all .3s;position:absolute;background-color:transparent;right:6px;top:4px;font-size:12px;line-height:12px;padding:3px 5px;border:1px solid;border-radius:6px;opacity:0;color:#FFF;}div.code-toolbar:hover button{opacity:1;}div.code-toolbar>.toolbar:hover{text-decoration:none!important}div.code-toolbar>.div.code-toolbar>.toolbar button,div.code-toolbar>.toolbar span{font-family:'Ubuntu',sans-serif;font-weight:bold;font-size:.9em;opacity:0;color:#FFF;}div.code-toolbar:hover .toolbar span{opacity:1;}#post-content .code-block-fullscreen{padding-top:32px;position:fixed;width:80vw;height:80vh;min-height:80vh;top:0;left:0;right:0;bottom:0;margin:auto;z-index:9999999;box-shadow:0 0 20px 0 rgba(255,255,255,.4);animation:elastic 1s;overflow:hidden;background:#696969;}.code-block-fullscreen code{--widthA:100%;--widthB:calc(var(--widthA) - 30px);height:var(--widthB);min-height:99%;overflow-y:scroll;height:100%;}.code-block-fullscreen-html-scroll{overflow:hidden;}.shelter{z-index:100;background:#696969;position:absolute;bottom:0;right:0}.max-img::-webkit-scrollbar-track-piece{background:#eee}.max-img::-webkit-scrollbar{width:8px;height:6px}.max-img::-webkit-scrollbar-thumb{border-radius:6px;background-color:#C0C0C0}.max-img::-webkit-scrollbar-thumb:hover{background-color:#C0C0C0}pre::-webkit-scrollbar-track-piece{}pre::-webkit-scrollbar{width:8px;height:6px}pre::-webkit-scrollbar-thumb{border-radius:4px;background-color:##C0C0C0}pre::-webkit-scrollbar-thumb:hover{background-color:#C0C0C0}code::-webkit-scrollbar-track-piece{}code::-webkit-scrollbar{width:6px;height:6px}code::-webkit-scrollbar-thumb{border-radius:6px;background-color:#C0C0C0}code::-webkit-scrollbar-thumb:hover{background-color:#bbb}html::-webkit-scrollbar-track-piece{background:#eee}html::-webkit-scrollbar{width:8px;height:6px}html::-webkit-scrollbar-thumb{border-radius:4px;background-color:#cbcbcb}html::-webkit-scrollbar-thumb:hover{background-color:#C0C0C0}
另外需要引用js代码以让代码在行内自动留空
进入主题的/usr/js目录，如没有js目录则需新建，在目录中新建custom.js文件，打开js文件，粘贴以下代码
const list = document.getElementsByTagName("p")
for (let i = 0; i < list.length; i++) {
document.getElementsByTagName("pre")[i].setAttribute("style","padding-left:8px;");
}保存文件，js文件使用 script 标签通过设置主题外观设置 - 主题自定义设置 - 自定义 HTML 元素拓展 - 在 body 标签结束前引入
<script src="https://example.com/path/to/custom.js"></script>最后，外观设置里代码块取消不显示行号，取消自动换行，改由插件控制，这样插件应该能正常使用
版权属于：mancornuto
本文链接：https://mancornuto.xyz/archives/0003.html
转载时须注明出处及本声明