搜索到
11
篇与
美化
的结果
-
给Typecho的Joe主题隐藏/显示侧边栏模块 上上上上期给大家写了个侧边栏公告，但有个 缺点 ，后台编辑公告栏无文字时不会隐藏，这样很不美观 修复教程开始1.将下列代码放入主题目录的functions.php文件里 // 侧边栏公告开关 $NoticeSwitch = new Typecho_Widget_Helper_Form_Element_Select( 'NoticeSwitch', array( 'off' => '关闭（默认）', 'on' => '开启' ), 'off', '是否开启侧边栏公告模块 - PC', '介绍：用于控制是否显示公告' ); $NoticeSwitch->setAttribute('class', 'joe_content joe_other'); $form->addInput($NoticeSwitch->multiMode());2.再将下列代码放入主题目录的aside.php文件里 <?php if ($this->options->NoticeSwitch === 'on') : ?> 包裹住你要隐藏的侧边栏模块的代码区域 <?php endif; ?>懒人专用 把下面代码替换 3个方框 里的代码即可 <?php if ($this->options->NoticeSwitch === 'on') : ?> <section class="joe_aside__item hot"> <div class="joe_aside__item-title"> <svg t="1703481319577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1547" width="200" height="200"><path d="M770.9 161.9H648.4v-30.4c0-17.4-14.3-31.7-31.7-31.7h-1.8c-17.4 0-31.7 14.3-31.7 31.7v30.4H414.8v-30.4c0-17.4-14.3-31.7-31.7-31.7h-1.8c-17.4 0-31.7 14.3-31.7 31.7v30.4H227.2c-36.6 0-66.3 29.7-66.3 66.3V886c0 36.6 29.7 66.3 66.3 66.3h543.7c36.6 0 66.3-29.7 66.3-66.3V228.2c0-36.6-29.8-66.3-66.3-66.3z m-421.2 65.4v18.3c0 17.4 14.2 31.7 31.7 31.7h1.8c17.4 0 31.7-14.3 31.7-31.7v-18.1l168.4 0.3v17.8c0 17.4 14.2 31.7 31.7 31.7h1.8c17.4 0 31.7-14.3 31.7-31.7V228l123.6 0.3v112.4H227l0.2-113.5 122.5 0.1z m421.2 659.8L226 886l0.8-480.2H772V886c0 0.6-0.5 1.1-1.1 1.1z" fill="#4A5FE2" p-id="1548"></path><path d="M630.7 532.7H367.3c-17.9 0-32.6 14.7-32.6 32.6s14.7 32.6 32.6 32.6h263.4c17.9 0 32.6-14.7 32.6-32.6s-14.7-32.6-32.6-32.6zM630.7 654.9H367.3c-17.9 0-32.6 14.7-32.6 32.6 0 17.9 14.7 32.6 32.6 32.6h263.4c17.9 0 32.6-14.7 32.6-32.6 0-17.9-14.7-32.6-32.6-32.6z" fill="#A1AFFF" p-id="1549"></path></svg> <span class="text">公告</span> </div> <?php $this->options->Notice() ?> </section> -
-
给Typecho的Joe主题添加侧边栏公告 可能有人觉得Joe主题自带的公告不好用 因为字数多了会... 然后本人复制粘贴改代码写出了侧边栏公告 下图为侧边栏公告样式图 教程开始1 .将下列代码放入主题目录的functions.php文件里 // 侧边栏公告 $Notice = new Typecho_Widget_Helper_Form_Element_Textarea( 'Notice', NULL, NULL, '侧边栏公告 - PC', '介绍：侧边栏公告' ); $Notice->setAttribute('class', 'joe_content joe_other'); $form->addInput($Notice);2 .再将下列代码放入主题目录public目录aside.php文件里 <section class="joe_aside__item hot"> <div class="joe_aside__item-title"> <svg t="1703481319577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1547" width="200" height="200"><path d="M770.9 161.9H648.4v-30.4c0-17.4-14.3-31.7-31.7-31.7h-1.8c-17.4 0-31.7 14.3-31.7 31.7v30.4H414.8v-30.4c0-17.4-14.3-31.7-31.7-31.7h-1.8c-17.4 0-31.7 14.3-31.7 31.7v30.4H227.2c-36.6 0-66.3 29.7-66.3 66.3V886c0 36.6 29.7 66.3 66.3 66.3h543.7c36.6 0 66.3-29.7 66.3-66.3V228.2c0-36.6-29.8-66.3-66.3-66.3z m-421.2 65.4v18.3c0 17.4 14.2 31.7 31.7 31.7h1.8c17.4 0 31.7-14.3 31.7-31.7v-18.1l168.4 0.3v17.8c0 17.4 14.2 31.7 31.7 31.7h1.8c17.4 0 31.7-14.3 31.7-31.7V228l123.6 0.3v112.4H227l0.2-113.5 122.5 0.1z m421.2 659.8L226 886l0.8-480.2H772V886c0 0.6-0.5 1.1-1.1 1.1z" fill="#4A5FE2" p-id="1548"></path><path d="M630.7 532.7H367.3c-17.9 0-32.6 14.7-32.6 32.6s14.7 32.6 32.6 32.6h263.4c17.9 0 32.6-14.7 32.6-32.6s-14.7-32.6-32.6-32.6zM630.7 654.9H367.3c-17.9 0-32.6 14.7-32.6 32.6 0 17.9 14.7 32.6 32.6 32.6h263.4c17.9 0 32.6-14.7 32.6-32.6 0-17.9-14.7-32.6-32.6-32.6z" fill="#A1AFFF" p-id="1549"></path></svg> <span class="text">公告</span> </div> <?php $this->options->Notice() ?> </section>3 .在Typecho后台→外观→Joe后台→其他设置 修改公告内容<div class="card-widget card-announcement" style="padding: 20px 15px;color: var(--routine);"> 测试 </div>缺点：公告无文字时 侧边栏公告不会消失 如下图 解决缺点方法点我
-
给Typecho的Joe主题添加侧边栏现在时间 ` 现在时间 `1. 使用本站链接将下列代码放入 joe主题后台→侧栏设置→自定义侧边栏模块<section class="joe_aside__item today"> <div class="joe_aside__item-title"> <svg t="1679669686576" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2889" width="200" height="200"><path d="M511.913993 63.989249c-247.012263 0-447.924744 200.912481-447.924744 447.924744s200.912481 447.924744 447.924744 447.924744 447.924744-200.912481 447.924744-447.924744S758.926256 63.989249 511.913993 63.989249zM511.913993 895.677474c-211.577356 0-383.763481-172.186125-383.763481-383.763481 0-211.577356 172.014111-383.763481 383.763481-383.763481s383.763481 172.014111 383.763481 383.763481S723.491349 895.677474 511.913993 895.677474z" fill="#575B66" p-id="2890"></path><path d="M672.05913 511.913993l-159.973123 0L512.086007 288.123635c0-17.717453-14.277171-32.166639-31.994625-32.166639-17.717453 0-31.994625 14.449185-31.994625 32.166639l0 255.956996c0 17.717453 14.277171 31.994625 31.994625 31.994625l191.967747 0c17.717453 0 32.166639-14.277171 32.166639-31.994625C704.053754 526.191164 689.604569 511.913993 672.05913 511.913993z" fill="#575B66" p-id="2891"></path></svg> <span class="text">现在时间</span> <span class="line"></span> </div> <iframe style="max-width: 100%" frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="245" src="https://blog.caiu.top/html/zhong/"></iframe>2. 自建源码 {cloud title="时钟Html单页源码" type="default" url="https://cloud.caiu.top/down.php/ea1e7c5cb97de69bf208448c4dd78ac6.zip" password=""/}上传到服务器搭建好后 将这修改成你的搭建目录
-
给Typecho的Joe主题添加在线人数统计 代码如下<?php //首先你要有读写文件的权限，首次访问不显示，正常情况刷新即可 $online_log = "slzxrs.dat"; //保存人数的文件到根目录, $timeout = 30;//30秒内没动作者,认为掉线 $entries = file($online_log); $temp = array(); for ($i=0;$i<count($entries);$i++){ $entry = explode(",",trim($entries[$i])); if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) { array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp } } array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间 $slzxrs = count($temp); //计算在线人数 $entries = implode("",$temp); //写入文件 $fp = fopen($online_log,"w"); flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作 fputs($fp,$entries); flock($fp,LOCK_UN); fclose($fp); $tj= "在线人数：".$slzxrs."人"; ?><?php echo $tj ?>使用方法1:先把第一串代码放在footer.php顶部 2:把第二 <?php echo $tj ?> 放在你想放的位置 例如 {dotted startColor="#ff6c6c" endColor="#1989fa"/} 其他主题也可以添加，原理一样
-
-
-
-
给你的网站添加FPS 代码来了<!-- 显示FPS开始 --> <script> //if ((!navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) {//匹配手机，把注释去掉就只显示PC端 $('body').before('<div id="fps" style="color:#FFB6C1;z-index:10000;position:fixed;top:3px;left:3px;font-weight:bold;"></div>'); var showFPS = (function() { var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); } ; var e, pe, pid, fps, last, offset, step, appendFps; fps = 0; last = Date.now(); step = function() { offset = Date.now() - last; fps += 1; if (offset >= 1000) { last += offset; appendFps(fps); fps = 0; } requestAnimationFrame(step); } ; appendFps = function(fps) { $('#fps').html(fps + 'FPS'); } ; step(); } )(); //}//手机和电脑开启 </script> <!-- 显示FPS结束 -->
-
添加彩色阅读进度条 ↑就是这样的↑ 将下方代码放到头部HTML代码内<div id="percentageCounter"></div>将下方代码放到哪都可以 其实我也不知道行不行 绿红色的<!-- 阅读进度条开始 --> <style type="text/css"> #percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #339933,#FF6666);border-radius:5px;} </style> <script type="text/javascript"> $(window).scroll(function() { var a = $(window).scrollTop(), c = $(document).height(), b = $(window).height(); scrollPercent = a / (c - b) * 100; scrollPercent = scrollPercent.toFixed(1); $("#percentageCounter").css({ width: scrollPercent + "%" }); }).trigger("scroll"); </script> <!-- 阅读进度条结束 -->白蓝色的<!-- 阅读进度条开始 --> <style> #percentageCounter{position:fixed; left:0; top:0; height:3px; z-index:99999; background-image: linear-gradient(to right, #E8EAF6,#C5CAE9,#9FA8DA,#7986CB,#5C6BC0,#3F51B5,#3949AB,#303F9F,#283593,#1A237E);border-radius:5px;} </style> <script type="text/javascript"> $(window).scroll(function() { var a = $(window).scrollTop(), c = $(document).height(), b = $(window).height(); scrollPercent = a / (c - b) * 100; scrollPercent = scrollPercent.toFixed(1); $("#percentageCounter").css({ width: scrollPercent + "%" }); }).trigger("scroll"); </script> <!-- 阅读进度条结束 -->
