评论邮箱通知

评论邮件提醒功能

评论邮件提醒

评论邮件提醒

  • 下载本插件,解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件

Smtp服务器地址:smtp.qq.com
Smtp端口:465
Smtp用户:你的邮箱账户
Smtp密码:开启Smtp时获取的授权码

评论2邮件:

头像下面炫酷介绍

博主介绍的闪字特效

博主介绍的闪字特效

博主介绍的闪字特效

  • 复制下面的代码添加至后台主题设置博主的介绍即可
  • 介绍文字请在代码中修改
<!--博主介绍的闪字特效-->
<span class="text-muted text-xs block"><div id="chakhsu"></div> <script> var chakhsu = function (r) {function t() {return b[Math.floor(Math.random() * b.length)]} function e() {return String.fromCharCode(94 * Math.random() + 33)} function n(r) {for (var n = document.createDocumentFragment(), i = 0; r > i; i++) { var l = document.createElement("span"); l.textContent = e(), l.style.color = t(), n.appendChild(l) } return n}function i() {var t = o[c.skillI]; c.step ? c.step-- : (c.step = g, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = a) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % o.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(s, s + c.prefixP) : Math.min(s, t.length - c.skillP))), setTimeout(i, d) } /*以下内容自定义修改*/ var l = "", o = ["Keep Fighting" ].map(function (r) {return r + ""}), a = 2, g = 1, s = 5, d = 75, b = ["rgb(110,64,170)", "rgb(150,61,179)", "rgb(191,60,175)", "rgb(228,65,157)", "rgb(254,75,131)", "rgb(255,94,99)", "rgb(255,120,71)", "rgb(251,150,51)", "rgb(226,183,47)", "rgb(198,214,60)", "rgb(175,240,91)", "rgb(127,246,88)", "rgb(82,246,103)", "rgb(48,239,130)", "rgb(29,223,163)", "rgb(26,199,194)", "rgb(35,171,216)", "rgb(54,140,225)", "rgb(76,110,219)", "rgb(96,84,200)"], c = {text: "", prefixP: -s, skillI: 0, skillP: 0, direction: "forward", delay: a, step: g}; i() }; chakhsu(document.getElementById('chakhsu')); </script> </span> </span>

Mac高亮代码

Mac风格代码高亮

插件最新更新时间:2020/07/23
英俊.min.css更新时间:2020/08/13
插件下载:**下载

  • 下载本插件,解压到usr/plugins/目录中
  • 进入网站后台-控制台-插件-激活插件(不要与其他同类插件同时启用,以免互相影响)
  • 设置:选择主题风格,是否显示行号等
  • 修改(替换)/usr/themes/handsome/assets/css/下的handsome.min.css文件
  • 由于Handsome主题最新加入授权,旧版本必须更新至最新版本,所以这里就不提供旧版
  • 后台->设置外观->主题增强->关闭启用主题内置的代码高亮(支持19种常用语言)

handsome.min.css 7.X.X版本:**下载

  • 如果你的网站有开启Pjax(Handsome主题开启),把下面的代码添加到该函数的地方,以Handsome为例,打开后台设置-> Pjax->PJAX回调函数
  • 详细

评论获取用户信息插件

下载本插件,解压到usr/plugins/目录中 进入网站后台-控制台-插件-激活插件 此插件只适用于Handsome主题,未对其他主题优化!!! 修改component/comments.php文件,大概第60〜80行处添加代码
添加以下代码

<?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>

修改前

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</span>

修改后

<span class="comment-author vcard">
    <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</span>

Typecho打开CDN后,可能无法获取访客真实IP,只能获取CDN解码器IP,从而可以在网站的根目录的config.inc.php插入下面的代码:

/** 防止CDN造成无法获取客户真实IP地址 */
if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
{
    $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
    $_SERVER['REMOTE_ADDR'] = $list[0];
}

插件下载:

自定义底部

在主题开发者设置-自定义css加入以下代码
/*底部页脚*/
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}


.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
博客底部左侧信息
<div class="github-badge">
<a href="https://rickyduan.ink/duan" title="©RickyDuan">
<span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2020 Ricky</span>
</a>
</div>
 | 
<div class="github-badge">
<a href="http://rickuduan.ink/duan/" target="_blank" title="滇ICP备2020007373号" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">滇ICP备</span><span class="badge-value bg-green">2020007373号</span>
</a>
</div>
<div class="github-badge">
<a href="https://rickyduan.ink//sitemap.xml" title="站点">
<span class="badge-subject">站点</span><span class="badge-value bg-blue">地图</span>
</div>
博客底部右侧信息
<div class="github-badge">
<a href="http://www.typecho.org" target="_blank" title="由 Typecho 强力驱动" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Typecho</span>
</a>
</div> | 
<div class="github-badge">
<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" title="本站由又拍云提供CDN加速/云存储服务" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
<span class="badge-subject">本网站由<img src="http://n.rickyduan.ink/img/%E5%8F%88%E6%8B%8D%E4%BA%91_logo5.png" width="26px"></span><span class="badge-value bg-green">提供CDN加速/云存储服务</span>
</a>
</div>

添加完成后,需要去handsome\component\footer.php删除原型声明代码,以下为删除完后的效果(大概1〜12行)

<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php Content::outputCommentJS($this, $this->security); ?>
</div><!-- /content -->
  <footer id="footer" class="app-footer" role="footer">
    <div class="wrapper bg-light">
      <span class="pull-right hidden-xs text-ellipsis">
      <?php $this->options->BottomInfo(); ?>
  
      </span>
        <span class="text-ellipsis"><?php
            $this->options->BottomleftInfo(); ?></span>
    </div>
      <!--可以去除主题版权信息,最好保留版权信息或者添加主题信息到友链,谢谢你的理解-->

来自

添加正文结束和文章版权

效果图
修改主题文件post.php
<?php Content::postContentHtml($this, $this->user->hasLogin()); ?>后面加入以下代码

<!--正文结束和版权开始-->
     <div class="entry-content l-h-2x">
        <div style="border-top: 2px dotted #8e8e8e96;height: 0px;margin: 50px 0px;text-align: center;width: 100%;">
        <span style="background-color: #23b7e5;color: #fff;padding: 6px 10px;position: relative;top: -14px;border-radius: 14px;">正文结束</span>
       </div> 
       <div style="padding: 10px;background: rgba(220, 220, 220, 0.22);font-size: 13px;border-left: 3px solid red;text-align: left;">
        <span>本文作者:<a href="<?php $this->author->permalink(); ?>" rel="author"> <?php $this->author(); ?></a></span><br>
        <span>文章标题:<a href="<?php $this->permalink() ?>"><?php $this->title() ?></a> </span><br>
        <span>本文地址:<a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a></span><br>
        <span>版权说明:若无注明,本文皆<a href="<?php $this->options->siteUrl(); ?>" target="_blank" data-original-title="<?php $this->options->title() ?>"><?php $this->options->title() ?></a>原创,转载请保留文章出处。</span>
        </div>
    </div>
    <!--正文结束和版权结束-->

时光机dplayer

允许评论html代码

在后台 设置 评论 里添加

<div class="" data-config=''/>

DPlayer解析后的html代码

<div class="dplayer" data-config='{"video":{"url":"null","pic":"null"}}'/>

"url":"null" 为视频地址如
本地 "url":"dplayer.mp4",
外链 "url":"https://xx.xx/xx.mp4",
"pic":"null"为视频封面地址

<div class="dplayer" data-config='{"video":{"url":"https://youku.cdn4-okzy.com/20200907/9975_1dd8acd8/index.m3","pic":"null"}}


评论立体化+动画

示意图
设置自定义css,利用复杂选择器,没有bug

/* 评论立体*/
#comments>.comment-list>li[class~="comment-parent"]{
box-shadow: 1px 1px 3px 3px rgba(102,131,137,0.3)!important;
-webkit-box-shadow: 1px 1px 3px 3px rgba(102,131,137,0.3)!important;
padding: 12px;
border-radius: 12px;
margin-bottom: 18px;
border: 2px solid rgba(148,153,156,0.19)!important;
-webkit-box-shadow: border: 2px solid rgba(148,153,156,0.19)!important;
transition:299ms ease-out;
-webkit-transition:299ms ease-out;
}
#comments>.comment-list>li[class~="comment-parent"]:hover{
-webkit-box-shadow: 0 8px 10px rgba(62,147,241,0.37)!important;
box-shadow: 0 8px 10px rgba(62,147,241,0.37)!important;
border: 2px solid rgba(22,108,227,0.5)!important;
-webkit-border: 2px solid rgba(22,108,227,0.5)!important;
transform:translatey(-10px);
-webkit-transform:translatey(-10px);
}

时光机立体化+动画

设置自定义css,利用复杂选择器,没有bug
演示图

/* 时光机评论立体*/
div[class~="comment-by-author"]>.time-machine{
                    box-shadow: 1px 1px 3px 3px rgba(102,131,137,0.2)!important;
                    -webkit-box-shadow: 1px 1px 3px 3px rgba(102,131,137,0.2)!important;
                    border: 1px solid rgba(0,0,0,.1)!important;
                    -webkit-box-shadow: border: 1px solid rgba(0,0,0,.1)!important;
                    transition:299ms ease-out;
                    -webkit-transition:299ms ease-out;
                            }
div[class~="comment-by-author"]>.time-machine:hover{
                    box-shadow: 0 3px 10px rgb(75 208 236 / 88%)!important;
                    -webkit-box-shadow: 0 3px 10px rgb(75 208 236 / 88%)!important;
                    border: 1px solid rgb(75 208 240 / 50%)!important;
                    -webkit-border: 1px solid rgb(75 208 240 / 50%)!important;
                    transform:translatey(-10px);
                    -webkit-transform:translatey(-10px);
                            }

梦想视频

示意图

将以下代码分别添加至/usr/themes/handsome/component/say.php<?php if ($comments->have()): ?><div class="streamline b-l m-l-lg m-b padder-v">之后
备:202-209

<!--梦想视频-->
    <div id="comment-867" class="comment-body comment-parent comment-odd comment-by-author">
    <div class="panel-heading pos-rlt b-b b-light">
    <center>你的梦想是什么!</center>
    </div>
    <div class="panel-body">
    <p><video src="视频地址" style="background-image:url(视频封面图);background-size: cover;" preload="preload"></video><div class="play-button"></div></p> </div>
    </div>

css优化样式

panel-body>p>div[class~="kyt-player"]{
        box-shadow: 0px 0px 10px 4px rgb(35 183 229 / 41%)!important;
        border-radius: 12px!important;
                    }

图片和视频溢出bug

最终效果图
编辑文件:/admin/css/style.css
在文件末端粘贴以下代码并保存

.comment-content img{border: 0;max-height: 240px; max-width: 480px}.comment-content video{border: 0;max-height: 240px; max-width: 480px}

响应式bibi

自定义后台css

效果

/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

最终用法

<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=58238094&cid=101596459&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

待添加

<?php echo 'hello jrotty!'; ?>

的尺寸


内容 1
内容 2

正文结束
本文作者:
文章标题:魔改备忘
本文地址:https://rickyduan.ink/index.php/archives/50.html
版权说明:若无注明,本文皆RickyDuan原创,转载请保留文章出处。
最后修改:2020 年 09 月 25 日 08 : 18 PM
如果觉得我的文章对你有用,请随意赞赏