搜索到
147
篇与
的结果
-
为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.' 次阅读'; } -
为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(); ?>即可这是通用的方法，具体到每个人使用时，可以根据自己的需求修改，不再赘述。
-
一言api，毒鸡汤单页源码 环境要求PHP 5.7+安装指南下载源码修改一些自己的信息 上传到普通站点目录就可以访问了一言模式复制下方代码到你的网站想显示的位置，修改api地址，就可以在网站调用自己建的一言了。<script type="text/javascript" src="https://你的api域名/api/?format=js&charset=utf-8"></script> <div id="hitokoto"><script>hitokoto()</script></div>注意事项一言api在api\文件夹里。 一言调用的词句在api\hitokoto.txt文件里，可自行删增。 演示站调用了自定义字体，下载包已经包含且已经调用，如果服务器带宽低，请禁用index.htm文件第15行预览下载点击预览
-
鼠标点击特效：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行。演示效果见本站。
-
-
网站圆型百分比进度条返回顶部功能代码 就两个代码<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代码也需要修改*/
-
网站炫酷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种写法，上面只是其中的几个例子而已，上面的例子也不是真实用意，只是我们拿来做创意彩蛋而已！有名的百度网站好几个页面也有你可以去看下，具体用途就看你自己了，拿来装逼也是不错的，，哈哈哈。。。
-
百度编辑器h1~h6标题美化 【教程】找到网站xiunobbs 站点中的/view/css/bootstrap-bbs.css，然后在合适的位置(适合的位置...自己思考)插入如下代码：/* H6标题 */ .card-body .message h6 { border-left: 3px solid #6293d4; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H5标题 */ .card-body .message h5 { border-left: 4px solid #84985a; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H4标题 */ .card-body .message h4 { border-left: 5px solid #b55594; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H3标题 */ .card-body .message h3 { border-left: 6px solid #a232de; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H2标题 */ .card-body .message h2 { border-left: 7px solid #32de5d; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; } /* H1标题 */ .card-body .message h1 { border-left: 8px solid #de3232; text-indent: 8px; font-weight: bold; padding: 2px 0px; margin: 8px 0px; }撰稿人: 22SS
-
[Xiuno] 楼主回帖打上楼主标识，前端修改 前端渲染运行，节约服务器资源在view\htm\thread.htm 最下面放上以下JS代码，刷新缓存即可。 //回帖中显示 楼主 var papa_user = $('.font-weight-bold'); for(var i=1,len=papa_user.length;i<len; i++){ if(papa_user[0].innerText===papa_user[i].innerText){ $("<span class='unread badge badge-danger badge-pill'>楼主</span>").insertAfter(papa_user[i].parentNode); }}撰稿人: Vincent
![[Xiuno] 楼主回帖打上楼主标识，前端修改](https://www.ztlog.com/usr/themes/Joe/assets/thumb/8.jpg)