Typecho cuteen主题美化(未完待续~)
2023-02-18 16:46:47 时间
网站分享成卡片 在后台头部自定义或者在head.php内添加以下内容
<!-- QQCard BEGIN -->
<meta itemprop="name" content="小白の博客"/>
<meta itemprop="image" content="https://img.aiyo99.com/cdn/img/head.jpeg" />
<meta name="description" itemprop="description" content="我在等一个人..." />
<!-- QQCard END -->
Typecho文章页添加百度收录检测
post.php合适的地方添加
function baidu_check(){
var url= window.location.href
$.getJSON("https://www.xiaobai666.top/usr/themes/Cuteen/baidu.php?domain="+url,function(result){ //调用api
if (result.code == 200) {
$('#baidu_icon').removeClass('glyphicon-refresh');
$('#baidu_icon').addClass('glyphicon-ok-circle');
$('#baidu_result').text('百度已收录');
}else if(result.code == 403){
$('#baidu_icon').removeClass('glyphicon-refresh');
$('#baidu_icon').addClass('glyphicon-info-sign');
/*$('#baidu_result').text('百度未收录');*/
$('#baidu_result').html('<a style="color:red;" rel="external nofollow" title="点击提交收录!" target="_bl
ank" href="https://ziyuan.baidu.com/linksubmit/url?sitename='+url+'">百度未收录</a>');
}else{
$('#baidu_icon').removeClass('glyphicon-refresh');
$('#baidu_icon').addClass('glyphicon-remove-circle');
$('#baidu_result').text('查询收录失败');
}
});
}
baidu_check();
在的位置添加
加载中
api代码
false,
"msg" => "未传入请求参数!"
);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
exit;
}
if(substr($domain, -1) == '/'){
$domain = substr($domain,0,strlen($domain)-1);
}
$data = checkBaidu($domain);
echo json_encode($data,JSON_UNESCAPED_UNICODE);
function checkBaidu($url){
$header = array(
"Host:www.baidu.com",
"Content-Type:application/x-www-form-urlencoded",//post请求
"Connection: keep-alive",
"Referer:https://www.baidu.com",
"User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.162 Safari/537.36"
);
$url = 'https://www.baidu.com/s?ie=UTF-8&wd='.urlencode($url).'&usm=3&rsv_idx=2&rsv_page=1';
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt ($ch, CURLOPT_HTTPHEADER, $header);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION,1);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$output = curl_exec($ch);
curl_close($ch);
if(strpos($output, '没有找到') || strpos($output, '很抱歉')){
$data = array(
"code" => 403,
"msg" => "该域名暂时未被百度收录!"
);
}else{
$number = GetBetween($output,'百度为您找到相关结果约','个');
if(empty($number) || $number == 0){
$number = GetBetween($output,'找到相关结果数约','个');
if(empty($number) || $number == 0){
$data = array(
"code" => false,
"msg" => "获取百度收录失败!"
);
return $data;
}
}
$data = array(
"code" => 200,
"msg" => "该域名已被百度收录!",
"number" => str_replace(',','',$number)
);
}
return $data;
}
function GetBetween($content,$start,$end){
$r = explode($start, $content);
if (isset($r[1])){
$r = explode($end, $r[1]);
return $r[0];
}
}
?>
其他主题在functions.php添加
//百度收录
function baidu_check() {
$url = baidu_url();
$api = 'https://www.xiaobai666.top/usr/themes/Cuteen/baidu.php?domain='; //更改为你自己的API
$result = json_decode(file_get_contents($api.$url));
if($result['code'] == 200){
echo '百度已收录';
}elseif($result['code'] == 403){
echo '百度未收录';
}else{
echo '查询收录失败';
}
}
function baidu_url(){
if((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') || (isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTT
P_X_FORWARDED_PROTO'] == 'https')){
return 'https'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
}else{
return 'http'.'://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
}
}
添加天气
给你提供两个天气插件
和风天气:https://console.qweather.com/
知心天气:https://www.seniverse.com/
方法都是一样的,要去申请key,我这里用的是和风天气
1、注册账号之后创建应用,样式随意,我选择的是第二个简约版的,最后生成代码
![和风天气][1]
在你想要显示的地方添加,如果和我一样,就直接在navbar.php中添加
WIDGET = {
CONFIG: {
"modules": "01234",
"background": 5,
"tmpColor": "4A4A4A",
"tmpSize": 16,
"cityColor": "4A4A4A",
"citySize": 16,
"aqiSize": 16,
"weatherIconSize": 24,
"alertIconSize": 18,
"padding": "10px 10px 10px 10px",
"shadow": "1",
"language": "auto",
"borderRadius": 5,
"fixed": "false",
"vertical": "middle",
"horizontal": "center",
"key": "ffd1921ae0494d26a77c34a5012b8ec9"
}
}
![和风天气][2]
如果你网站开启了pjax会有小bug
添加复制提醒
没找到好看的复制提醒代码只能凑合用这个了,有好看的记得分享一下 ,在头部引用
<script src="https://www.xiaobai666.top/usr/themes/Cuteen/static/layer/layer.js"></script>
在后台底部自定义添加
<script>
document.addEventListener("copy",function(e){new Vue({data:function(){this.$notify({title:"复制成功",message:"若要转载请务必保留原文链接!",type:"success"});return{visible:false}}})})
</script>
Typecho添加评论邮件通知、https://www.aiyo99.com/archives/475.html 进站提示https://www.aiyo99.com/archives/488.html 添加网站运行时间和加载时间https://www.aiyo99.com/archives/476.html 添加访问量统计 我这里用的是插件,当然你们也可以用代码 插件:https://wws.lanzous.com/iVAPflj0zfa 密码:8x7v 之后在后台启用,并在你想要显示的地方添加以下代码
这个是访问统计
这个是点击量
PageViews_Plugin::showPageViews('点击量','次');
添加在线人数统计 在functios.php最后添加
//在线人数
function online_users() {
$filename='online.txt'; //数据文件
$cookiename='Nanlon_OnLineCount'; //Cookie名称
$onlinetime=30; //在线有效时间
$online=file($filename);
$nowtime=$_SERVER['REQUEST_TIME'];
$nowonline=array();
foreach($online as $line){
$row=explode('|',$line);
$sesstime=trim($row[1]);
if(($nowtime - $sesstime)<=$onlinetime){
$nowonline[$row[0]]=$sesstime;
}
}
if(isset($_COOKIE[$cookiename])){
$uid=$_COOKIE[$cookiename];
}else{
$vid=0;
do{
$vid++;
$uid='U'.$vid;
}while(array_key_exists($uid,$nowonline));
setcookie($cookiename,$uid);
}
$nowonline[$uid]=$nowtime;
$total_online=count($nowonline);
if($fp=@fopen($filename,'w')){
if(flock($fp,LOCK_EX)){
rewind($fp);
foreach($nowonline as $fuid=>$ftime){
$fline=$fuid.'|'.$ftime."\n";
@fputs($fp,$fline);
}
flock($fp,LOCK_UN);
fclose($fp);
}
}
echo "$total_online";
}
在你想显示的地方添加,我这里添加在footer.php
在线人数: 人
网站添加灯笼 有两个样式 1、在后台底部自定义添加以下代码
<!-- 灯笼样式开始 -->
<style>
@media only screen and (max-width: 760px) {
.deng-box, .deng-box1 {
display:none;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.right {
float: left!important;
}
}
.deng-box {
position: fixed;
top: 20px;
left: 10px;
z-index: 3;
}
.deng-box1 {
position: fixed;
top: 20px;
right: 10px;
z-index: 3;
}
.deng-box1 .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 {
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 3s infinite ease-in-out;
box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.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: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.xian {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.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-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.shui-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.deng:before {
position: absolute;
top: -7px;
left: 29px;
height: 12px;
width: 60px;
content: " ";
display: block;
z-index: 999;
border-radius: 5px 5px 0 0;
border: solid 1px #dc8f03;
background: #ffa500;
background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.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-t {
font-family: 华文行楷;
font-size: 26px;
color: #dc8f03;
font-weight: bold;
line-height: 44px;
text-align: center;
}
.night .deng-t,
.night .deng-box,
.night .deng-box1 {
background: transparent !important;
}
@-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)
}
}
</style>
<div class="deng-box">
<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-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>
<!-- 元宵节灯笼样式结束 -->
2、在底部自定义添加
<div class="dengl">
<div class="d-box">
<div class="d1"><span></span><span><p></p></span>
<ul>
<li></li>
<li></li>
<li><span></span></li>
<li></li>
<li></li>
</ul>
</div>
<div class="d2"><span></span><span><p></p></span>
<ul>
<li></li>
<li></li>
<li><span></span></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="d-box1">
<div class="d1"><span></span><span><p></p></span>
<ul>
<li></li>
<li></li>
<li><span></span></li>
<li></li>
<li></li>
</ul>
</div>
<div class="d2"><span></span><span><p></p></span>
<ul>
<li></li>
<li></li>
<li><span></span></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
在头部自定义添加
<link rel="stylesheet" href="https://ku.gitcc.cn/cdn/css/lantern.css">
本文灯笼样式参考:https://blog.fddmao.com/65.html 评论区添加背景 在自定义css中添加
/**评论区**/
#comment-textarea {
background-image:url(https://img.aiyo99.com/cdn/img/plk.gif);
background-size:contain;
background-repeat:no-repeat;
background-position:right bottom;
transition:all 0.25s ease-in-out 0s;
}
textarea#comment-textarea:focus{
background-position-y:120px;
transition:all 0.25s ease-in-out 0s;
}
头像旋转呼吸光环 在自定义css中添加
/**头像旋转呼吸光环**/
.friends-img.mr-2.lazy.loaded:hover{
transform:rotate(360deg);
}
.comment-avatar:hover{
transform:rotate(360deg);
}
.sidebar-comment-avatar.mr-1:hover{
transform:rotate(360deg);
}
.friends-img.mr-2.lazy.loaded,.comment-avatar,.sidebar-comment-avatar.mr-1 {
border-radius: 50%;
animation: light 4s ease-in-out infinite;
transition: all 0.5s;
}
@keyframes light {
0% {
box-shadow: 0 0 4px
#ff1354;
}
25% {
box-shadow: 0 0 16px #1ebbff;
}
50% {
box-shadow: 0 0 4px #0ed39f;
}
75% {
box-shadow: 0 0 16px #4fe7f4;
}
100% {
box-shadow: 0 0 4px #f35444;
}
}
图标跳动
在自定义css中添加
/*图标跳动*/
#like.btn.btn-outline-primary.rounded-pill.align-items-center.d-inline-flex,#headingMoney.btn.btn-outline-primary.rounded-pill.align-items-center.d-inline-flex {
animation: star 0.5s ease-in-out infinite alternate;
}
@keyframes star {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
评论添加@ 在functions.php中添加
//获取评论的锚点链接
function get_comment_at($coid)
{
$db = Typecho_Db::get();
$prow = $db->fetchRow($db->select('parent,status')->from('table.comments')
->where('coid = ?', $coid));//当前评论
$mail = "";
$parent = @$prow['parent'];
if ($parent != "0") {//子评论
$arow = $db->fetchRow($db->select('author,status,mail')->from('table.comments')
->where('coid = ?', $parent));//查询该条评论的父评论的信息
@$author = @$arow['author'];//作者名称
$mail = @$arow['mail'];
if(@$author && $arow['status'] == "approved"){//父评论作者存在且父评论已经审核通过
if (@$prow['status'] == "waiting"){
echo '(评论审核中))';
}
echo '@' . $author . '';
}else{//父评论作者不存在或者父评论没有审核通过
if (@$prow['status'] == "waiting"){
echo '(评论审核中))';
}else{
echo '';
}
}
} else {//母评论,无需输出锚点链接
if (@$prow['status'] == "waiting"){
echo '(评论审核中))';
}else{
echo '';
}
}
}
修改comment.php文件 原内容
content) ?>
修改成
coid)?>content) ?>
右键美化
在footer.php中前面添加
a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font
-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}
首页
复制
前进
后退
重载网页
友链
给我留言吧
(function(a) {
a.extend({
mouseMoveShow: function(b) {
var d = 0,
c = 0,
h = 0,
k = 0,
e = 0,
f = 0;
a(window).mousemove(function(g) {
d = a(window).width();
c = a(window).height();
h = g.clientX;
k = g.clientY;
e = g.pageX;
f = g.pageY;
h + a(b).width() >= d && (e = e - a(b).width() - 5);
k + a(b).height() >= c && (f = f - a(b).height() - 5);
a("html").on({
contextmenu: function(c) {
3 == c.which && a(b).css({
left: e,
top: f
}).show()
},
click: function() {
a(b).hide()
}
})
})
},
disabledContextMenu: function() {
window.oncontextmenu = function() {
return !1
}
}
})
})(jQuery);
function getSelect() {
"" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没>
还没选择文字呢!") : document.execCommand("Copy")
}
function baiduSearch() {
var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
"" == a ? layer.msg("啊噢...你没还没选择文字呢!") : window.open("https://www.baidu.com/s?wd=" + a)
}
$(function() {
for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c
< b.length; c++) if (0 < a.indexOf(b[c])) {
d = !1;
break
}
d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});
动态标题 在后台底部自定义添加
//崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
document.title = "╭(°A°)╮ 页面崩溃啦 ~";
clearTimeout(titleTime);
} else {
document.title = "(ฅ>ω<*ฅ) 噫又好了~" + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});
添加打字机效果 在任意位置添加,我在hero.php中上面添加的
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 = ["Walk between the black and white.", ].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'));
在后台小标题添加(可能会报错)
或者修改hero.php中的代码
源代码:
修改为
添加转载说明 在post.php最下面添加
document.body.addEventListener('copy', function (e) {
if (window.getSelection().toString() && window.getSelection().toString().length > 10) {
setClipboardText(e);
}
});
function setClipboardText(event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData) {
event.preventDefault();
var htmlData = ''
+ '著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权,非商业转载请注明出处。<br>'
+ '作者:<?php $this->author() ?><br>'
+ '链接:' + window.location.href + '<br>'
+ '来源:<?php $this->options->siteUrl(); ?><br><br>'
+ window.getSelection().toString();
var textData = ''
+ '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权,非商业转载请注明出处。\n'
+ '作者:<?php $this->author() ?>\n'
+ '链接:' + window.location.href + '\n'
+ '来源:<?php $this->options->siteUrl(); ?>\n\n'
+ window.getSelection().toString();
clipboardData.setData('text/html', htmlData);
clipboardData.setData('text/plain',textData);
}
}
打字特效 在footer.php中添加
<!--评论框跳动的彩球,js链接 -->
<script type="text/javascript" src="https://bqb.xiaobai666.top/js/commentTyping.js"></script>
![请输入图片描述][5]
自己去扒js代码或者引用我的 https://bqb.xiaobai666.top/js/commentTyping.js
网站底部文字跳动 在后台css自定义添加
/*跳动文字css*/
.Pshake{
display: inline-block;
will-change: transform; -webkit-transform-origin: center center; -ms-transform-origin: center center;
transform-origin: center center; -webkit-animation: Pshake_Crazy 1s ease-in-out infinite;
animation: Pshake_Crazy 1s ease-in-out infinite;
}
@keyframes Pshake_Crazy{
10%{transform:translate(-0.5px,-0.5px) rotate(0.5deg);}
20%{transform:translate(-0.5px,1.5px) rotate(0.5deg);}
30%{transform:translate(1.5px,0.5px) rotate(0.5deg);}
40%{transform:translate(1.5px,-0.5px) rotate(-0.5deg);}
50%{transform:translate(2.5px,1.5px) rotate(1.5deg);}
60%{transform:translate(-0.5px,-0.5px) rotate(-0.5deg);}
70%{transform:translate(-0.5px,2.5px) rotate(1.5deg);}
80%{transform:translate(2.5px,-1.5px) rotate(-0.5deg);}
90%{transform:translate(1.5px,-0.5px) rotate(1.5deg);}
0%,100%{transform:translate(0,0) rotate(0);}
}
在你想跳动的地方添加class="Pshake"
相关文章
- 爬虫介绍
- Deepin20 LNMP环境搭建(又一次瞎折腾的经历)
- urllib库的高级用法
- 数据提取-Beautiful Soup
- Requests库的用法
- Deepin系统navicat15安装
- URLError与Cookie
- 数据提取-正则表达式
- 数据提取-XPath
- 爬虫之多线程
- useState的使用
- 2022 年最受瞩目的新特性 CSS @layer 到底是个啥?
- Exclude 的实现
- infer 递归实现反转数组
- rsync用法教程(已验证)
- Selenium 处理滚动条
- 如何生成炫酷的词云(已验证)
- ubuntu生成pem证书连接服务器(已验证)
- frp内网穿透(已验证)
- Scrapy 框架介绍与安装