【备份】handsome美化教程合集

博主：小屁
发布时间：2021 年 04 月 04 日
1213 次浏览
暂无评论
5475字数
分类： Typecho

<div class="markdown" id="markdown">
 <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/676361575.png"><img class=" ls-is-cached lazyloaded" data-src="https://www.abu3d.com/usr/uploads/2021/01/676361575.png" src="https://www.abu3d.com/usr/uploads/2021/01/676361575.png" alt=""style=""></a>本博客美化过程-教程文字均来自互联网<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-ce093d2605f5af2150e3f2740f0c47e355" aria-expanded="true"><div class="accordion-toggle">一、修改底部的信息 美化

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-ce093d2605f5af2150e3f2740f0c47e355" class="collapse collapse-content"><h1 id="cl-1">一、修改底部的信息 美化</h1>参考博客--<a href="http://book.huat.xyz/handsome/1501170" target="_blank">底部美化</a>1.将以下代码加入主题后台的开发者选项中的自定义CSS<pre class="hljs-pre"><code class="lang-CSS hljs"><ol><li>/*底部页脚*/
</li><li>.github-badge {
</li><li>display: inline-block;
</li><li>border-radius: 4px;
</li><li>text-shadow: none;
</li><li>font-size: 12px;
</li><li>color: #fff;
</li><li>line-height: 15px;
</li><li>background-color: #abbac3;
</li><li>margin-bottom: 5px
</li><li>}
</li><li>.github-badge .badge-subject {
</li><li>display: inline-block;
</li><li>background-color: #4d4d4d;
</li><li>padding: 4px 4px 4px 6px;
</li><li>border-top-left-radius: 4px;
</li><li>border-bottom-left-radius: 4px
</li><li>}
</li><li>.github-badge .badge-value {
</li><li>display: inline-block;
</li><li>padding: 4px 6px 4px 4px;
</li><li>border-top-right-radius: 4px;
</li><li>border-bottom-right-radius: 4px
</li><li>}
</li><li>.github-badge .bg-blue {
</li><li>background-color: #007ec6
</li><li>}
</li><li>.github-badge .bg-orange {
</li><li>background-color: #ffa500
</li><li>}
</li><li>.github-badge .bg-red {
</li><li>background-color: #f00
</li><li>}
</li><li>.github-badge .bg-green {
</li><li>background-color: #3bca6e
</li><li>}
</li><li>.github-badge .bg-purple {
</li><li>background-color: #ab34e9
</li><li>}
</li></ol></code></pre>2.将以下代码添加至后台主题设置博客<code>底部左侧信息</code>，信息修改成自己的:<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li><div class="github-badge">
</li><li><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" title="本网站由又拍云提供CDN加速/云存储服务" >
</li><li><span class="badge-subject">本网站由<img src="https://www.abu3d.com/img/upyun_logo.png">提供CDN加速/云存储服务</span>
</li><li></a>
</li><li></div>
</li></ol></code></pre>3.将以下代码添加至后台主题设置博客<code>底部右侧信息</code>:<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li><div class="github-badge">
</li><li><a href="./" title="©2019 Abu3d">
</li><li><span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 Abu3d</span>
</li><li></a>
</li><li></div>
</li><li> | 
</li><li><div class="github-badge">
</li><li><a href="http://www.miitbeian.gov.cn/" target="_blank" title="苏ICP备 20043146号-1" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
</li><li><span class="badge-subject">苏ICP备</span><span class="badge-value bg-green">20043146号-1</span>
</li><li></a>
</li><li></div>
</li><li> | 
</li><li><div class="github-badge">
</li><li> <a href="https://www.ihewro.com/archives/489/" target="_blank" title="baidu" >
</li><li> <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</li><li> </a>
</li><li></div>
</li></ol></code></pre>4.添加完成后，需要去<code>handsome/component/footer.php</code>删除原有底部代码，需要删除的代码如下：<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li><?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
</li><li><?php Content::outputCommentJS($this, $this->security); ?>
</li><li></div>
</li><li> <footer id="footer" class="app-footer" role="footer">
</li><li> <div class="wrapper b-t bg-light">
</li><li> <span class="pull-right hidden-xs text-ellipsis">
</li><li> <?php $this->options->BottomInfo(); ?>
</li><li> 
</li><li> </span>
</li><li> <span class="text-ellipsis">
</li><li> 
</li><li> <?php $this->options->BottomleftInfo(); ?></span>
</li><li> </div>
</li></ol></code></pre></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-5b22e974dfb454715a8a5840412a769789" aria-expanded="true"><div class="accordion-toggle">二、AliceStyle美化插件-全局美化

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-5b22e974dfb454715a8a5840412a769789" class="collapse collapse-content"><h1 id="cl-2">二、AliceStyle美化插件（十分强大的插件）</h1>详情见大神博客 <a href="https://racns.com/374.html" target="_blank">点击连击</a></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6e4b837cae42dc5f6582b154323102e464" aria-expanded="true"><div class="accordion-toggle">三、UserAgent插件-评论显示信息插件

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6e4b837cae42dc5f6582b154323102e464" class="collapse collapse-content"> <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/4202548119.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/4202548119.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a><h1 id="cl-3">三、Hansome主题专用的UserAgent插件</h1>详情见大神博客 <a href="https://doge.uk/coding/useragent-modify.html" target="_blank">点击连击</a><h2 id="cl-4">食用指南</h2><ol><li>操作前请做好相应备份工作</li><li>此插件只适用于<code>Handsome</code>主题，未对其它主题优化！！！</li><li>请先将插件置于<code>Typecho</code>的<code>plugins</code>目录下，且插件目录名应为<code>UserAgent</code>，注意大小写，否则将无法正常食用！！！</li><li>修改<code>Handsome</code>主题，<code>component</code>目录下的<code>comments.php</code>代码文件，大概第<code>60~80</code>行左右</li></ol><pre class="hljs-pre"><code class="hljs php-template"><ol><li><span class="comment-author vcard">
</li><li> <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</li><li></span>
</li></ol></code></pre>添加代码<code><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?></code> ，修改后代码如下：<pre class="hljs-pre"><code class="hljs php-template"><ol><li><span class="comment-author vcard">
</li><li> <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</li><li></span>
</li></ol></code></pre><h3 id="cl-5">获取真实IP</h3>Typecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点IP，为此可以在Typecho博客网站的根目录的<code>config.inc.php</code>插入下面的代码：<pre class="hljs-pre"><code class="hljs php"><ol><li>//** 防止CDN造成无法获取客户真实IP地址 */
</li><li>if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
</li><li>{
</li><li> $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
</li><li> $_SERVER['REMOTE_ADDR'] = $list[0];
</li><li>}
</li></ol></code></pre></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e33e7bdc50971f9b7c584cd46ea87dfa51" aria-expanded="true"><div class="accordion-toggle">四、代码高亮插件Code Prettify

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e33e7bdc50971f9b7c584cd46ea87dfa51" class="collapse collapse-content"><h1 id="cl-6">四、代码高亮插件Code Prettify</h1>详情见大神博客 <a href="https://www.xcnte.com/archives/523/" target="_blank">点击链接</a> 效果 <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/2861559930.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/2861559930.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a> 第 1 步：下载本插件，解压，放到 <code>usr/plugins/</code> 目录中；第 2 步：文件夹名改为 <code>CodePrettify</code>；第 3 步：登录管理后台，激活插件 （请勿与其它同类插件同时启用，以免互相影响）第 4 步：设置：选择主题风格，是否显示行号等。第 5 步：修改（替换）<code>/usr/themes/handsome/assets/css/</code>下的handsome.min.css文件<hr>如果你的网站有开启Pjax（<code>handsome主题</code>默认开启）请把以下代码添加到回调函数的地方，在你使用的主题设置里看看以 <code>Handsome主题</code>为例：1.<code>主题 --> 设置外观 --> Pjax --> PJAX回调函数</code><pre class="hljs-pre"><code class="lang-JavaScript hljs"><ol><li>if (typeof Prism !== 'undefined') {
</li><li>var pres = document.getElementsByTagName('pre');
</li><li> for (var i = 0; i < pres.length; i++){
</li><li> if (pres[i].getElementsByTagName('code').length > 0)
</li><li> pres[i].className = 'line-numbers';}
</li><li>Prism.highlightAll(true,null);}
</li></ol></code></pre>2.<code>若插件里设置不显示行号，</code>PJAX<code>函数要改为</code>``JavaScript if (typeof Prism !== 'undefined') { Prism.highlightAll(true,null);}<h2 id="cl-7">重要说明</h2><h3 id="cl-8">可设置项</h3>1. 选择高亮主题风格 (官方提供的 6 种风格切换，本人自己新增了三种（Mac风格）)<ul><li>coy.css</li><li>dark.css</li><li>BlackMac.css（黑色Mac风格）</li><li>GrayMac.css （默认选中：Mac风格（灰色））</li><li>WhiteMac.css（白色Mac风格）</li><li>twilight.css</li><li>tomorrow-night.css</li></ul>2. 是否在代码左侧显示行号 （默认开启）注：<code>C#</code>代码与 <code>C++</code>代码使用 <code>csharp</code> 与 <code>cpp</code>进行标记声明由于最新版本handsome主题内置的高亮与该插件冲突，请进入后台 --> 设置外观 --> 主题增强功能里关闭主题内置高亮</div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-e963981f3ae59fe09fae03b6573a3eeb29" aria-expanded="true"><div class="accordion-toggle">五、给网站添加crisp在线客服插件

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-e963981f3ae59fe09fae03b6573a3eeb29" class="collapse collapse-content"><h1 id="cl-9">五、给网站添加在线客服插件</h1>1.注册crisp账户并添加网站：<a href="https://app.crisp.chat/initiate/signup/" target="_blank">https://app.crisp.chat/initiate/signup/</a> 2.注册完成后，点击 <code>设置-网站设置-显示整合-HTML</code>，复制代码添加至后台主题设置 <code>自定义输出head 头部的HTML代码</code>即可。<a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/2857448024.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/2857448024.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8e58bcf8f4a29b85744600edf96c8ac197" aria-expanded="true"><div class="accordion-toggle">六、添加复制弹窗

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-8e58bcf8f4a29b85744600edf96c8ac197" class="collapse collapse-content"><h1 id="cl-10">六、添加复制弹窗</h1>1.首先将下方代码复制添加至后台主题设置 <code>自定义输出head 头部的HTML代码</code><pre class="hljs-pre"><code class="lang-html hljs xml"><ol><li>
</li><li><script src="https://www.mgxfd.club/layer/layer.js"></script>
</li></ol></code></pre>这个JS可以去官网下载，<a href="https://layer.layui.com/" target="_blank">点击进入</a> 然后可以修改上面代码为你网站的路径，毕竟咱不能用大神们的资源<pre class="hljs-pre"><code class="lang-html hljs xml"><ol><li>
</li><li><script src="https://xxxx.xxx.xxx/layer/layer.js"></script>
</li></ol></code></pre>2.最后复制下方代码添加至后台<code>主题设置 自定义 JavaScript</code>即可<pre class="hljs-pre"><code class="lang-JavaScript hljs"><ol><li>
</li><li>document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};
</li></ol></code></pre></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d4333f26e5de442495432fe7b5318ff873" aria-expanded="true"><div class="accordion-toggle">七、添加机器人通知插件

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d4333f26e5de442495432fe7b5318ff873" class="collapse collapse-content"><h1 id="cl-11">七、添加机器人通知插件</h1>插件无需修改，直接安装便可<a href="https://blog.say521.cn/archives/421.html" target="_blank">点击查看大神博客</a></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-025a137341656dc42dffbba3aa7d0a7526" aria-expanded="true"><div class="accordion-toggle">八、自定义左侧栏

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-025a137341656dc42dffbba3aa7d0a7526" class="collapse collapse-content"><h1 id="cl-12">八、自定义左侧栏</h1><div class="tip inlineBlock error">

有一定风险，修改前一定要先备份
</div><h2 id="cl-13">前置工作</h2>建议引入 Font Awesome 图标库，在 <code>主题后台设置 -> 开发者设置 -> 自定义输出 head 头部的 HTML 代码 里面添加下面的代码即可。</code><pre class="hljs-pre"><code class="lang-HTML hljs"><ol><li><link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</li></ol></code></pre>上面的 Font Awesome 的 css 文件来自 BootCDN 提供，你也可以替换成自己的文件。<h2 id="cl-14">/libs/Content.php</h2>首先，打开 libs/Content.php ，在白线所示的位置： <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/807672175.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/807672175.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a>插入下面的代码：<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li>/**
</li><li> *
</li><li> * @param $categories
</li><li> * @return string
</li><li> */
</li><li>public static function returnAsideCategories($categories){
</li><li> $html = "";
</li><li> $options = mget();
</li><li> $icons = array(
</li><li> 'default' => 'glyphicon glyphicon-tasks',
</li><li> 'github' => 'fa fa-github'
</li><li> /**
</li><li> * 格式： '分类缩略名' => '图标名称',
</li><li> */
</li><li> );
</li><li> while($categories->next()) {
</li><li> if ($categories->levels === 0) {
</li><li> $children = $categories->getAllChildren($categories->mid);
</li><li> if (!empty($children)) {
</li><li> $html .= '<li><a class="auto"> . $icons[$categories->slug] . '">' . $categories->name . '</a>';
</li><li> $childCategoryHtml = '<ul class="nav nav-sub dk"><li class="nav-sub-header"><a>' . $categories->name . '</a></li>';
</li><li> foreach($children as $mid){
</li><li> $child = $categories->getCategory($mid);
</li><li> $childCategoryHtml .= '<li><a href="' . $child['permalink'] . '">' . $child['count'] . ' . $icons[$child['slug']] . '">' . $child['name'] . '</a></li>';
</li><li> }
</li><li> $childCategoryHtml .= '</ul>';
</li><li> $html .= $childCategoryHtml;
</li><li> $html .= "</li>";
</li><li> } else {
</li><li> $html .= '<li><a href="' . $categories->permalink . '" class="auto">' . $categories->count . '.$icons[$categories->slug].'">' . $categories->name . '</a></li>';
</li><li> }
</li><li> }
</li><li> }
</li><li> return $html;
</li><li>}
</li></ol></code></pre>我修改好的<a href="https://www.abu3d.com/usr/uploads/2021/01/230694396.zip" data-pjax-state="" target="_blank">Content.php</a><h2 id="cl-15">图标设置</h2>我们可以看到有这么一行<code>$icons = array</code>，下面包含着是'system' => 'fa fa-apple',这样的代码，这个就是我们的图标设置 <code>请记住最后一句不能加逗号！！</code><ol><li><code>Font Awesome图标</code> 可以到 <a href="https://fontawesome.dashgame.com/" target="_blank">https://fontawesome.dashgame.com/</a> 选择你喜欢的图标使用。</li></ol>给个例子吧：<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li>'music' => 'fa fa-music',
</li><li> 'life' => 'fa fa-meetup' //这是最后一句，没有逗号！！
</li></ol></code></pre>handsome 主题自带部分<code>fontello</code>图标，使用方法在图标的名字前加入 <code>fontello fontello-</code> 即可。具体列表可在 handsome 主题文档 查看。<h4 id="cl-16">使用方法</h4>在 <a href="https://feathericons.com/" target="_blank">https://feathericons.com/</a> 选取好你需要的图标。然后在名称前插入 <code>" data-feather="</code> ，再输入名称即可。在 component/aside.php 中找到以下代码（大约 131 ~ 160 行），删除。<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li>
</li><li> <?php
</li><li> $class = "";
</li><li> if (in_array("openCategory",$this->options->featuresetup)){
</li><li> $class = "class=\\"active\\"";
</li><li> }
</li><li> ?>
</li><li> <li <?php echo $class; ?>>
</li><li> <a class="auto">
</li><li> <span class="pull-right text-muted">
</li><li> <i class="fontello icon-fw fontello-angle-right text"></i>
</li><li> <i class="fontello icon-fw fontello-angle-down text-active"></i>
</li><li> </span>
</li><li>
</li><li> <span class="nav-icon"><i data-feather="grid"></i></span>
</li><li>
</li><li> <span><?php _me("分类") ?></span>
</li><li> </a>
</li><li> <ul class="nav nav-sub dk">
</li><li> <li class="nav-sub-header">
</li><li> <a>
</li><li> <span><?php _me("分类") ?></span>
</li><li> </a>
</li><li> </li>
</li><li> 
</li><li> <?php
</li><li> $this->widget('Widget_Metas_Category_List')->to($categorys);
</li><li> echo Content::returnCategories($categorys) ?>
</li><li> </ul>
</li><li> </li>
</li></ol></code></pre><h2 id="cl-17">aside.php</h2>然后在下图白线所示的位置（ 127 行左右 ） <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/4186114383.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/4186114383.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a><pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li>
</li><li> <li class="line dk"></li>
</li><li> 
</li><li> 
</li><li> <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
</li><li> <span><?php _me("分类") ?></span>
</li><li> </li>
</li><li> 
</li><li> 
</li><li> <?php
</li><li> $this->widget('Widget_Metas_Category_List')->to($categorys);
</li><li> echo Content::returnAsideCategories($categorys) ?>
</li><li> 
</li></ol></code></pre>我修改好的 <a href="https://www.abu3d.com/usr/uploads/2021/01/3953375850.zip" data-pjax-state="" target="_blank">aside.php</a><code>然后，刷新你的博客，是不是就有效果了呢？</code></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3a16d44bf423d4c965cac9657f25968013" aria-expanded="true"><div class="accordion-toggle">九、右上角提醒插件 Plugin-HandsomeCall

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3a16d44bf423d4c965cac9657f25968013" class="collapse collapse-content"><h1 id="cl-18">九、右上角提醒插件 Plugin-HandsomeCall</h1>大神博客 自行下载 <a href="https://blog.iucky.cn/Y-disk/10.html" target="_blank">https://blog.iucky.cn/Y-disk/10.html</a>github项目地址 <a href="https://github.com/wibus-wee/Typecho-Plugin-HandsomeCall" target="_blank">https://github.com/wibus-wee/Typecho-Plugin-HandsomeCall</a></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6f4ea68b8f488c2ab5a8ddef1abf9ee594" aria-expanded="true"><div class="accordion-toggle">十、新评论邮件通

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6f4ea68b8f488c2ab5a8ddef1abf9ee594" class="collapse collapse-content"><h1 id="cl-19">十、新评论邮件通知-美化</h1><h2 id="cl-20">使用</h2>本教程来自大神 <a href="https://www.moerats.com/archives/743/" target="_blank">https://www.moerats.com/archives/743/</a>首先下载插件，解压上传到<code>/usr/plugins</code>目录，再编辑主题模板<code>comments.php</code>文件，在评论框的<code>input</code>下方插入以下代码：<pre class="hljs-pre"><code class="lang-HTML hljs"><ol><li><input type="hidden" name="receiveMail" id="receiveMail" value="yes" />
</li></ol></code></pre><a href="https://www.abu3d.com/usr/uploads/2021/01/3886855317.png" data-pjax-state="" target="_blank">!</a> 注意：本博客使用的<code>Handsome</code>主题自<code>4.1.x</code>版本开始可以不用修改该文件。接下来就在后台开启插件，然后设置插件，填写<code>smtp</code>服务器地址、邮箱地址、密码等信息。<pre class="hljs-pre"><code class="hljs apache"><ol><li>#博主使用的是QQ邮箱，可以通过设置-账户-开启smtp。插件设置请将ssl加密打勾。
</li><li>smtp服务器地址：smtp.qq.com
</li><li>SMTP端口：465
</li><li>SMTP用户：邮箱账户
</li><li>SMTP密码：开启smtp时获取的授权码
</li></ol></code></pre>然后基本上算设置好了，此时只需要定时访问插件设置里给的<code>执行发送任务地址</code>就可以触发自动发信功能了。这里可以在服务器上使用<code>Crontab</code>定时功能，也可以使用<code>360/阿里</code>网站监控功能，后者免费。<pre class="hljs-pre"><code class="hljs ruby"><ol><li>#如果你不想用监控，可以使用某大佬修改的评论邮箱插件，该版本不需要监控
</li><li>下载地址：https://www.moerats.com/usr/down/CommentToMail-2.1.0.zip
</li><li>插件来源：https://gxggxl.cn/24.html
</li></ol></code></pre><h2 id="cl-21">参考链接</h2><pre class="hljs-pre"><code class="hljs less"><ol><li>插件修改：https://blog.uniartisan.com/archives/CommentToMail.html
</li><li>美化版来源：https://www.liuguogy.com/archives/typecho-commenttomail-mail-style.html
</li></ol></code></pre></div></div></div> </div>

最后修改：2022 年 01 月 25 日

如果觉得我的文章对你有用，请随意赞赏噢~

🥰猜你想看🥰 为handsome博客添加侧边栏倒计时为typecho博客文章页脚添加"随机文章"和"猜你想看" 修复typecho的handsome主题赞赏功能样式被遮住的问题！为Typecho站点更改好看的字体关于本站，我有以下几点想说的...

🎲随机文章🎲 【备份】handsome美化教程合集【福利】蓝易云商家机器主打稳定建站服务器！29元/月1核/1G内存/10Mbps/香港CN2服务器、香港大带宽服务器、香港服务器推荐为typecho开启ssl注意要点云服务器能访问外网吗的问题解答为typecho网站开启Gzip压缩加快站点访问速度！

发表评论取消回复

距2023年高考仅剩

天时分秒

【备份】handsome美化教程合集

小屁 • 2021 年 04 月 04 日

<div class="markdown" id="markdown">
 <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/676361575.png"><img class=" ls-is-cached lazyloaded" data-src="https://www.abu3d.com/usr/uploads/2021/01/676361575.png" src="https://www.abu3d.com/usr/uploads/2021/01/676361575.png" alt=""style=""></a>本博客美化过程-教程文字均来自互联网<div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-6118280a095d8b708a535e652ad4dddc25" aria-expanded="true"><div class="accordion-toggle">一、修改底部的信息 美化

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-6118280a095d8b708a535e652ad4dddc25" class="collapse collapse-content"><h1 id="cl-1">一、修改底部的信息 美化</h1>参考博客--<a href="http://book.huat.xyz/handsome/1501170" target="_blank">底部美化</a>1.将以下代码加入主题后台的开发者选项中的自定义CSS<pre class="hljs-pre"><code class="lang-CSS hljs"><ol><li>/*底部页脚*/
</li><li>.github-badge {
</li><li>display: inline-block;
</li><li>border-radius: 4px;
</li><li>text-shadow: none;
</li><li>font-size: 12px;
</li><li>color: #fff;
</li><li>line-height: 15px;
</li><li>background-color: #abbac3;
</li><li>margin-bottom: 5px
</li><li>}
</li><li>.github-badge .badge-subject {
</li><li>display: inline-block;
</li><li>background-color: #4d4d4d;
</li><li>padding: 4px 4px 4px 6px;
</li><li>border-top-left-radius: 4px;
</li><li>border-bottom-left-radius: 4px
</li><li>}
</li><li>.github-badge .badge-value {
</li><li>display: inline-block;
</li><li>padding: 4px 6px 4px 4px;
</li><li>border-top-right-radius: 4px;
</li><li>border-bottom-right-radius: 4px
</li><li>}
</li><li>.github-badge .bg-blue {
</li><li>background-color: #007ec6
</li><li>}
</li><li>.github-badge .bg-orange {
</li><li>background-color: #ffa500
</li><li>}
</li><li>.github-badge .bg-red {
</li><li>background-color: #f00
</li><li>}
</li><li>.github-badge .bg-green {
</li><li>background-color: #3bca6e
</li><li>}
</li><li>.github-badge .bg-purple {
</li><li>background-color: #ab34e9
</li><li>}
</li></ol></code></pre>2.将以下代码添加至后台主题设置博客<code>底部左侧信息</code>，信息修改成自己的:<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li><div class="github-badge">
</li><li><a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="_blank" title="本网站由又拍云提供CDN加速/云存储服务" >
</li><li><span class="badge-subject">本网站由<img src="https://www.abu3d.com/img/upyun_logo.png">提供CDN加速/云存储服务</span>
</li><li></a>
</li><li></div>
</li></ol></code></pre>3.将以下代码添加至后台主题设置博客<code>底部右侧信息</code>:<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li><div class="github-badge">
</li><li><a href="./" title="©2019 Abu3d">
</li><li><span class="badge-subject">Copyright</span><span class="badge-value bg-blue">©2019 Abu3d</span>
</li><li></a>
</li><li></div>
</li><li> | 
</li><li><div class="github-badge">
</li><li><a href="http://www.miitbeian.gov.cn/" target="_blank" title="苏ICP备 20043146号-1" style="cursor: url("/usr/plugins/HoerMouse/static/image/dew/link.cur"), pointer;">
</li><li><span class="badge-subject">苏ICP备</span><span class="badge-value bg-green">20043146号-1</span>
</li><li></a>
</li><li></div>
</li><li> | 
</li><li><div class="github-badge">
</li><li> <a href="https://www.ihewro.com/archives/489/" target="_blank" title="baidu" >
</li><li> <span class="badge-subject">Theme</span><span class="badge-value bg-orange">Handsome</span>
</li><li> </a>
</li><li></div>
</li></ol></code></pre>4.添加完成后，需要去<code>handsome/component/footer.php</code>删除原有底部代码，需要删除的代码如下：<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li><?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
</li><li><?php Content::outputCommentJS($this, $this->security); ?>
</li><li></div>
</li><li> <footer id="footer" class="app-footer" role="footer">
</li><li> <div class="wrapper b-t bg-light">
</li><li> <span class="pull-right hidden-xs text-ellipsis">
</li><li> <?php $this->options->BottomInfo(); ?>
</li><li> 
</li><li> </span>
</li><li> <span class="text-ellipsis">
</li><li> 
</li><li> <?php $this->options->BottomleftInfo(); ?></span>
</li><li> </div>
</li></ol></code></pre></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a9cd647470a9afc29b050e7529dccdf187" aria-expanded="true"><div class="accordion-toggle">二、AliceStyle美化插件-全局美化

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-a9cd647470a9afc29b050e7529dccdf187" class="collapse collapse-content"><h1 id="cl-2">二、AliceStyle美化插件（十分强大的插件）</h1>详情见大神博客 <a href="https://racns.com/374.html" target="_blank">点击连击</a></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-c53d892b58b84f549c2ba25f0584cf8724" aria-expanded="true"><div class="accordion-toggle">三、UserAgent插件-评论显示信息插件

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-c53d892b58b84f549c2ba25f0584cf8724" class="collapse collapse-content"> <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/4202548119.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/4202548119.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a><h1 id="cl-3">三、Hansome主题专用的UserAgent插件</h1>详情见大神博客 <a href="https://doge.uk/coding/useragent-modify.html" target="_blank">点击连击</a><h2 id="cl-4">食用指南</h2><ol><li>操作前请做好相应备份工作</li><li>此插件只适用于<code>Handsome</code>主题，未对其它主题优化！！！</li><li>请先将插件置于<code>Typecho</code>的<code>plugins</code>目录下，且插件目录名应为<code>UserAgent</code>，注意大小写，否则将无法正常食用！！！</li><li>修改<code>Handsome</code>主题，<code>component</code>目录下的<code>comments.php</code>代码文件，大概第<code>60~80</code>行左右</li></ol><pre class="hljs-pre"><code class="hljs php-template"><ol><li><span class="comment-author vcard">
</li><li> <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?>
</li><li></span>
</li></ol></code></pre>添加代码<code><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?></code> ，修改后代码如下：<pre class="hljs-pre"><code class="hljs php-template"><ol><li><span class="comment-author vcard">
</li><li> <b class="fn"><?php echo $author; ?></b><?php echo $Identity; ?><?php UserAgent_Plugin::get_useragent($comments->agent,$comments->ip); ?>
</li><li></span>
</li></ol></code></pre><h3 id="cl-5">获取真实IP</h3>Typecho开启CDN后，可能无法获取访客真实IP，只能取得CDN节点IP，为此可以在Typecho博客网站的根目录的<code>config.inc.php</code>插入下面的代码：<pre class="hljs-pre"><code class="hljs php"><ol><li>//** 防止CDN造成无法获取客户真实IP地址 */
</li><li>if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])) 
</li><li>{
</li><li> $list = explode(',',$_SERVER['HTTP_X_FORWARDED_FOR']);
</li><li> $_SERVER['REMOTE_ADDR'] = $list[0];
</li><li>}
</li></ol></code></pre></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d22da054b604741c8f406d52727aa54f81" aria-expanded="true"><div class="accordion-toggle">四、代码高亮插件Code Prettify

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d22da054b604741c8f406d52727aa54f81" class="collapse collapse-content"><h1 id="cl-6">四、代码高亮插件Code Prettify</h1>详情见大神博客 <a href="https://www.xcnte.com/archives/523/" target="_blank">点击链接</a> 效果 <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/2861559930.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/2861559930.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a> 第 1 步：下载本插件，解压，放到 <code>usr/plugins/</code> 目录中；第 2 步：文件夹名改为 <code>CodePrettify</code>；第 3 步：登录管理后台，激活插件 （请勿与其它同类插件同时启用，以免互相影响）第 4 步：设置：选择主题风格，是否显示行号等。第 5 步：修改（替换）<code>/usr/themes/handsome/assets/css/</code>下的handsome.min.css文件<hr>如果你的网站有开启Pjax（<code>handsome主题</code>默认开启）请把以下代码添加到回调函数的地方，在你使用的主题设置里看看以 <code>Handsome主题</code>为例：1.<code>主题 --> 设置外观 --> Pjax --> PJAX回调函数</code><pre class="hljs-pre"><code class="lang-JavaScript hljs"><ol><li>if (typeof Prism !== 'undefined') {
</li><li>var pres = document.getElementsByTagName('pre');
</li><li> for (var i = 0; i < pres.length; i++){
</li><li> if (pres[i].getElementsByTagName('code').length > 0)
</li><li> pres[i].className = 'line-numbers';}
</li><li>Prism.highlightAll(true,null);}
</li></ol></code></pre>2.<code>若插件里设置不显示行号，</code>PJAX<code>函数要改为</code>``JavaScript if (typeof Prism !== 'undefined') { Prism.highlightAll(true,null);}<h2 id="cl-7">重要说明</h2><h3 id="cl-8">可设置项</h3>1. 选择高亮主题风格 (官方提供的 6 种风格切换，本人自己新增了三种（Mac风格）)<ul><li>coy.css</li><li>dark.css</li><li>BlackMac.css（黑色Mac风格）</li><li>GrayMac.css （默认选中：Mac风格（灰色））</li><li>WhiteMac.css（白色Mac风格）</li><li>twilight.css</li><li>tomorrow-night.css</li></ul>2. 是否在代码左侧显示行号 （默认开启）注：<code>C#</code>代码与 <code>C++</code>代码使用 <code>csharp</code> 与 <code>cpp</code>进行标记声明由于最新版本handsome主题内置的高亮与该插件冲突，请进入后台 --> 设置外观 --> 主题增强功能里关闭主题内置高亮</div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-298dea821c6807de34b338b8ebf2255876" aria-expanded="true"><div class="accordion-toggle">五、给网站添加crisp在线客服插件

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-298dea821c6807de34b338b8ebf2255876" class="collapse collapse-content"><h1 id="cl-9">五、给网站添加在线客服插件</h1>1.注册crisp账户并添加网站：<a href="https://app.crisp.chat/initiate/signup/" target="_blank">https://app.crisp.chat/initiate/signup/</a> 2.注册完成后，点击 <code>设置-网站设置-显示整合-HTML</code>，复制代码添加至后台主题设置 <code>自定义输出head 头部的HTML代码</code>即可。<a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/2857448024.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/2857448024.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-96f1fef0ca55fd2a2d13e7bd4e977e1983" aria-expanded="true"><div class="accordion-toggle">六、添加复制弹窗

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-96f1fef0ca55fd2a2d13e7bd4e977e1983" class="collapse collapse-content"><h1 id="cl-10">六、添加复制弹窗</h1>1.首先将下方代码复制添加至后台主题设置 <code>自定义输出head 头部的HTML代码</code><pre class="hljs-pre"><code class="lang-html hljs xml"><ol><li>
</li><li><script src="https://www.mgxfd.club/layer/layer.js"></script>
</li></ol></code></pre>这个JS可以去官网下载，<a href="https://layer.layui.com/" target="_blank">点击进入</a> 然后可以修改上面代码为你网站的路径，毕竟咱不能用大神们的资源<pre class="hljs-pre"><code class="lang-html hljs xml"><ol><li>
</li><li><script src="https://xxxx.xxx.xxx/layer/layer.js"></script>
</li></ol></code></pre>2.最后复制下方代码添加至后台<code>主题设置 自定义 JavaScript</code>即可<pre class="hljs-pre"><code class="lang-JavaScript hljs"><ol><li>
</li><li>document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};
</li></ol></code></pre></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-47c11315e7ae77f74f77d37890c80a6145" aria-expanded="true"><div class="accordion-toggle">七、添加机器人通知插件

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-47c11315e7ae77f74f77d37890c80a6145" class="collapse collapse-content"><h1 id="cl-11">七、添加机器人通知插件</h1>插件无需修改，直接安装便可<a href="https://blog.say521.cn/archives/421.html" target="_blank">点击查看大神博客</a></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-d44c6dcc8bd42cd046589a03b7e1870838" aria-expanded="true"><div class="accordion-toggle">八、自定义左侧栏

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-d44c6dcc8bd42cd046589a03b7e1870838" class="collapse collapse-content"><h1 id="cl-12">八、自定义左侧栏</h1><div class="tip inlineBlock error">

有一定风险，修改前一定要先备份
</div><h2 id="cl-13">前置工作</h2>建议引入 Font Awesome 图标库，在 <code>主题后台设置 -> 开发者设置 -> 自定义输出 head 头部的 HTML 代码 里面添加下面的代码即可。</code><pre class="hljs-pre"><code class="lang-HTML hljs"><ol><li><link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</li></ol></code></pre>上面的 Font Awesome 的 css 文件来自 BootCDN 提供，你也可以替换成自己的文件。<h2 id="cl-14">/libs/Content.php</h2>首先，打开 libs/Content.php ，在白线所示的位置： <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/807672175.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/807672175.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a>插入下面的代码：<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li>/**
</li><li> *
</li><li> * @param $categories
</li><li> * @return string
</li><li> */
</li><li>public static function returnAsideCategories($categories){
</li><li> $html = "";
</li><li> $options = mget();
</li><li> $icons = array(
</li><li> 'default' => 'glyphicon glyphicon-tasks',
</li><li> 'github' => 'fa fa-github'
</li><li> /**
</li><li> * 格式： '分类缩略名' => '图标名称',
</li><li> */
</li><li> );
</li><li> while($categories->next()) {
</li><li> if ($categories->levels === 0) {
</li><li> $children = $categories->getAllChildren($categories->mid);
</li><li> if (!empty($children)) {
</li><li> $html .= '<li><a class="auto"> . $icons[$categories->slug] . '">' . $categories->name . '</a>';
</li><li> $childCategoryHtml = '<ul class="nav nav-sub dk"><li class="nav-sub-header"><a>' . $categories->name . '</a></li>';
</li><li> foreach($children as $mid){
</li><li> $child = $categories->getCategory($mid);
</li><li> $childCategoryHtml .= '<li><a href="' . $child['permalink'] . '">' . $child['count'] . ' . $icons[$child['slug']] . '">' . $child['name'] . '</a></li>';
</li><li> }
</li><li> $childCategoryHtml .= '</ul>';
</li><li> $html .= $childCategoryHtml;
</li><li> $html .= "</li>";
</li><li> } else {
</li><li> $html .= '<li><a href="' . $categories->permalink . '" class="auto">' . $categories->count . '.$icons[$categories->slug].'">' . $categories->name . '</a></li>';
</li><li> }
</li><li> }
</li><li> }
</li><li> return $html;
</li><li>}
</li></ol></code></pre>我修改好的<a href="https://www.abu3d.com/usr/uploads/2021/01/230694396.zip" data-pjax-state="" target="_blank">Content.php</a><h2 id="cl-15">图标设置</h2>我们可以看到有这么一行<code>$icons = array</code>，下面包含着是'system' => 'fa fa-apple',这样的代码，这个就是我们的图标设置 <code>请记住最后一句不能加逗号！！</code><ol><li><code>Font Awesome图标</code> 可以到 <a href="https://fontawesome.dashgame.com/" target="_blank">https://fontawesome.dashgame.com/</a> 选择你喜欢的图标使用。</li></ol>给个例子吧：<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li>'music' => 'fa fa-music',
</li><li> 'life' => 'fa fa-meetup' //这是最后一句，没有逗号！！
</li></ol></code></pre>handsome 主题自带部分<code>fontello</code>图标，使用方法在图标的名字前加入 <code>fontello fontello-</code> 即可。具体列表可在 handsome 主题文档 查看。<h4 id="cl-16">使用方法</h4>在 <a href="https://feathericons.com/" target="_blank">https://feathericons.com/</a> 选取好你需要的图标。然后在名称前插入 <code>" data-feather="</code> ，再输入名称即可。在 component/aside.php 中找到以下代码（大约 131 ~ 160 行），删除。<pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li>
</li><li> <?php
</li><li> $class = "";
</li><li> if (in_array("openCategory",$this->options->featuresetup)){
</li><li> $class = "class=\\"active\\"";
</li><li> }
</li><li> ?>
</li><li> <li <?php echo $class; ?>>
</li><li> <a class="auto">
</li><li> <span class="pull-right text-muted">
</li><li> <i class="fontello icon-fw fontello-angle-right text"></i>
</li><li> <i class="fontello icon-fw fontello-angle-down text-active"></i>
</li><li> </span>
</li><li>
</li><li> <span class="nav-icon"><i data-feather="grid"></i></span>
</li><li>
</li><li> <span><?php _me("分类") ?></span>
</li><li> </a>
</li><li> <ul class="nav nav-sub dk">
</li><li> <li class="nav-sub-header">
</li><li> <a>
</li><li> <span><?php _me("分类") ?></span>
</li><li> </a>
</li><li> </li>
</li><li> 
</li><li> <?php
</li><li> $this->widget('Widget_Metas_Category_List')->to($categorys);
</li><li> echo Content::returnCategories($categorys) ?>
</li><li> </ul>
</li><li> </li>
</li></ol></code></pre><h2 id="cl-17">aside.php</h2>然后在下图白线所示的位置（ 127 行左右 ） <a data-fancybox="gallery" href="https://www.abu3d.com/usr/uploads/2021/01/4186114383.png"><img class="lazyload" data-src="https://www.abu3d.com/usr/uploads/2021/01/4186114383.png" src="https://cdn.jsdelivr.net/gh/gogobody/Modify_Joe_Theme@4.7.0/assets/img/lazyload-min.gif" alt=""style=""></a><pre class="hljs-pre"><code class="lang-PHP hljs"><ol><li>
</li><li> <li class="line dk"></li>
</li><li> 
</li><li> 
</li><li> <li class="hidden-folded padder m-t m-b-sm text-muted text-xs">
</li><li> <span><?php _me("分类") ?></span>
</li><li> </li>
</li><li> 
</li><li> 
</li><li> <?php
</li><li> $this->widget('Widget_Metas_Category_List')->to($categorys);
</li><li> echo Content::returnAsideCategories($categorys) ?>
</li><li> 
</li></ol></code></pre>我修改好的 <a href="https://www.abu3d.com/usr/uploads/2021/01/3953375850.zip" data-pjax-state="" target="_blank">aside.php</a><code>然后，刷新你的博客，是不是就有效果了呢？</code></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3ab28f7acacf6d0c863500276d76041714" aria-expanded="true"><div class="accordion-toggle">九、右上角提醒插件 Plugin-HandsomeCall

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-3ab28f7acacf6d0c863500276d76041714" class="collapse collapse-content"><h1 id="cl-18">九、右上角提醒插件 Plugin-HandsomeCall</h1>大神博客 自行下载 <a href="https://blog.iucky.cn/Y-disk/10.html" target="_blank">https://blog.iucky.cn/Y-disk/10.html</a>github项目地址 <a href="https://github.com/wibus-wee/Typecho-Plugin-HandsomeCall" target="_blank">https://github.com/wibus-wee/Typecho-Plugin-HandsomeCall</a></div></div></div><div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-269a30ba1ab8e5ee3ed70aa1799154d846" aria-expanded="true"><div class="accordion-toggle">十、新评论邮件通

</div>
</div>
<div class="panel-body collapse-panel-body">
<div id="collapse-269a30ba1ab8e5ee3ed70aa1799154d846" class="collapse collapse-content"><h1 id="cl-19">十、新评论邮件通知-美化</h1><h2 id="cl-20">使用</h2>本教程来自大神 <a href="https://www.moerats.com/archives/743/" target="_blank">https://www.moerats.com/archives/743/</a>首先下载插件，解压上传到<code>/usr/plugins</code>目录，再编辑主题模板<code>comments.php</code>文件，在评论框的<code>input</code>下方插入以下代码：<pre class="hljs-pre"><code class="lang-HTML hljs"><ol><li><input type="hidden" name="receiveMail" id="receiveMail" value="yes" />
</li></ol></code></pre><a href="https://www.abu3d.com/usr/uploads/2021/01/3886855317.png" data-pjax-state="" target="_blank">!</a> 注意：本博客使用的<code>Handsome</code>主题自<code>4.1.x</code>版本开始可以不用修改该文件。接下来就在后台开启插件，然后设置插件，填写<code>smtp</code>服务器地址、邮箱地址、密码等信息。<pre class="hljs-pre"><code class="hljs apache"><ol><li>#博主使用的是QQ邮箱，可以通过设置-账户-开启smtp。插件设置请将ssl加密打勾。
</li><li>smtp服务器地址：smtp.qq.com
</li><li>SMTP端口：465
</li><li>SMTP用户：邮箱账户
</li><li>SMTP密码：开启smtp时获取的授权码
</li></ol></code></pre>然后基本上算设置好了，此时只需要定时访问插件设置里给的<code>执行发送任务地址</code>就可以触发自动发信功能了。这里可以在服务器上使用<code>Crontab</code>定时功能，也可以使用<code>360/阿里</code>网站监控功能，后者免费。<pre class="hljs-pre"><code class="hljs ruby"><ol><li>#如果你不想用监控，可以使用某大佬修改的评论邮箱插件，该版本不需要监控
</li><li>下载地址：https://www.moerats.com/usr/down/CommentToMail-2.1.0.zip
</li><li>插件来源：https://gxggxl.cn/24.html
</li></ol></code></pre><h2 id="cl-21">参考链接</h2><pre class="hljs-pre"><code class="hljs less"><ol><li>插件修改：https://blog.uniartisan.com/archives/CommentToMail.html
</li><li>美化版来源：https://www.liuguogy.com/archives/typecho-commenttomail-mail-style.html
</li></ol></code></pre></div></div></div> </div>

【备份】handsome美化教程合集

发表评论取消回复

为Typecho站点更改好看的字体

为Typecho站点添加好看的字体-Plus教程

关于本站，我有以下几点想说的...

【最全】为Typecho站点更改好看的字体-ProMax

为handsome博客添加侧边栏倒计时

【折腾】这几天我做了什么（1.21-1.26）

22年是观众，23年是选手。

HoRain Cloud-新年钜惠 E5-2670v22 40核-国内物理服务器，首月低至199元-E5-26892 32核 32G内存

利用JS给博客网站左上角显示FPS帧数

Let’s Encrypt错误签发数百万张证书所有错误证书将在5天内吊销

【备份】handsome美化教程合集

发表评论 取消回复

【备份】handsome美化教程合集

发表评论取消回复