你言我语 By Twikoo
主要做了两件事:
- 一是前端魔改
- 二是首页调用(替代原 bber)
注明:以下样式、功能代码基于 Twikoo v1.6.4
前端魔改
“管理面板”按钮同步隐藏输入框。先到twikoo配置里填写“暗号”,暗号匹配前端才会显示。
所以,用 JavaScript 判断是否有那个管理 ⚙️ 图标(有2个 tk-icon 表示是管理员登录状态),则显示默认的评论框,反之移除。
<script src="https://fastly.jsdelivr.net/npm/twikoo@1.6.4/dist/twikoo.all.min.js"></script>
<script>
twikoo.init({
envId: 'https://xxxxxx.com',
el: '#tcomment',
onCommentLoaded: function () {
var myShow = document.getElementsByClassName('tk-icon'),mySubmit = document.querySelector('.tk-submit')
var myLength= 1;
for (i = 0; i < myShow.length;i++) {myLength += myLength + i};
if(myLength > 1){mySubmit.style.setProperty('display','block','important')}else{mySubmit.remove()}
var tkMain = document.getElementsByClassName('tk-main'),tkReplies = document.getElementsByClassName('tk-replies');
for (var i=0;i<tkMain.length;i++){
tkMain[i].index=i;tkMain[i].onclick = function () {tkReplies[this.index].classList.add("tk-replies-height");}
}
}
})
</script>
同时,精简显示内容。完整样式代码如下,最新改动直接查看页面源码:
<style>
.tk-comments .tk-submit,.tk-comments-count span:nth-child(2),.tk-comments-container .tk-comment .tk-avatar,.tk-comments-container .tk-comment .tk-nick,.tk-comments-container .tk-replies .tk-comment .tk-time,.tk-extra-text,.tk-replies .tk-meta,.tk-replies .tk-extra,.tk-extras .tk-extra:nth-child(2){display:none !important;}
.tk-comment .tk-submit,.tk-comments-container .tk-replies .tk-comment .tk-avatar{display:block !important;}
.tk-comments-container .tk-replies .tk-comment .tk-nick{display:inline-block !important;}
.tk-comments-count{font-size:15px;}
.tk-comments-count::before {content:"共 ";}
.tk-comments-count::after {content:" 条";}
.tk-time{color: #fafafa;font-size: 0.75em;font-style: italic;background-color: #3b3d42;display: inline-block;padding:0.25em 1em 0.2em 1em;}
.tk-comment{margin:1em 0 4em !important;}
.tk-replies .tk-comment{margin:0.5em 0 0!important;height:200px;}
.tk-content{margin:1em 0 0.5em!important;}
.tk-content blockquote:before{content:""}
.tk-replies{max-height:0px !important;}
.tk-replies .tk-action{position: absolute;right:0;top:20px;}
.tk-replies.tk-replies-expand{max-height:none !important;}
.tk-replies.tk-replies-expand.tk-replies-height .tk-comment{max-height:none !important;height: auto !important;}
.tk-expand{margin:-25px 0 0;font-size:1em;font-weight:600;float: right;width:80px !important;}
.tk-expand._collapse{margin:0 0 0;}
.tk-extras{display: flex !important;}
.tk-replies .tk-avatar{margin:1em 0.5rem 0 0;}
.tk-avatar.tk-has-avatar{border-radius:50%;}
.tk-replies .tk-main{font-size:14px !important;position:relative;}
.tk-replies .tk-content{font-size:1em !important;}
.tk-row{border-bottom: 1px solid #3b3d42;}
.tk-submit{margin-bottom:3em;}
.tk-replies .tk-row,.tk-submit .tk-row{border-bottom:none;}
.dark-theme .tk-time{color: #aaa;}
.tk-row.actions{margin-left:0 !important;}
</style>
首页调用
ctb 的羊毛已撸玩完!索性直接调用 Twikoo 的 最新评论 API 再在前端 JavaScript 指定 url 页面和 nick 昵称,实现首页轮播内容的过滤。
代码判断如下,完整版可直接在博客首页查看页面源码。
twikoo.getRecentComments({
……
}).then(function (res) {
var bberHtml = ''
$.each(res, function(i, item){
if(item.url == '/talk/' && item.nick == '林木木'){ //只留下 url 为 talk,昵称为 林木木 的评论
dataTime = '<span class="datatime">'+item.relativeTime+'</span>'
bberHtml += '<li class="item item-'+(i+1)+'">'+dataTime+': <a href="https://immmmm.com/talk/">'+urlToLink(item.commentText.substring(0,200))+'</a></li>'
}
});
……
todo
未来将加入正式博客!敬请期待!
你言我语 By Twikoo的更多相关文章
- hexo-yilia主题支持twikoo评论系统
如果图片无法加载,可到 我的博客 中,查看完整文章 yilia-more 已经增加对 twikoo 的支持,可直接使用 代码修改 layout/_partial/post 路径下新建 twikoo.e ...
- 记一次twikoo引发的站点重大事故
今天我测试私人博客的时候发现twikoo评论发生了错误,显示评论失败:0,我怀疑是我设置的twikoo安全域名有问题,所以我看了整个lssues,找到了我的解决方法! 1.关于配置安全域名后评论消失的 ...
- Twikoo私有化部署教程--迁移腾讯云
目录 备份数据 私有化部署 创建容器 导入数据 重新配置twikoo面板设置 引入前端CDN Nginx https反代http 作者:小牛呼噜噜 | https://xiaoniuhululu.co ...
随机推荐
- ubuntu下连microsoft sql server解决方案
shell for MSSQL: https://github.com/dbcli/mssql-cli mssql-cli -S 127.0.0.1,1433 -d testDB -U myuser ...
- 『忘了再学』Shell流程控制 — 35、多分支case条件语句
目录 1.case条件语句介绍 2.case语句需要注意的内容 3.练习 示例1 示例2 1.case条件语句介绍 case语句和if-elif-else语句一样都是多分支条件语句,不过和if多分支条 ...
- vue按需引入第三方ui插件优化
components.js import { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBo ...
- 过年了,基于Vue做一个消息通知组件
前言 今天除夕,在这里祝大家新年快乐!!!今天在这个特别的日子里我们做一个消息通知组件,好,我们开始行动起来吧!!!项目一览 效果很简单,就是这种的小卡片似的效果. 我们先开始写UI页面,可自定义消息 ...
- 基于thinkphp6 layui的优秀极速后台开发框架推荐
很多时候我们在做项目开发的时候,苦于没有好一点的轮子,自己动手开发的话,太耗费时间了,如果采用VUE的话,学习成本跟调试也比较麻烦, 而且有时候选用的东西甲方也不太容易接受,现在给大家介绍一款优秀的极 ...
- VisionPro · C# · 界面显示视觉结果图像
程序界面通过 CogRecordDisplay 控件显示视觉运行结果图像. 按指定图像显示,代码如下: using System; using System.Windows.Forms; using ...
- Nginx+Keepalived+VIP漂移实现HA高可用技术之详细教程
https://www.cnblogs.com/zcc666/p/13141626.html 这个是nginx安装教程地址 https://www.cnblogs.com/zcc666/p/1313 ...
- VS Code 调教日记(2022.6.26更新)
VS Code 调教日记(2022.6.26更新) 基于msys2的MinGW-w64 GCC的环境配置 下载并安装msys2 到路径...msys2安装路径...\msys64\etc\pacman ...
- hs-black 杂题选讲
[POI2011]OKR-Periodicity 考虑递归地构造,设 \(\text{solve(s)}\) 表示字典序最小的,\(\text{border}\) 集合和 \(S\) 的 \(\tex ...
- Codeforces Round #783 (Div. 2)
A. Direction Change 题意 从(1,1)点出发到(n,m),每次可以向上下左右四个方向移动,但是不能与上次移动方向相同 最少要移动多少不,如果不能到达输出 -1 思路 假设n< ...