热门文章
热门文章 ,按阅读量和评论量排行
image效果截图
点击放大notes详细介绍
热门文章 ,按阅读量和评论量排行,可设置文章筛选规则按照 7天/30天/1年/全部。
code配置代码
<div class="abtp"><div class="abtp-head"><div class="abtp-tabs"id="abtp-tabs"></div><div class="abtp-acts"><span class="abtp-range"id="abtp-range"></span><button class="abtp-iconbtn"type="button"id="abtp-refresh"title="重新统计"aria-label="重新统计"><span class="material-icons-round">refresh</span></button><button class="abtp-iconbtn"type="button"id="abtp-setup"title="热门文章设置(统计范围)"aria-label="热门文章设置"><span class="material-icons-round">tune</span></button></div></div><div class="abtp-src"id="abtp-src"></div><section class="abtp-list"id="abtp-list"></section></div><style>.abtp{--abtp-ease:cubic-bezier(.2,0,0,1);display:flex;flex-direction:column;gap:10px}.abtp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.abtp-tabs{min-width:0}.abtp-acts{display:flex;align-items:center;gap:2px;flex:none}.abtp-range:empty{display:none}.abtp-chip{display:inline-block;padding:1px 8px;border-radius:8px;background:var(--md-surface-container-high);color:var(--md-on-surface-variant);font-size:11.5px;line-height:1.7;white-space:nowrap}.abtp-tip{margin-top:10px;font-size:12px;line-height:1.6;color:var(--md-on-surface-variant)}.abtp-iconbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--md-on-surface-variant);cursor:pointer;transition:background-color.2s var(--abtp-ease)}.abtp-iconbtn:hover{background:var(--md-surface-container-high)}.abtp-iconbtn.material-icons-round{display:block;font-size:19px;line-height:1}.abtp-iconbtn.is-busy.material-icons-round{animation:abtp-spin 1s linear infinite}.abtp-src:empty{display:none}.abtp-list{min-height:80px}.abtp-list.ab-ui-list-item{padding:8px 10px;border-radius:14px}.abtp-list.ab-ui-list-item:hover{background:var(--md-surface-container-high)}.abtp-rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;font:600 12px/1 ui-monospace,SFMono-Regular,Consolas,monospace}.abtp-rank.r1{background:var(--md-primary);color:var(--md-on-primary)}.abtp-rank.r2,.abtp-rank.r3{background:var(--md-primary-container);color:var(--md-on-primary-container)}.abtp-rank.rn{background:var(--md-surface-container-highest);color:var(--md-on-surface-variant)}.abtp-empty{font-size:12.5px;color:var(--md-on-surface-variant);line-height:1.6}@keyframes abtp-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.abtp-iconbtn{transition:none}.abtp-iconbtn.is-busy.material-icons-round{animation:none}}</style>
(function(){'use strict';if(typeof card.__abtpBoot==='function'){card.__abtpBoot();return}var TOP_N=5;var SCAN=60;var SAMPLE=200;var STORE_KEY='hot-posts-rank';var CFG_KEY='hot-posts-config';var STORE_SCOPE={scope:'site'};var TTL_MS=5*60*1000;var VER=2;var RANGES=[{id:'7d',label:'近 7 天',days:7},{id:'30d',label:'近 30 天',days:30},{id:'1y',label:'近 1 年',days:365},{id:'all',label:'全部',days:0}];var state={mode:'views',range:'all',source:'',readSource:'',rows:[],hasReadSource:true,probes:[],at:0,fromCache:false,saved:false,hasData:false};var el=ab.ui.el;function $(id){return card.querySelector('#'+id)}function say(text,tone){if(ab.notify)ab.notify(text,tone||'info')}function pad2(n){return(n<10?'0':'')+n}function hhmm(ms){var d=new Date(ms);return pad2(d.getHours())+':'+pad2(d.getMinutes())}function rangeOf(id){for(var i=0;i<RANGES.length;i++){if(RANGES[i].id===id)return RANGES[i]}return RANGES[RANGES.length-1]}function cutoff(){var days=rangeOf(state.range).days;return days?(Date.now()-days*86400000):0}function editUrl(cid){var base=String((ab.config&&ab.config.pluginSettingsUrl)||'').split('?')[0];var url;if(base){url=base.slice(0,base.lastIndexOf('/')+1)+'write-post.php'}else{var here=location.href.split('?')[0];url=here.slice(0,here.lastIndexOf('/')+1)+'write-post.php'}return url+'?cid='+encodeURIComponent(cid)}function dbReady(){return ab.db&&typeof ab.db.read==='function'}function dataReady(){return ab.data&&typeof ab.data.getRow==='function'&&typeof ab.data.save==='function'}function srcHost(){var host=$('abtp-src');if(host)return host;var box=$('abtp-list');if(!box||!box.parentNode)return null;host=el('div','abtp-src',null);host.id='abtp-src';box.parentNode.insertBefore(host,box);return host}function readByViews(){if(!dbReady())return Promise.reject(new Error('当前插件版本不支持 ab.db.read'));return ab.db.read('views',{columns:['cid','views'],where:[{field:'views',op:'>',value:0}],orderBy:{field:'views',dir:'DESC'},limit:SCAN}).then(function(d){var rows=(d&&d.rows)||[];if(!rows.length)throw new Error('views 表里没有数据');return rows.map(function(r){return{cid:r.cid,metric:parseInt(r.views,10)||0,unit:' 次阅读'}})})}function readByPostViews(){if(!dbReady())return Promise.reject(new Error('当前插件版本不支持 ab.db.read'));return ab.db.read('contents',{columns:['cid','title','created','viewsNum'],where:[{field:'viewsNum',op:'>',value:0}],orderBy:{field:'viewsNum',dir:'DESC'},limit:SCAN}).then(function(d){var rows=(d&&d.rows)||[];if(!rows.length)throw new Error('contents.viewsNum 里没有数据');return rows.map(function(r){return{cid:r.cid,title:r.title,created:r.created,metric:parseInt(r.viewsNum,10)||0,unit:' 次阅读'}})})}function readByComments(){if(!dbReady())return Promise.reject(new Error('当前插件版本不支持 ab.db.read'));return ab.db.read('comments',{columns:['cid'],where:[{field:'status',op:'=',value:'approved'}],orderBy:{field:'created',dir:'DESC'},limit:SAMPLE}).then(function(d){var rows=(d&&d.rows)||[];var map={},list=[];for(var i=0;i<rows.length;i++){var k=String(rows[i].cid||'');if(!k)continue;if(!map[k]){map[k]={cid:rows[i].cid,metric:0,unit:' 条评论'};list.push(map[k])}map[k].metric++}list.sort(function(a,b){return b.metric-a.metric});return list.slice(0,SCAN)})}function fillTitles(list){var ids=[],i;for(i=0;i<list.length;i++)ids.push(list[i].cid);if(!ids.length||!dbReady())return Promise.resolve(list);return ab.db.read('contents',{columns:['cid','title','created','type'],where:[{field:'cid',op:'IN',value:ids}]}).then(function(d){var map={},rows=(d&&d.rows)||[];for(var j=0;j<rows.length;j++)map[String(rows[j].cid)]=rows[j];for(var k=0;k<list.length;k++){var hit=map[String(list[k].cid)];if(hit){list[k].title=hit.title;list[k].created=hit.created}}return list}).catch(function(){return list})}function readCache(){if(!dataReady())return Promise.resolve(null);return ab.data.getRow(STORE_KEY,STORE_SCOPE).then(function(row){if(!row||!row.exists||!row.json)return null;var pay=row.json;if(pay.v!==VER)return null;if(pay.range!==state.range)return null;var at=(parseInt(row.updated_at,10)*1000)||(parseInt(pay.t,10)*1000)||0;if(!at)return null;return{payload:pay,at:at}}).catch(function(){return null})}function writeCache(payload){payload.v=VER;payload.t=Math.floor(Date.now()/1000);if(!dataReady())return Promise.resolve(null);return ab.data.save(STORE_KEY,payload,STORE_SCOPE).catch(function(){return null})}function short(e){var m=String((e&&e.message)||e||'不可用');return m.length>36?m.slice(0,36)+'…':m}function inRange(row,cut){if(!cut)return true;var t=parseInt(row&&row.created,10)||0;return t>0&&(t*1000)>=cut}function fetchFresh(){var probes=[];var cut=cutoff();var READERS=[{key:'views',label:'Views(views 表)',read:readByViews},{key:'postviews',label:'TePostViews(contents.viewsNum)',read:readByPostViews}];function tryRead(i){if(i>=READERS.length)return Promise.resolve(null);return READERS[i].read().then(function(rows){if(!rows||!rows.length){probes.push(READERS[i].label+':没有数据');return tryRead(i+1)}probes.push(READERS[i].label+':可用('+rows.length+' 条)');return{source:READERS[i].key,rows:rows}}).catch(function(e){probes.push(READERS[i].label+':不可用('+short(e)+')');return tryRead(i+1)})}return Promise.all([tryRead(0),readByComments().then(null,function(){return null})]).then(function(r){var read=r[0],comments=r[1];probes.push('comments 表:'+(comments===null?'不可用':comments.length+' 条'));if(cut)probes.push('筛选范围:'+rangeOf(state.range).label);return Promise.all([read?fillTitles(read.rows):Promise.resolve(null),(comments&&comments.length)?fillTitles(comments):Promise.resolve(comments)]).then(function(done){var readList=done[0]?done[0].filter(function(x){return inRange(x,cut)}).slice(0,TOP_N):null;var cmtList=(done[1]||[]).filter(function(x){return inRange(x,cut)}).slice(0,TOP_N);return{v:VER,range:state.range,source:read?read.source:'comments',read:readList,comments:cmtList,probes:probes}})})}function load(mode,force){state.mode=mode||state.mode;var btn=$('abtp-refresh');if(btn)btn.classList.add('is-busy');return readCache().then(function(hit){if(hit&&!force&&(Date.now()-hit.at)<TTL_MS){state.at=hit.at;state.fromCache=true;state.probes=(hit.payload&&hit.payload.probes)||[];return hit.payload}return fetchFresh().then(function(payload){return writeCache(payload).then(function(res){state.at=(res&&res.updated_at)?(parseInt(res.updated_at,10)*1000):Date.now();state.fromCache=false;state.saved=!!res;state.probes=payload.probes||[];return payload})}).catch(function(err){if(!hit)throw err;state.at=hit.at;state.fromCache=true;state.probes=(hit.payload&&hit.payload.probes)||[];say('重新统计失败,暂用上一次的数据','warn');return hit.payload})}).then(function(payload){apply(payload);if(btn)btn.classList.remove('is-busy')}).catch(function(err){if(btn)btn.classList.remove('is-busy');fail(err)})}function apply(payload){var hasRead=!!(payload.read&&payload.read.length);var list;if(state.mode==='comments'){list=payload.comments||[]}else{list=hasRead?payload.read:(payload.comments||[])}state.source=(state.mode==='comments')?'comments':(hasRead?payload.source:'comments');state.readSource=payload.source;state.hasReadSource=hasRead;state.rows=(list||[]).slice(0,TOP_N);state.hasData=true;render()}function renderTabs(){var host=$('abtp-tabs');if(!host||typeof ab.ui.tabs!=='function')return;var tabs=ab.ui.tabs([{id:'views',label:'按阅读量',icon:'visibility'},{id:'comments',label:'按评论数',icon:'forum'}],{active:state.mode,onChange:function(id){load(id,false)}});ab.ui.mount(host,tabs)}function sourceInfo(){if(!state.hasData)return null;var base,icon,tone='warn';if(!state.rows.length){base='暂时排不出榜单 · '+(state.probes.length?state.probes.join(' · '):'没有可用数据源');icon='error_outline'}else if(state.mode!=='comments'&&!state.hasReadSource){if(state.readSource==='comments'){base='站点没有可用的阅读量插件(Views / TePostViews),已自动改用评论数';icon='forum'}else{base='筛选范围('+rangeOf(state.range).label+')内没有阅读量数据,已改用评论数';icon='filter_alt'}}else if(!state.fromCache&&!state.saved){base='统计数据没能写入数据库,下次打开会重新统计';icon='error_outline'}else{return null}return{icon:icon,tone:tone,text:base+' '+stampText()}}function stampText(){if(!state.at)return'';var ageMin=Math.floor((Date.now()-state.at)/60000);var age=ageMin<=0?'刚刚':(ageMin+' 分钟前');return'· '+(state.fromCache?'缓存于 ':'写入于 ')+hhmm(state.at)+'('+age+')'}function renderRange(){var host=$('abtp-range');if(!host)return;var r=rangeOf(state.range);ab.ui.mount(host,r.days?el('span','abtp-chip',r.label):'')}function render(){renderTabs();renderRange();var host=srcHost();if(host){var info=sourceInfo();ab.ui.mount(host,info?ab.ui.notice(info):'')}var box=$('abtp-list');if(!box)return;if(!state.rows.length){var r=rangeOf(state.range);ab.ui.mount(box,ab.ui.empty({icon:'leaderboard',text:'暂时排不出榜单',hint:(r.days?'当前筛选范围:'+r.label+'(可在右上角 ⚙ 里改)· ':'')+'需要站点有已发布文章与数据:阅读量需装 Views / TePostViews 插件,评论数用站点自带表'}));return}var items=[];for(var i=0;i<state.rows.length;i++){var r=state.rows[i];var rank=el('span','abtp-rank '+(i===0?'r1':(i<3?'r'+(i+1):'rn')),String(i+1));items.push({icon:i===0?'local_fire_department':'article',label:r.title?String(r.title):('文章 #'+r.cid),desc:(r.created?ab.format.relative(r.created)+' · ':'')+'点击在后台打开编辑页',value:ab.format.num(r.metric)+r.unit,href:editUrl(r.cid)})}var list=ab.ui.list(items);var nodes=list.querySelectorAll('.ab-ui-list-item');for(var k=0;k<nodes.length&&k<state.rows.length;k++){var badge=el('span','abtp-rank '+(k===0?'r1':(k<3?'r'+(k+1):'rn')),String(k+1));nodes[k].insertBefore(badge,nodes[k].firstChild)}ab.ui.mount(box,list)}function fail(err){state.hasData=false;var box=$('abtp-list');var msg=(err&&err.message)||'未知错误';if(box){ab.ui.mount(box,ab.ui.notice({icon:'error_outline',tone:'danger',text:'统计失败:'+msg+'(低于 2.1.50 的插件没有 ab.db.read)'}))}say('热门文章统计失败','danger')}function openSettings(){if(typeof ab.ui.dialog!=='function'||typeof ab.ui.field!=='function'){say('当前插件版本不支持弹窗组件,请升级 AB Admin','warn');return}var opts=[],i;for(i=0;i<RANGES.length;i++)opts.push({value:RANGES[i].id,label:RANGES[i].label});var sel=ab.ui.field({label:'文章筛选范围',options:opts,value:state.range});var tip=el('div','abtp-tip','按「文章发布时间」过滤榜单:选「近 7 天」就只统计 7 天内发布的文章。设置会写进数据库(全站共用一份),改动后榜单会重新统计。');ab.ui.dialog({title:'热门文章设置',icon:'tune',body:[sel,tip],actions:[{text:'取消',tone:'default'},{text:'保存',icon:'check',tone:'primary',onClick:function(){var next=rangeOf(String(sel.getValue()||'all')).id;var changed=next!==state.range;state.range=next;renderRange();ab.data.save(CFG_KEY,{range:next},STORE_SCOPE).then(function(){say(changed?'设置已保存,正在重新统计…':'设置已保存','success');if(changed)load(state.mode,true)}).catch(function(err){say('设置保存失败:'+((err&&err.message)||'未知错误'),'danger')})}}]})}function bind(){var r=$('abtp-refresh');if(r)r.addEventListener('click',function(){say('正在重新统计…','info');load(state.mode,true)});var s=$('abtp-setup');if(s)s.addEventListener('click',openSettings)}function boot(){return ab.data.get(CFG_KEY,null,STORE_SCOPE).then(function(cfg){state.range=rangeOf(cfg&&cfg.range).id}).catch(function(){}).then(function(){return load(state.mode,false)})}card.__abtpBoot=boot;bind();boot()})();
download_for_offline如何导入
Typecho 后台 → 控制台 → 插件 → AB Admin(AdminBeautify)→「概要页卡片设置」
找到 自定义卡片 区域,打开总开关(默认关闭)
点 添加卡片,按下表填写:
| 图标 | local_fire_department |
| 卡片标题 | 热门文章 |
| HTML 内容 | 见上方「HTML 内容」标签页 |
| JavaScript | 见上方「JavaScript」标签页 |
点右下角 保存设置,回到概要页即可看到卡片(顺序可在排序列表里拖动调整)
shield安全信息
verified_user
扫描通过
warning
卡片 JavaScript 会在你的后台页面里执行。本站已做敏感信息、站外请求与越权操作的自动扫描 + 人工审核,但仍请在使用前自行阅读上方代码;发现可疑卡片请到
GitHub 反馈。