『原创』『教程』博客主题修改记录（长期不定时更新）
前言
最近一直在摸鱼，也好久没更新博客了，今天登陆上一看，发现博客自动更新出问题了。
简单了解了一下，发现是自己改动的东西太多了，服务器本地主题和作者github内容重复了
所以只好重新下载作者的主题，再把自己改的加上去，但是突然发现自己已经记不太清楚修改了哪些了
所以打算摸鱼写一篇文章来记录自己博客的修改内容，毕竟好记性不如烂笔头嘛
修改目录
主要修改的内容
{timeline}
{timeline-item color="#19be6b"}
PC端＆PE端侧栏自定义 恋爱计时
{/timeline-item}
{timeline-item color="#19be6b"}
文章底部端 打赏按钮
{/timeline-item}
{timeline-item color="#19be6b"}
PC端＆PE端 登录按钮
{/timeline-item}
{timeline-item color="#19be6b"}
PC端 评论弹幕
{/timeline-item}
{timeline-item color="#19be6b"}
关于页 我的追番 页面
{/timeline-item}
{timeline-item color="#19be6b"}
QQ自动跳转浏览器
{/timeline-item}
{timeline-item color="#19be6b"}
复制内容时添加转载说明
{/timeline-item}
{timeline-item color="#19be6b"}
修改了恋爱计时，将其内嵌到主题了
{/timeline-item}
{timeline-item color="#19be6b"}
修改了时光机的发表权限为贡献者以上
{/timeline-item}
{timeline-item color="#19be6b"}
修改了评论上传图片的尺寸和清晰度
{/timeline-item}
{timeline-item color="#19be6b"}
添加了评论上传图片的审核功能
{/timeline-item}
{timeline-item color="#19be6b"}
新增了评论可选小电视和QQ表情包
{/timeline-item}
{timeline-item color="#19be6b"}
添加了全站的JS广告及广告位
{/timeline-item}
{/timeline}
补充教程
因为在学习了一些Typecho的后端设置后，觉得直接把所有自定义功能放在一起，然后通过 functions.php 调用更为方便
所以就有了以下教程，虽然也是在其他人那里嫖来的，但是根据自己的理解也进行了举一反三，所以在此记录一下
（一）引入自定义配置文件
1、创建自定义文件
首先在主题根目录或者/public目录下创建一个 custom.php 文件（文件名可自定义）
内容包含在 <?php ?>内
2、引入配置文件
接着在根目录的 functions.php 文件内引入自定义配置文件
{tabs}
{tabs-pane label="代码"}
// 引入自定义设置
require_once("public/custom.php");{/tabs-pane}
{tabs-pane label="添加位置"}
放在 functions.php 的倒数第二行，只要放在 function themeConfig($form){} 里面就行了。
{/tabs-pane}
{/tabs}
3、添加tabs
最后在根目录的 functions.php 文件的外观设置tabs里再加一个自定义配置
{tabs}
{tabs-pane label="代码"}
<li class="item" data-current="joe_custom">自定义设置</li>{/tabs-pane}
{tabs-pane label="添加位置"}
以Joe主题为例
{/tabs-pane}
{/tabs}
这样就可以引入自定义配置文件了
（二）引入自定义JS和CSS文件
1、引入到主题框架
直接在 Joe/public/include.php 插入以下代码即可
<!--引入自定义模块CSS-->
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/custom.min.css'); ?>">
<!--引入自定义模块JS-->
<script src="<?php $this->options->themeUrl('assets/js/custom.min.js'); ?>"></script>2、添加自定义JS和CSS文件
在 Joe/assets/js 文件夹下创建 custom.min.js
在 Joe/assets/css 文件夹下创建 custom.min.css
（三）添加后台自定义功能
1、PC端＆PE端 侧栏自定义
{collapse}
{collapse-item label="PC端＆PE端 侧栏自定义 "}
要添加侧栏或者底栏，只需要在 custom.php 文件里添加相应的ID就行了（ID唯一，切勿重复）
例如：
// 自定义侧边栏模块 - PC
$JCustomAside = new Typecho_Widget_Helper_Form_Element_Textarea(
'JCustomAside',
NULL,
NULL,
'自定义侧边栏模块 - PC',
'介绍：用于自定义手机端侧边栏模块 <br />
格式：请填写前端代码，不会写请勿填写 <br />
例如：您可以在此处添加一个搜索框、时间、宠物、恋爱计时等等'
);
$JCustomAside->setAttribute('class', 'joe_content joe_custom');
$form->addInput($JCustomAside);然后再到侧栏文件 public/aside.php 或者底栏文件 public/footer.php 引用就行了
如果是PE端的侧栏，需要到 public/header.php 引用
{/collapse-item}
{/collapse}
2、文章底部端 打赏按钮
{collapse}
{collapse-item label="文章底部端 打赏按钮 "}
（1）添加后台开关及配置
首先在 custom.php 文件里添加打赏申明，关闭时可以不显示，默认开启
{hide}
// 收款设置
$PaySet = new Typecho_Widget_Helper_Form_Element_Select(
'PaySet',
array(
'on' => '开启（默认）',
'off' => '关闭',
),
'on',
'是否启用底部打赏功能',
'介绍：开启后，文章底部展示打赏功能'
);
$PaySet->setAttribute('class', 'joe_content joe_custom');
$form->addInput($PaySet->multiMode());
$Alipay = new Typecho_Widget_Helper_Form_Element_Text(
'Alipay',
NULL,
NULL,
'支付宝收款码',
'介绍：填写此处，打赏界面展示支付宝收款码，图片地址'
);
$Alipay->setAttribute('class', 'joe_content joe_custom');
$form->addInput($Alipay->multiMode());
$WeChat = new Typecho_Widget_Helper_Form_Element_Text(
'WeChat',
NULL,
NULL,
'微信收款码',
'介绍：填写此处，微信界面展示微信收款码，图片地址'
);
$WeChat->setAttribute('class', 'joe_content joe_custom');
$form->addInput($WeChat->multiMode());
$QqPay = new Typecho_Widget_Helper_Form_Element_Text(
'QqPay',
NULL,
NULL,
'QQ收款码',
'介绍：填写此处，QQ界面展示QQ收款码，图片地址'
);
$QqPay->setAttribute('class', 'joe_content joe_custom');
$form->addInput($QqPay->multiMode());{/hide}
（2）添加打赏功能
然后再在 handle.php 里添加打赏功能代码
{hide}
<style>
/*打赏*/
.footer_flex { width: 42px; height: 42px; background-color: #f56c6c; border-radius: 50%; position: relative; z-index: 10; display: flex; justify-content: center; align-items: center; color:#909399; font-size:12px}
.footer_flex:hover { background-color: var(--theme); cursor: pointer;}
.footer_flex:hover .flex-footer { display: block; }
.footer_flex .flex-footer { box-shadow: 0px 0px 5px 0px var(--theme); border-radius: 8px; width: 156px; height: 166px; position: absolute; left: -52px; top: -175px; text-align: center; padding-top: 10px; background: #fff; display: none; }
.footer_flex .flex-footer input{vertical-align:middle; cursor: pointer; margin-bottom:3px; *margin-bottom:3px;}
</style>
<script language="javascript" type="text/javascript">
function zfb(){
var obj=document.getElementById("ewm");
obj.src="<?php $this->options->Alipay() ?>";
};
function wx(){
var obj=document.getElementById("ewm");
obj.src="<?php $this->options->WeChat() ?>";
};
function qq(){
var obj=document.getElementById("ewm");
obj.src="<?php $this->options->QqPay() ?>";
};
</script>
<div style="text-align: center; margin-left:30px; <?php if(Helper::options()->PaySet !== 'on') echo 'display:none;' ?>">
<div class="footer_flex">
<img src="https://cdn.jsdelivr.net/gh/aill66/cdn/shang.png" width="20px" height="20px">
<div class="flex-footer">
<img id="ewm" src="<?php $this->options->WeChat() ?>" width="130px" height="130px">
<div style="margin-top:2px;">
<label><input name="pay" type="radio" value="wx" checked="checked" onclick="wx()">微信</label>
<label style="margin-left:2px; display:block-inline"><input name="pay" type="radio" value="zfb" onclick="zfb()">支付宝</label>
<label style="margin-left:2px; display:block-inline"><input name="pay" type="radio" value="qq" onclick="qq()">QQ</label>
</div>
<div style="height:40px; background:rgba(0,0,0,0);"></div>
</div>
</div>
<p style="margin-top:5px; color:var(--minor); font-size:12px">打赏</p>
</div>{/hide}
我这里把css另外放在了 assets/css/custom.css 里了，方面统一管理
如果把样式放在了外部，记得引入相关样式表哦，在 public/include.php 引入样式表
{/collapse-item}
{/collapse}
3、PC端＆PE端 登录按钮
{collapse}
{collapse-item label="PC端＆PE端 登录按钮 "}
PC端登录Joe主题已经添加上了，而且功能比较完善，直接使用就行
PE端的直接在 public/header.php 相应位置添加以下代码就行
{tabs}
{tabs-pane label="代码"}
{hide}
<ul class="joe_header__slideout-menu panel-box" style="margin-top:15px; color:var(--minor);">
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="15" height="15">
<path d="M231.594 610.125C135.087 687.619 71.378 804.28 64.59 935.994c-.373 7.25 3.89 23.307 30.113 23.307s33.512-16.06 33.948-23.301c6.861-114.025 63.513-214.622 148.5-280.346 3.626-2.804 16.543-17.618 3.24-39.449-13.702-22.483-40.863-12.453-48.798-6.08zm280.112-98.44v63.96c204.109 0 370.994 159.345 383.06 360.421.432 7.219 8.649 23.347 32.44 23.347s31.991-16.117 31.62-23.342c-12.14-236.422-207.676-424.386-447.12-424.386z"></path>
<path d="M319.824 319.804c0-105.974 85.909-191.883 191.882-191.883s191.883 85.91 191.883 191.883c0 26.57-5.405 51.88-15.171 74.887-5.526 14.809-2.082 31.921 20.398 38.345 23.876 6.822 36.732-8.472 41.44-20.583 11.167-28.729 17.294-59.973 17.294-92.65 0-141.297-114.545-255.842-255.843-255.842S255.863 178.506 255.863 319.804s114.545 255.843 255.843 255.843v-63.961c-105.973-.001-191.882-85.909-191.882-191.882z"></path>
<path d="M512 255.843s21.49-5.723 21.49-31.306S512 191.882 512 191.882c-70.65 0-127.921 57.273-127.921 127.922 0 3.322.126 6.615.375 9.875.264 3.454 14.94 18.116 37.044 14.425 22.025-3.679 26.6-21.93 26.6-21.93-.028-.788-.06-1.575-.06-2.37.001-35.325 28.637-63.961 63.962-63.961z"></path>
</svg>
<?php if($this->user->hasLogin()):?>
<a class="item" style="color:var(--theme);" href="<?php $this->options->adminUrl(); ?>"><?php $this->user->screenName(); ?></a><span>丨</span>
<a class="item" style="color:var(--minor);" href="<?php $this->options->logoutUrl(); ?>">退出</a>
<?php else : ?>
<a class="item" style="color:var(--minor);" href=<?php $this->options->adminUrl('login.php'); ?> title="登录">登录</a><span>丨</span>
<a class="item" style="color:var(--minor);" href=<?php $this->options->adminUrl('register.php'); ?> title="注册">注册</a>
<?php endif;?>
</ul> {/hide}
{/tabs-pane}
{tabs-pane label="添加位置"}
放在PE侧栏的最底下，当然，你也可以放在其他位置，你开心就好
{/tabs-pane}
{/tabs}
{/collapse-item}
{/collapse}
4、PC端 评论弹幕
弹幕功能的教程已经设置了后台管理功能，所以直接看教程就行
传送门 『教程』Typecho的Joe主题添加评论弹幕功能（限PC）
5、关于页 我的追番 页面
{timeline}
{timeline-item color="#ed4014"}
2021.6.21 我的追番功能是一款插件，所以等我空了再水一篇文章，先鸽在这里了
{/timeline-item}
{timeline-item color="#19be6b"}
2021.7.5 教程更新了出来了『插件』B站来源的Typecho追番页插件
{/timeline-item}
{/timeline}
6、QQ自动跳转浏览器
同样的，教程已经设置了后台管理，直接按照教程修改即可
传送门 『代码』Typecho的Joe主题新增QQ打开自动跳转到浏览器
7、复制内容时添加转载说明
{collapse}
{collapse-item label=" 复制内容时添加转载说明 " }
在post.php最下面添加
{hide}
<!--版权声明-->
<script>
document.body.addEventListener('copy', function (e) {
if (window.getSelection().toString() && window.getSelection().toString().length > 10) {
setClipboardText(e);
}
});
function setClipboardText(event) {
var clipboardData = event.clipboardData || window.clipboardData;
if (clipboardData) {
event.preventDefault();
var htmlData = ''
+ '著作权归作者所有。<br>'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。<br>'
+ '作者：<?php $this->author() ?><br>'
+ '链接：' + window.location.href + '<br>'
+ '来源：<?php $this->options->siteUrl(); ?><br><br>'
+ window.getSelection().toString();
var textData = ''
+ '著作权归作者所有。\n'
+ '商业转载请联系作者获得授权，非商业转载请注明出处。\n'
+ '作者：<?php $this->author() ?>\n'
+ '链接：' + window.location.href + '\n'
+ '来源：<?php $this->options->siteUrl(); ?>\n\n'
+ window.getSelection().toString();
clipboardData.setData('text/html', htmlData);
clipboardData.setData('text/plain',textData);
}
}
</script>{/hide}
{/collapse-item}
{/collapse}
写在后面
本文章不定时更新，主要记录博主修改内容，想到的都会尽量写上
当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »