利用element显示Notification通知，复制提醒，禁用F12或右键菜单提醒
前言之前博客默认的是Qmsg，虽然很简单但是不容易看到，因此全站都换成了Notification通知。今天刚改好就被朋友催，因为很简单就记一下作为备忘了，具体效果可见图，本博客也用的这个方法，可查看实际效果。引用cdn资源<!-- 引入VUE -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<!-- 引入样式 -->
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
<!-- 引入组件库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/packages/theme-chalk/lib/index.css">代码放在头部（比如header.php）就可以了代码复制提醒在任意引用全局js的文件内添加： - 隐藏内容 - 禁用右键菜单并提醒在任意引用全局js的文件内添加： - 隐藏内容 - 禁用F12按键并提醒在任意引用全局js的文件内添加： - 隐藏内容 - 相关扩展禁用左键选择//禁用左键选择
document.onselectstart = function () {
return false;
}禁用复制//禁用复制
document.oncopy = function () {
return false;
}禁用Ctrl+Shift+I//禁用Ctrl+Shift+I
if ((event.ctrlKey) && (event.shiftKey) && (event.keyCode == 73)) {
return false;
}
傻瓜式教程——玩客云搭博客——从宝塔到穿透（下）
前言上一期写着写着，字就变多了，所以分成三个部分，这部分主要的在U盘上安装宝塔。刷机（续）刷机有风险，操作需谨慎！！！因刷机导致的问题本人概不负责。宝塔设置首次进入宝塔时，需要安装环境这里我们选择——Nginx（这里不推荐Apache） - 隐藏内容 - 之后慢慢等待安装即可。安装结束后，进入宝塔左侧软件商店——已安装，检测是否全部顺利安装，若缺失，即安装失败，重新在软件仓库安装即可。安装博客程序这里大家可以自选自己的博客，或者是其他的web程序。使用文件管理后台安装好后，，，，，，我想大家都会，就不啰嗦了。检查博客在绑定本地80接口后，进入本地ip，查看是否顺利。能顺利访问即可。樱花frp注册樱花frp在本地检查无误后，进入樱花frp官网，注册账号。若使用ssl方式连接国内节点，需开放宝塔443接口，以及一元的樱花frp实名认证。创建隧道创建一条隧道创建成功后，可得到图中红字启动参数，记下来。frpc客户端下载 - 隐藏内容 - 可见隧道已经成功连同。frp自启动这个本喵没成功，部分参考代码放在这里，有成功的感谢指教。 - 隐藏内容 - 教程结束
使用API，为博客添加“随机一篇美文”的功能
上一次，我们是用ALPAI制作了 首页显示新闻早报API，可每日更新 的功能，这一次将随机一篇美文也放出来方法，效果可以参考下图。方法很简单，如果你有之前调用新闻早报的经验，那么这次会非常简单~效果图方法这次也选择ALPAI，随机美文的网址在这里：https://alapi.cn/api/view/36方法和新闻早报的方法一样，可以去翻看之前的文章。需要注意的是，这次也同样从\usr\themes\Joe复制出一份page.php，并在头部添加<?php
/**
* 每日一文
*
* @package custom
*
**/
?>将内部<?php $this->need('public/article.php'); ?>代码替换成api的示例代码，别忘了换token在$err = curl_error($curl);下添加一行$a=json_decode($response,true);效果为：$err = curl_error($curl);
$a=json_decode($response,true);将echo $response;替换为以下代码 - 隐藏内容 - 保存（具体图片可参考上期）后台新建页面，假设自定义的地址是readnews.html，模板选择每日一文查看新页面是否显示正常注意事项之前写的注意事项总有人不看，再写一遍——修改前记得备份不显示文章记得查看是否更改token，可查看图片中token形式。结尾的?>是否忘记跳转错误记得修改成自己的内页链接
Typecho-JOE主题- 在任意位置显示最新公告或日记 （替换原有公告）
本来打算typecho不写什么修改记录了，但是经常有小伙伴留言的话我也记不住都是怎么改的，所以、还是偶尔随缘记录一下吧~本文火喵原创，禁止转载 有的小伙伴来访可能已经注意到了，右侧侧边栏下侧有最新心情记录，还有头图下侧的公告那里，也能直接点进去看到记录，那么怎么样做呢~我在网上翻到了这样一篇文章 《Typecho调用单独页面评论代码》 。因为我们的公告还有心情（日记，随笔，微博）页面的记录，都是以评论的方式记录下的，所以我们只需要调用单独页面的最新评论即可。因为博客的登录特效，所以我们的公告，心情页面需要设置成仅登录时显示留言文本框，具体的页面设置方法和现成模板可以参考我的这一篇文章—— 《添加了一个随记页面》 假如我们做一个公告，以此替换joe自带的公告，在我们设置好独立模板后，需要记住页面缩略名，也就是页面的slug，比如我们的是gonggao，然后在网站的根目录下新建 commlist.php 文件，内容如下： - 隐藏内容 - 然后，在joe主题目录下\themes\Joe\index.php，在147行处（如图）使用以下代码替换红框中代码 <?php include "commlist.php";?>这样就完成了，快去发布一条公告试一下吧！参考 https://mrasong.com/a/typecho-comment-list
Valine-实现QQ邮箱识别生成头像地址（完美解决头像问题）
无意中发现的小方法，超级棒，解决了火喵多年苦于有的人没头像的困境，开心~ 分享给大家！前言WordPress-sakura版本中，Mashiro大佬是添加了QQ邮箱识别生成头像地址的功能的，但是hojun大佬移植时没有注意这个功能哦！参考了其他版本评论系统对头像的处理方法：Typecho实现QQ邮箱识别生成头像地址获得两个接口?，美滋滋：一个是QQ头像的，一个是Gravatar国内源，它们的调用方式如下。QQ头像 http://q1.qlogo.cn/g?b=qq&nk=QQ号&s=100Gravatar头像 http://cdn.v2ex.com/gravatar/md5加密后的邮箱?s=100以上就是两个头像接口的信息，值得注意的是Gravatar后面的s分辨率参数可以随意定义，而QQ不行，QQ只有几个有限的分辨率，比如100,200,640，其它的数字会报400错误，所以QQ的s参数更像是一种清晰度，宽高还是通过css定义比较好。我的启示是：获取邮箱判断是否为qq邮箱提取qq号将valine中的头像地址改为上述接口地址此时，我觉得想法的实现流程非常缜密，感到可行，开心到飞起~ let me do it！F12查看源码–发现valine中显示头像的相关代码是：（关键标签：vimg）再以我ctrl+F快速查找的本领（关键词：vimg），不负众望，在Valine.min.js中找到首先我们要知道：valine的头像处理接口是gravator拼接头像地址并显示的关键步骤：ok，找到源头，替换src的内容即可。<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">正式开干！示例修改valine.min.js下载Valine.min.js到本地themes\sakura\source\js\Valine.min.js修改引入本地的Valine我的引入位置在：themes\sakura\layout\_partial\comment.ejs如果你是在footer.ejs，注意相对路径只有一个点打开Valine.min.js，ctrl+F快速查找关键词：m.cdn+a(e.get("mail"))+m.params定位到：稍加换行如图所示：修改前：C=function(e,n,r){
var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+(m.cdn+a(e.get("mail"))+m.params)+'">',修改后：其实关键代码就这一点点~ QAQ var C=function(e,n,r){
var qq_img=m.cdn+a(e.get("mail"))+m.params;//默认gravator头像接口
if(e.get("mail").indexOf("@qq.com") >= 0){
var prefix = e.get("mail").replace(/@.*/, "");//前缀
var pattern=/^\d+$/g; //正则表达式，数字
var result= prefix.match(pattern);//match 是匹配的意思
if(result!==null){
qq_img = "//q1.qlogo.cn/g?b=qq&nk="+ prefix +"&s=100";
}
}
var i=u.create("div",{class:"vcard",id:e.id}),o=m.hide?"":'<img class="vimg" src="'+ (qq_img)+'">',流程：默认还是gravator头像接口判断是否是qq邮箱，提取前缀prefixqq头像接口是qq号，如正则筛选剔除–重命名了带英文的qq邮箱拼接头像地址加入src显示！效果哈哈哈，如果有其他邮箱头像接口，都可以同理加上哦！都说博客的 评论模块 和 消息通知模块 是最难的，为了花式DIY评论区，效果自己也比较满意吧。
使Typecho实现PJAX无刷新访问
使Typecho实现PJAX无刷新访问因为新建了一个typecho博客，界面很干净简洁，加载速度也异常迅速。因此打算在左侧侧边栏创建一个网易云音乐的音乐外链，但是并没有全站无刷新。因此百度了一下，解决了问题。下面是解决方法，具体效果欢迎访问吃糖博客 【地址现已失效】在服务器中新建pjax.js文件，用于操作 PJAX 组件。内容暂时留空。打开网站的footer.php文件， 在文件底部</body>的前面添加下面代码：<script src="https://cdn.jsdelivr.net/npm/pjax/pjax.js"></script>
<script src="https://tuziang.com/usr/themes/Fantasy/static/pjax.js"></script>其中第二行需要替换成你自己的路径。现在开始填写刚才新建的pjax.js文件：var pjax = new Pjax({
// 在页面进行 PJAX 时需要被替换的元素或容器，一条一个 CSS 选择器，数组形式
selectors: [
"title",
"meta[name=description]",
"main"
],
cacheBust: false
})
selectors中是每次刷新都要改变的元素。动画一使用nprogress的加载动画: http://ricostacruz.com/nprogress/同样在footer.php底部添加两行代码<script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
<link href="https://unpkg.com/nprogress@0.2.0/nprogress.css" rel="stylesheet" type="text/css">
接着修改刚才我们自己新建的pjax.js文件，在文件底部添加下面两个函数document.addEventListener('pjax:send', function (){
NProgress.start();
});
document.addEventListener('pjax:complete', function (){
NProgress.done(); ;
});动画二这个动画来自于https://blog.dyboy.cn/program/56.html利用Pjax实现网页无刷新加载的详细方法 - DYBOY - 专注程序开发与信息安全在header.php文件中的</body>前面添加这行代码： <!-- pjax 动画 -->
<div class="loading"> <div id="loader"></div></div>接着去css文件中，添加：/*pjax 动画*/
.loading{display:none}
.loading{height:100%;width:100%;position:fixed;top:0;left:0;z-index:999999;background-color:rgba(250,250,250,.9)}
.loading img{width: 280px;height:210px;position: relative;top: 45%;left: 50%;margin-left:-140px;margin-top: -105px;}
#loader{display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #ff5a5a; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite;}
#loader:before{content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #5af33f; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite;}
#loader:after{content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #6dc9ff; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}
@-webkit-keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
@keyframes spin{0%{-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);} 100%{-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}}
最后修改刚才我们自己新建的pjax.js文件：document.addEventListener('pjax:send', function (){
$(".loading").css("display", "block");
});
document.addEventListener('pjax:complete', function (){
$(".loading").css("display", "none");
});我用的就是第一种动画效果。
【火喵的糖果屋】旧站今天闭站
去年2019年2月6日 21:32，我发布了一篇新年日志。那时候的我刚把域名从.pw转到.cn。转眼间新的一年又要来临，在这之前，彻底的告别了Wordpress，转向Hexo，也有留念，也有不舍。那就放一些截图吧~首先是全站的截图然后是手机的全站截图接下来是19年新年日志其次是个人页面还有最后的留言板最后是出生两周的问答板块
