分类 typecho 下的文章 - 老姚日记--随心记录,胡乱折腾

2021-10-09

为Typecho主题集成且小优化文章阅读统计功能 Typecho的文章阅读显示教程一艘一大把，代码也是一个比一个完善，但是我看了几个版本，都有一个小问题，就是进入文章后，该文章的阅读数量不会变，必须再刷新一次才会改变，所以小改了一下。😁使用很简单，把下面这段代码放到主题文件functions.php最后一行之前，然后在首页index.php和文章页post.php需要输出阅读量的位置调用<?php Postviews($this); ?>即可（文章页必须要调用，否则无法统计）。这个原始代码不太清楚出自哪里，如果谁知道请在下方告知，我会加上原作者链接🤗代码如下function Postviews($archive) { $db = Typecho_Db::get(); $cid = $archive->cid; if (!array_key_exists('views', $db->fetchRow($db->select()->from('table.contents')))) { $db->query('ALTER TABLE `'.$db->getPrefix().'contents` ADD `views` INT(10) DEFAULT 0;'); } $exist = $db->fetchRow($db->select('views')->from('table.contents')->where('cid = ?', $cid))['views']; if ($archive->is('single')) { $cookie = Typecho_Cookie::get('contents_views'); $cookie = $cookie ? explode(',', $cookie) : array(); if (!in_array($cid, $cookie)) { $db->query($db->update('table.contents') ->rows(array('views' => (int)$exist+1)) ->where('cid = ?', $cid)); $exist = (int)$exist+1; array_push($cookie, $cid); $cookie = implode(',', $cookie); Typecho_Cookie::set('contents_views', $cookie); } } echo $exist == 0 ? '暂无阅读' : $exist.' 次阅读'; }

2021年10月09日
1,374 阅读
0 评论
6 点赞

2021-10-09

为Typecho主题集成文章目录功能（免插件实现文章目录功能） Typecho添加主题目录的教程好像不是很多，而且我找到的仅有的几个都是前台JS实现的，总感觉这样不如后台实现来的好。既然Typecho找不到现成的，只好“曲线救国”，由于实现文章目录的原理是通用的，所以就去WP里找了，那可是大把大把的。没多想，第一个就到WP果酱那里扒了他的插件的代码，因为我曾经也是水煮鱼大大的粉啊😭，他的几个作品我用的可以说是炉火纯青了。(自己写是不可能的，Ctrl+C+V 大法那么无敌😂)代码内容不过毕竟是WP下的东西，要移植到Typecho还是要改一改的，下面直接放出修改后的代码吧，使用方法继续往下看。function createCatalog($obj) { //为文章标题添加锚点 global $catalog; global $catalog_count; $catalog = array(); $catalog_count = 0; $obj = preg_replace_callback('/<h([1-6])(.*?)>(.*?)<\/h\1>/i', function($obj) { global $catalog; global $catalog_count; $catalog_count ++; $catalog[] = array('text' => trim(strip_tags($obj[3])), 'depth' => $obj[1], 'count' => $catalog_count); return '<h'.$obj[1].$obj[2].'><a name="cl-'.$catalog_count.'"></a>'.$obj[3].'</h'.$obj[1].'>'; }, $obj); return $obj; } function getCatalog() { //输出文章目录容器 global $catalog; $index = ''; if ($catalog) { $index = '<ul>'."\n"; $prev_depth = ''; $to_depth = 0; foreach($catalog as $catalog_item) { $catalog_depth = $catalog_item['depth']; if ($prev_depth) { if ($catalog_depth == $prev_depth) { $index .= '</li>'."\n"; } elseif ($catalog_depth > $prev_depth) { $to_depth++; $index .= '<ul>'."\n"; } else { $to_depth2 = ($to_depth > ($prev_depth - $catalog_depth)) ? ($prev_depth - $catalog_depth) : $to_depth; if ($to_depth2) { for ($i=0; $i<$to_depth2; $i++) { $index .= '</li>'."\n".'</ul>'."\n"; $to_depth--; } } $index .= '</li>'; } } $index .= '<li><a href="#cl-'.$catalog_item['count'].'">'.$catalog_item['text'].'</a>'; $prev_depth = $catalog_item['depth']; } for ($i=0; $i<=$to_depth; $i++) { $index .= '</li>'."\n".'</ul>'."\n"; } $index = '<div id="toc-container">'."\n".'<div id="toc">'."\n".'<strong>文章目录</strong>'."\n".$index.'</div>'."\n".'</div>'."\n"; } echo $index; } 使用方法把上面的代码放到主题文件functions.php最后一行之前继续在functions.php内搜索关键词function themeInit如果有themeInit这个函数，则在themeInit这个函数内添加下面的代码if ($archive->is('single')) { $archive->content = createCatalog($archive->content); }如果没有themeInit这个函数，则在functions.php最后一行之前添加下面的代码function themeInit($archive) { if ($archive->is('single')) { $archive->content = createCatalog($archive->content); } }最后在需要输出文章目录的位置调用<?php getCatalog(); ?>即可这是通用的方法，具体到每个人使用时，可以根据自己的需求修改，不再赘述。

2021年10月09日
1,184 阅读
0 评论
8 点赞

2021-08-09

鼠标点击特效：canvas点击效果 JS代码（代码中包含了sketch.min.js的源码，如果你的网站已经引用了，请删掉下面的6到7行。）：/* * 鼠标点击特效：canvas点击效果 */ /* Copyright (C) 2013 Justin Windle sketch.min.js, http://soulwire.co.uk */ var Sketch=function(){"use strict";function e(e){return"[object Array]"==Object.prototype.toString.call(e)}function t(e){return"function"==typeof e}function n(e){return"number"==typeof e}function o(e){return"string"==typeof e}function r(e){return E[e]||String.fromCharCode(e)}function i(e,t,n){for(var o in t)(n||!e.hasOwnProperty(o))&&(e[o]=t[o]);return e}function u(e,t){return function(){e.apply(t,arguments)}}function a(e){var n={};for(var o in e)n[o]=t(e[o])?u(e[o],e):e[o];return n}function c(e){function n(n){t(n)&&n.apply(e,[].splice.call(arguments,1))}function u(e){for(_=0;_<J.length;_++)G=J[_],o(G)?O[(e?"add":"remove")+"EventListener"].call(O,G,k,!1):t(G)?k=G:O=G}function c(){L(T),T=I(c),U||(n(e.setup),U=t(e.setup),n(e.resize)),e.running&&!j&&(e.dt=(B=+new Date)-e.now,e.millis+=e.dt,e.now=B,n(e.update),e.autoclear&&K&&e.clear(),n(e.draw)),j=++j%e.interval}function l(){O=Y?e.style:e.canvas,D=Y?"px":"",e.fullscreen&&(e.height=w.innerHeight,e.width=w.innerWidth),O.height=e.height+D,O.width=e.width+D,e.retina&&K&&X&&(O.height=e.height*X,O.width=e.width*X,O.style.height=e.height+"px",O.style.width=e.width+"px",e.scale(X,X)),U&&n(e.resize)}function s(e,t){return N=t.getBoundingClientRect(),e.x=e.pageX-N.left-w.scrollX,e.y=e.pageY-N.top-w.scrollY,e}function f(t,n){return s(t,e.element),n=n||{},n.ox=n.x||t.x,n.oy=n.y||t.y,n.x=t.x,n.y=t.y,n.dx=n.x-n.ox,n.dy=n.y-n.oy,n}function g(e){if(e.preventDefault(),W=a(e),W.originalEvent=e,W.touches)for(M.length=W.touches.length,_=0;_<W.touches.length;_++)M[_]=f(W.touches[_],M[_]);else M.length=0,M[0]=f(W,V);return i(V,M[0],!0),W}function h(t){for(t=g(t),q=(Q=J.indexOf(z=t.type))-1,e.dragging=/down|start/.test(z)?!0:/up|end/.test(z)?!1:e.dragging;q;)o(J[q])?n(e[J[q--]],t):o(J[Q])?n(e[J[Q++]],t):q=0}function p(t){F=t.keyCode,H="keyup"==t.type,Z[F]=Z[r(F)]=!H,n(e[t.type],t)}function v(t){e.autopause&&("blur"==t.type?b:C)(),n(e[t.type],t)}function C(){e.now=+new Date,e.running=!0}function b(){e.running=!1}function P(){(e.running?b:C)()}function A(){K&&e.clearRect(0,0,e.width,e.height)}function S(){R=e.element.parentNode,_=x.indexOf(e),R&&R.removeChild(e.element),~_&&x.splice(_,1),u(!1),b()}var T,k,O,R,N,_,D,B,G,W,z,F,H,q,Q,j=0,M=[],U=!1,X=w.devicePixelRatio,Y=e.type==m,K=e.type==d,V={x:0,y:0,ox:0,oy:0,dx:0,dy:0},J=[e.element,h,"mousedown","touchstart",h,"mousemove","touchmove",h,"mouseup","touchend",h,"click",y,p,"keydown","keyup",w,v,"focus","blur",l,"resize"],Z={};for(F in E)Z[E[F]]=!1;return i(e,{touches:M,mouse:V,keys:Z,dragging:!1,running:!1,millis:0,now:0/0,dt:0/0,destroy:S,toggle:P,clear:A,start:C,stop:b}),x.push(e),e.autostart&&C(),u(!0),l(),c(),e}for(var l,s,f="E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min".split(" "),g="__hasSketch",h=Math,d="canvas",p="webgl",m="dom",y=document,w=window,x=[],v={fullscreen:!0,autostart:!0,autoclear:!0,autopause:!0,container:y.body,interval:1,globals:!0,retina:!1,type:d},E={8:"BACKSPACE",9:"TAB",13:"ENTER",16:"SHIFT",27:"ESCAPE",32:"SPACE",37:"LEFT",38:"UP",39:"RIGHT",40:"DOWN"},C={CANVAS:d,WEB_GL:p,WEBGL:p,DOM:m,instances:x,install:function(t){if(!t[g]){for(var o=0;o<f.length;o++)t[f[o]]=h[f[o]];i(t,{TWO_PI:2*h.PI,HALF_PI:h.PI/2,QUATER_PI:h.PI/4,random:function(t,o){return e(t)?t[~~(h.random()*t.length)]:(n(o)||(o=t||1,t=0),t+h.random()*(o-t))},lerp:function(e,t,n){return e+n*(t-e)},map:function(e,t,n,o,r){return(e-t)/(n-t)*(r-o)+o}}),t[g]=!0}},create:function(e){return e=i(e||{},v),e.globals&&C.install(self),l=e.element=e.element||y.createElement(e.type===m?"div":"canvas"),s=e.context=e.context||function(){switch(e.type){case d:return l.getContext("2d",e);case p:return l.getContext("webgl",e)||l.getContext("experimental-webgl",e);case m:return l.canvas=l}}(),e.container.appendChild(l),C.augment(s,e)},augment:function(e,t){return t=i(t||{},v),t.element=e.canvas||e,t.element.className+=" sketch",i(e,t,!0),c(e)}},b=["ms","moz","webkit","o"],P=self,A=0,S="AnimationFrame",T="request"+S,k="cancel"+S,I=P[T],L=P[k],O=0;O<b.length&&!I;O++)I=P[b[O]+"Request"+S],L=P[b[O]+"Cancel"+T];return P[T]=I=I||function(e){var t=+new Date,n=h.max(0,16-(t-A)),o=setTimeout(function(){e(t+n)},n);return A=t+n,o},P[k]=L=L||function(e){clearTimeout(e)},C}(); //--- if(document.getElementById("clickCanvas")) { function Particle(x, y, radius) { this.init(x, y, radius); } Particle.prototype = { init : function(x, y, radius) { this.alive = true; this.radius = radius || 10; this.wander = 0.15; this.theta = random(TWO_PI); this.drag = 0.92; this.color = '#ffeb3b'; this.x = x || 0.0; this.y = y || 0.0; this.vx = 0.0; this.vy = 0.0; }, move : function() { this.x += this.vx; this.y += this.vy; this.vx *= this.drag; this.vy *= this.drag; this.theta += random(-0.5, 0.5) * this.wander; this.vx += sin(this.theta) * 0.1; this.vy += cos(this.theta) * 0.1; this.radius *= 0.96; this.alive = this.radius > 0.5; }, draw : function(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, TWO_PI); ctx.fillStyle = this.color; ctx.fill(); } }; var MAX_PARTICLES = 50; //圆点颜色库 var COLOURS = [ "#5ee4ff", "#f44033", "#ffeb3b", "#F38630", "#FA6900", "#f403e8", "#F9D423" ]; var particles = []; var pool = []; var clickparticle = Sketch.create({ container : document.getElementById('clickCanvas') }); clickparticle.spawn = function(x, y) { if (particles.length >= MAX_PARTICLES) pool.push(particles.shift()); particle = pool.length ? pool.pop() : new Particle(); particle.init(x, y, random(5, 20));//圆点大小范围 particle.wander = random(0.5, 2.0); particle.color = random(COLOURS); particle.drag = random(0.9, 0.99); theta = random(TWO_PI); force = random(1, 5); particle.vx = sin(theta) * force; particle.vy = cos(theta) * force; particles.push(particle); }; clickparticle.update = function() { var i, particle; for (i = particles.length - 1; i >= 0; i--) { particle = particles[i]; if (particle.alive) particle.move(); else pool.push(particles.splice(i, 1)[0]); } }; clickparticle.draw = function() { clickparticle.globalCompositeOperation = 'lighter'; for ( var i = particles.length - 1; i >= 0; i--) { particles[i].draw(clickparticle); } }; //按下时显示效果，mousedown 换成 click 为点击时显示效果（我用的 click） document.addEventListener("mousedown", function(e) { var max, j; //排除一些元素 "TEXTAREA" !== e.target.nodeName && "INPUT" !== e.target.nodeName && "A" !== e.target.nodeName && "I" !== e.target.nodeName && "IMG" !== e.target.nodeName && function() { for (max = random(15, 20), j = 0; j < max; j++) clickparticle.spawn(e.clientX, e.clientY); }(); }); }复制上面的 js 代码到主题的主 js 文件最下面，或者保存为一个单独的 js 文件，然后引入主题（如果你是单独保存为一个 js 文件，请在 footer 引入js文件）。在主题的 header.php 文件在下方，加入以下代码。<?php if(!wp_is_mobile()): ?> <div id="clickCanvas" style=" position:fixed;left:0;top:0;z-index:999999999;pointer-events:none;"></div> <?php endif; ?>如果移动端也想要这效果，请删除上面代码的第1行和第3行。演示效果见本站。

2021年08月09日
1,009 阅读
0 评论
9 点赞

2021-07-22

网站圆型百分比进度条返回顶部功能代码就两个代码<css,js>随着鼠标滚轮的滑动，根据屏幕当前的网页位置来判定你处于网页中的百分比那个地方，鼠标点击一下（hover获取焦点）就会显示一个回顶部提示文字并自动的返回顶部（#）。为什么我要说明（hover获取焦点），因为有的网友和我说手机浏览器点击返回顶部后，再往下浏览拖动不会显示回来百分比，也正是因为（hover获取焦点）方式，所以需要你再次随便点击一下网页的其它部分就会显示回来了，不过没关系，正常的阅读者应该不会无聊到纠结或者玩这个百分比返回顶部吧！CSS/*返回顶部%css*/ #backtoTop { background-color:var(--background);/*背景颜色*/ border-radius:100%; bottom:5%; /*圆角、下距*/ height:33px; position:fixed; right:-100px; width:33px; transition:0.5s; -webkit-transition:0.5s } #backtoTop.button--show { right:33px } /*边距*/ .per { font-size:16px; height:30px; line-height:30px; position:absolute; text-align:center; top:0; width:33px; color:#F05454; /*文字颜色*/ cursor:pointer } .per:before { content:attr(data-percent) } .per:hover:before { content:"↑"; font-size:15px } /*文字大小*/JS/*百分比返回顶部JS*/ var bigfa_scroll = { drawCircle: function(id, percentage, color) { var width = jQuery(id).width(); var height = jQuery(id).height(); var radius = parseInt(width / 2.20); var position = width; var positionBy2 = position / 2; var bg = jQuery(id)[0]; id = id.split("#"); var ctx = bg.getContext("2d"); var imd = null; var circ = Math.PI * 2; var quart = Math.PI / 2; ctx.clearRect(0, 0, width, height); ctx.beginPath(); ctx.strokeStyle = color; ctx.lineCap = "square"; ctx.closePath(); ctx.fill(); ctx.lineWidth = 2; //转动圈线条大小 imd = ctx.getImageData(0, 0, position, position); var draw = function(current, ctxPass) { ctxPass.putImageData(imd, 0, 0); ctxPass.beginPath(); ctxPass.arc(positionBy2, positionBy2, radius, -(quart), ((circ) * current) - quart, false); ctxPass.stroke(); } draw(percentage / 100, ctx); }, backToTop: function($this) { $this.click(function() { jQuery("body,html").animate({ scrollTop: 0 }, 800); return false; }); }, scrollHook: function($this, color) { color = color ? color: "#000000"; $this.scroll(function() { var docHeight = (jQuery(document).height() - jQuery(window).height()), $windowObj = $this, $per = jQuery(".per"), percentage = 0; defaultScroll = $windowObj.scrollTop(); percentage = parseInt((defaultScroll / docHeight) * 100); var backToTop = jQuery("#backtoTop"); if (backToTop.length > 0) { if ($windowObj.scrollTop() > 200) { backToTop.addClass("button--show"); } else { backToTop.removeClass("button--show"); } $per.attr("data-percent", percentage); bigfa_scroll.drawCircle("#backtoTopCanvas", percentage, color); } }); } } jQuery(document).ready(function() { jQuery("body").append('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="33" height="33"></canvas><div class="per"></div></div>'); var T = bigfa_scroll; T.backToTop(jQuery("#backtoTop")); T.scrollHook(jQuery(window), "#009f5d");/*外圈进度条颜色*/ }); /*百分比返回顶部JS，33大小是整个圈圈大小,对应CSS代码也需要修改*/

2021年07月22日
1,081 阅读
0 评论
7 点赞

2021-07-22

网站炫酷console.log创意彩蛋收集定义和用法console.log() 方法用于在控制台输出信息。该方法对于开发过程进行测试很有帮助。提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台，直接查看方法按键组合：Ctrl+Shift+J)。参数类型描述messageString或Object必需，控制台上要显示的信息。彩蛋实例代码：以%c开头，后面的文字就打印的信息，后面一个参数就是样式属性；可以尝试多个样式，每碰到一个%c开头就会应用对应的样式，所有的 console.log() 必须在标签内，可添加多条console.log()在标签组合内，如下两条！在样式中你可以通过css3属性写彩色字，文字描边等等。有阴影文字<script> console.log("%c[2025ly.cn]", "text-shadow: 3px 1px 1px grey") console.log("%c[2025ly.cn]", "text-shadow: 3px 1px 1px grey") </script> ----------横条上显示文字这里有个"font-size:2pt"，里面的数字2是可以随便调的，就是调显示大小的意思！console.log("%c 我跟你讲，你不要在这里乱搞哦！", "font-size:2pt")背景图片不要引用我的图片，你可以打开图片地址后，自己保存，因为有时候我可能换图片，把图片删了！console.log("%c ", "background: url(https://2025ly.cn/usr/uploads/2019/111101/2091979570.png) no-repeat center;padding-left:380px;padding-bottom: 172px;")折叠菜单下文字var myObj = { name : "我的记事本", site : "2025ly.cn" }; ; console.log(myObj);彩色文字console.log('%c你在看什么？ ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');同条不同颜色文字console.log("%c 你的左手在哪？ %c 我看到你了 %c 把你的右手拿开", "color:red","","color:orange;font-weight:bold")带连接版权背景颜色文字console.log("\n%c 博客 By 我的记事本 %c https://2025ly.cn ","color:#fff;background:#000;padding:5px 0","color:#fff;background:#666;padding:5px 0")总结还有N种写法，上面只是其中的几个例子而已，上面的例子也不是真实用意，只是我们拿来做创意彩蛋而已！有名的百度网站好几个页面也有你可以去看下，具体用途就看你自己了，拿来装逼也是不错的，，哈哈哈。。。

2021年07月22日
1,257 阅读
0 评论
8 点赞

2021-07-07

typecho美化小功能，添加后台开关开启关闭按钮有时候我们发现一个好玩的效果将它放在自己的博客里，但是过一段时间看腻了又把它删掉了，然后再过一段时间又脑残的又想要那种效果，于是再添加进来，这样不用就删，用了再添加非常的麻烦。不如直接弄了开启关闭的按钮，用的时候点开启，不用的时候点关闭，这样就简单的多了，那么怎么实现呢？在主题文件夹中找到functions.php文件，在里面最下面添加以下代码： $xiaxue（可以是英文、数字、组合等，比如我弄个下雪的开启关闭按钮就写成下雪的拼音：xiaxue） = new Typecho_Widget_Helper_Form_Element_Select('xiaxue（和前面的英文标识要一致）',array(0=>'不开启',1=>'开启'),0,'按钮功能标题','按钮功能介绍'); $form->addInput($xiaxue（和前面的英文标识要一致）);接着在需要展示的特效代码前面加以下代码： <?php if($this -> options -> xiaxue（和前面的英文标识要一致） == '1'): ?> 特效代码 <?php endif; ?>自定义内容有时候想在博客里加一些自定义内容，如运行时间，公告，提醒等等，该怎么实现呢？还是在主题文件夹中找到functions.php文件，在里面最下面添加以下代码： $gonggao（可以是英文、数字、组合等，比如我弄个公告的内容按钮就写成公告的拼音：gonggao） = new Typecho_Widget_Helper_Form_Element_Text( 'gonggao（和前面的英文标识要一致）', NULL, NULL, '内容说明', '内容介绍' ); $form->addInput($gonggao（和前面的英文标识要一致）);然后在需要些内容的地方加入以下代码： <?php if ($this->options->gonggao（和前面的英文标识要一致）) : ?> <?php $adContent1 = $this->options->JADContent1; $adContent1Counts = explode("||", $adContent1); ?> 特效代码中需要输出内容的地方替换成<?php echo $adContent1Counts[0] ?>，如果需要写多处内容的话可以用<?php echo $adContent1Counts[1] ?>、<?php echo $adContent1Counts[2] ?>、<?php echo $adContent1Counts[3] ?>表示 <?php endif; ?>上面的内容用||隔开，例如想加一个图片链接： <?php if ($this->options->gonggao（和前面的英文标识要一致）) : ?> <?php $adContent1 = $this->options->JADContent1; $adContent1Counts = explode("||", $adContent1); ?> <a href="<?php echo $adContent1Counts[1] ?>"> <img src="<?php echo $adContent1Counts[0] ?>"> </a> <?php endif; ?>内容写:图片地址||链接地址如：https://2025ly.cn/img/ico.png||https://2025ly.cn/自定义宽度隐藏有的时候我们放一段特效代码希望只在电脑端显示，手机端不显示（或者手机端显示，电脑都不显示），该如何实现呢？首先要确保改特效代码有class属性，如果没有的话就新建一个class。如：我像要一张图片在电脑端显示，手机端不显示，那就先在图片代码里加一个class，如下： <img class="haha(随便写，只要和其他CLASS重复就可以)" src="图片地址" >然后在主题的style.CSS文件（不同的主题CSS文件不一样，如JOE主题的CSS文件是在assets/css/joe.min.css）里最下面加以下代码： @media (max-width: 768px) { .haha(和上面的class标识一致） { display: none !important; } }{alert type="info"}以上代码中768px是最大宽度，意思是大于768px显示代码，小于768px就不显示，可以根据自己的情况修改宽度，当然也可以改成高度:max-width{/alert}

2021年07月07日
4,258 阅读
0 评论
9 点赞

2021-01-06

Typecho基于浏览量的文章等级代码：[hide]/*文章访问量等级*/ function listdeng($archive){ $db = Typecho_Db::get(); $cid = $archive->cid; if (!array_key_exists('views', $db->fetchRow($db->select()->from('table.contents')))) { $db->query('ALTER TABLE `'.$db->getPrefix().'contents` ADD `views` INT(10) DEFAULT 0;'); } $exist = $db->fetchRow($db->select('views')->from('table.contents')->where('cid = ?', $cid))['views']; if($exist<200){ // echo '<span class="badge arc_v1">测试</span>'; }elseif ($exist<500 && $exist>200) { echo '<span class="badge arc_v2">新秀</span>'; }elseif ($exist<1000 && $exist>=500) { echo '<span class="badge arc_v3">推荐</span>'; }elseif ($exist<5000 && $exist>=1000) { echo '<span class="badge arc_v4">热文</span>'; }elseif ($exist<10000 && $exist>=5000) { echo '<span class="badge arc_v5">头条</span>'; }elseif ($exist<30000 && $exist>=10000) { echo '<span class="badge arc_v6">火爆</span>'; }elseif ($exist>=30000) { echo '<span class="badge arc_v7">神贴</span>'; } }[/hide]复制以上代码放到functions.php文件里面调用：<?php listdeng($this); ?>样式自己发挥

2021年01月06日
2,046 阅读
1 评论
9 点赞

2021-01-04

主题移动端，样式下添加二级分类 1. 代码修改header.php 相关j-sidebar-xs中的部分，主要是替换下面这一部分 <div class="card"> <div class="title">类目归类</div> <ul class="category-nav"> <?php while ($categorys->next()) : ?> <?php $children = $categorys->getAllChildren($categorys->mid); ?> <?php if ($categorys->levels === 0): ?> <?php if (empty($children)): ?> <li class='<?php if ($this->is('category', $categorys->slug)) _e("active"); ?>'> <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path> </svg> <a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?></a> </li> <?php else: ?> <li class='<?php if ($this->is('category', $categorys->slug)) _e("active"); ?>'> <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M325.31499999 764.323l1e-8-508.83099999c0-28.16 22.598-50.934 50.757-50.93400001 13.09300001 0 24.932 5.024 33.901 13.092l335.755 251.633c22.24 16.859 26.905 48.607 10.044 71.024-2.87099999 3.947-6.281 7.355-10.045 10.045l-339.338 254.51c-22.241 16.676-54.16 12.193-70.844-10.225-6.996-9.15-10.225-19.73-10.225-30.31v0z" p-id="6117"></path> </svg> <a href="<?php $categorys->permalink(); ?>"><?php $categorys->name(); ?> <span><i class="icon iconfont icon-Chevronrighticon text-right"></i><i class="icon iconfont icon-Chevrondownicon text-down"></i></span> </a> <ul> <?php foreach ($children as $mid):?> <?php $child = $categorys->getCategory($mid); ?> <li <?php if($this->is('category', $child['slug'])): ?> class="active"<?php endif; ?>> <a href="<?php echo $child['permalink'] ?>" title="<?php echo $child['name']; ?>"><?php echo $child['name']; ?></a> </li> <?php endforeach; ?> </ul> </li> <?php endif; ?> <?php endif; ?> <?php endwhile; ?> </ul> </div>2. 添加js 控制 $('.j-sidebar-xs .item.category ul li a').unbind().bind('click',function (ev) { let c = $(this); c.parent().siblings(".active").toggleClass("active") if(c.next().is("ul") && c.parent().toggleClass("active") && ev.preventDefault()) return false; })3. 添加css .item.category{ ul.category-nav li ul{ display: none; padding-left: 2.5em; opacity: 0; height: 0; overflow: auto; -webkit-transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s; li:last-child{ border-bottom: none; } } ul.category-nav li a { span{ float: right; } .text-down{ display: none; } } ul.category-nav li.active { ul { display: block; opacity: 1; height: auto; } a .text-right{ display: none; } a .text-down{ display: block; } } } .j-sidebar-xs .content .item .card ul li { display: block;  }

2021年01月04日
15,460 阅读
2 评论
17 点赞

2021-01-04

2021年01月04日
12,779 阅读
0 评论
9 点赞