0.7.1
This commit is contained in:
浪子
parent
482e9a1e93
commit
cd3933ea53
|
|
@ -1,146 +0,0 @@
|
|||
.donate-panel {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button--like {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.button--like:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.icon--default {
|
||||
fill: #666;
|
||||
transition: fill 0.3s ease;
|
||||
}
|
||||
|
||||
.button--like:hover .icon--default {
|
||||
fill: #ff4081;
|
||||
}
|
||||
|
||||
#qrcode-panel {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
padding: 15px;
|
||||
margin-bottom: 10px;
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease;
|
||||
min-width: 240px;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.qrcode-body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.donate-memo {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#donate-close {
|
||||
position: absolute;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#donate-close:hover {
|
||||
color: #ff4081;
|
||||
}
|
||||
|
||||
.donate-qrpay img {
|
||||
max-width: 240px;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* 支付方式切换按钮样式 */
|
||||
.donate-methods {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 15px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.donate-method-btn {
|
||||
padding: 5px 15px;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
cursor: pointer;
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.donate-method-btn.active {
|
||||
background: #ff4081;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.donate-method-btn:hover {
|
||||
background: #ff4081;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* QR码容器样式 */
|
||||
.qr-container {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.qr-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 0.3s ease, visibility 0.3s ease;
|
||||
}
|
||||
|
||||
.qr-image.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 小三角形 */
|
||||
#qrcode-panel:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid white;
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const donateBtn = document.getElementById('donate-btn');
|
||||
const qrcodePanel = document.getElementById('qrcode-panel');
|
||||
const donateClose = document.getElementById('donate-close');
|
||||
const methodBtns = document.querySelectorAll('.donate-method-btn');
|
||||
const qrImages = document.querySelectorAll('.qr-image');
|
||||
let isVisible = false;
|
||||
// 切换支付方式
|
||||
function switchPayMethod(method) {
|
||||
// 更新按钮状态
|
||||
methodBtns.forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
if (btn.dataset.method === method) {
|
||||
btn.classList.add('active');
|
||||
}
|
||||
});
|
||||
// 更新二维码显示
|
||||
qrImages.forEach(img => {
|
||||
img.classList.remove('active');
|
||||
if (img.dataset.method === method) {
|
||||
img.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
// 点击打赏按钮切换二维码显示状态
|
||||
function toggleQRCode(event) {
|
||||
event.stopPropagation();
|
||||
isVisible = !isVisible;
|
||||
qrcodePanel.style.display = isVisible ? 'block' : 'none';
|
||||
}
|
||||
// 点击关闭按钮隐藏二维码
|
||||
function hideQRCode(event) {
|
||||
event.stopPropagation();
|
||||
isVisible = false;
|
||||
qrcodePanel.style.display = 'none';
|
||||
}
|
||||
// 点击二维码面板之外的地方隐藏二维码
|
||||
function handleDocumentClick(event) {
|
||||
if (isVisible && !qrcodePanel.contains(event.target) && !donateBtn.contains(event.target)) {
|
||||
isVisible = false;
|
||||
qrcodePanel.style.display = 'none';
|
||||
}
|
||||
}
|
||||
// 绑定事件监听器
|
||||
donateBtn.addEventListener('click', toggleQRCode);
|
||||
donateClose.addEventListener('click', hideQRCode);
|
||||
document.addEventListener('click', handleDocumentClick);
|
||||
// 绑定支付方式切换按钮事件
|
||||
methodBtns.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
const method = e.target.dataset.method;
|
||||
switchPayMethod(method);
|
||||
});
|
||||
});
|
||||
// 初始化显示第一个支付方式
|
||||
switchPayMethod('wechat');
|
||||
});
|
||||
|
|
@ -52,8 +52,10 @@ function themeConfig($form) {
|
|||
$form->addInput($cnavatar);
|
||||
$midimg = new Typecho_Widget_Helper_Form_Element_Text('midimg', NULL, '/img/', _t('填写分类图片路径,以"/"结尾'), _t('默认使用网站根目录下的img文件夹,也可以填写绝对或者CDN地址,自动匹配目录下以分类ID为文件名的mid.jpg格式的图片'));
|
||||
$form->addInput($midimg);
|
||||
$donate = new Typecho_Widget_Helper_Form_Element_Text('donate', NULL, NULL, _t('赞赏二维码'), _t('不填写则不显示'));
|
||||
$form->addInput($donate);
|
||||
$wxpay = new Typecho_Widget_Helper_Form_Element_Text('wxpay', NULL, 'https://blog.loliko.cn/images/wechatpay.png', _t('微信收款码'), _t('赞赏二维码'));
|
||||
$form->addInput($wxpay);
|
||||
$alipay= new Typecho_Widget_Helper_Form_Element_Text('alipay', NULL, 'https://blog.loliko.cn/images/alipay.png', _t('支付宝收款码'), _t('赞赏二维码'));
|
||||
$form->addInput($alipay);
|
||||
$addhead = new Typecho_Widget_Helper_Form_Element_Textarea('addhead', NULL, NULL, _t('Head内代码用于网站验证等'), _t('支持HTML'));
|
||||
$form->addInput($addhead);
|
||||
$tongji = new Typecho_Widget_Helper_Form_Element_Textarea('tongji', NULL, NULL, _t('统计代码'), _t('支持HTML'));
|
||||
|
|
|
|||
48
post.php
48
post.php
|
|
@ -1,13 +1,6 @@
|
|||
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
|
||||
<?php $this->need('header.php'); ?>
|
||||
<style>
|
||||
#toc {font-size:14px;padding:10px 15px;background-color:var(--farallon-background-gray);border-radius:10px;margin-bottom:20px}
|
||||
#toc summary{cursor:pointer}
|
||||
#toc toc-title{font-weight:600}
|
||||
#toc ul{padding-left:10px;margin-bottom:10px}
|
||||
#toc ul li::before{content:"·";margin-right:5px}
|
||||
#toc ul li>ul{margin-left:10px;font-size:12px}
|
||||
</style>
|
||||
<style>#toc{font-size:14px;padding:10px 15px;background-color:var(--farallon-background-gray);border-radius:10px;margin-bottom:20px}#toc summary{cursor:pointer}#toc toc-title{font-weight:600}#toc ul{padding-left:10px;margin-bottom:10px}#toc ul li::before{content:"·";margin-right:5px}#toc ul li>ul{margin-left:10px;font-size:12px}</style>
|
||||
<main class="site--main">
|
||||
<article class="post--single">
|
||||
<ul class="meta">
|
||||
|
|
@ -45,33 +38,24 @@
|
|||
</div>
|
||||
<h2 class="post--single__title"><?php $this->title() ?></h2>
|
||||
<div class="post--single__content graph" ><?php $this->content(); ?></div>
|
||||
<?php if($this->options->donate): ?>
|
||||
<?php if($this->options->wxpay): ?>
|
||||
<!--打赏 -->
|
||||
<div class="post--single__action">
|
||||
<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/donate.css'); ?>">
|
||||
<script type="text/javascript" src="<?php $this->options->themeUrl('assets/js/donate.js'); ?>"></script>
|
||||
<div class="donate-panel">
|
||||
<div id="donate-btn">
|
||||
<button class="button--like">
|
||||
<svg class="icon--default" viewBox="0 0 1024 1024" width="32" height="32">
|
||||
<path
|
||||
d="M332.8 249.6c38.4 0 83.2 19.2 108.8 44.8L467.2 320 512 364.8 556.8 320l25.6-25.6c32-32 70.4-44.8 108.8-44.8 19.2 0 38.4 6.4 57.6 12.8 44.8 25.6 70.4 57.6 76.8 108.8 6.4 44.8-6.4 89.6-38.4 121.6L512 774.4 236.8 492.8C204.8 460.8 185.6 416 192 371.2c6.4-44.8 38.4-83.2 76.8-108.8C288 256 313.6 249.6 332.8 249.6L332.8 249.6M332.8 185.6C300.8 185.6 268.8 192 243.2 204.8 108.8 275.2 89.6 441.6 185.6 537.6l281.6 281.6C480 832 499.2 838.4 512 838.4s32-6.4 38.4-19.2l281.6-281.6c96-96 76.8-262.4-57.6-332.8-25.6-12.8-57.6-19.2-89.6-19.2-57.6 0-115.2 25.6-153.6 64L512 275.2 486.4 249.6C448 211.2 390.4 185.6 332.8 185.6L332.8 185.6z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="qrcode-panel" style="display: none;">
|
||||
<div class="qrcode-body">
|
||||
<div class="hidden">
|
||||
<span id="donate-close">关闭</span>
|
||||
</div>
|
||||
<div class="donate-qrpay">
|
||||
<img id="wxqr" src="<?php $this->options->donate() ?>" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="button--like" onclick="openModal()">
|
||||
<svg class="icon--default" viewBox="0 0 1024 1024" width="32" height="32"><path d="M332.8 249.6c38.4 0 83.2 19.2 108.8 44.8L467.2 320 512 364.8 556.8 320l25.6-25.6c32-32 70.4-44.8 108.8-44.8 19.2 0 38.4 6.4 57.6 12.8 44.8 25.6 70.4 57.6 76.8 108.8 6.4 44.8-6.4 89.6-38.4 121.6L512 774.4 236.8 492.8C204.8 460.8 185.6 416 192 371.2c6.4-44.8 38.4-83.2 76.8-108.8C288 256 313.6 249.6 332.8 249.6L332.8 249.6M332.8 185.6C300.8 185.6 268.8 192 243.2 204.8 108.8 275.2 89.6 441.6 185.6 537.6l281.6 281.6C480 832 499.2 838.4 512 838.4s32-6.4 38.4-19.2l281.6-281.6c96-96 76.8-262.4-57.6-332.8-25.6-12.8-57.6-19.2-89.6-19.2-57.6 0-115.2 25.6-153.6 64L512 275.2 486.4 249.6C448 211.2 390.4 185.6 332.8 185.6L332.8 185.6z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- 弹窗 -->
|
||||
<div class="modal" id="modal" onclick="closeModal()">
|
||||
<div class="modal-content" onclick="event.stopPropagation()">
|
||||
<span class="close-btn" onclick="closeModal()">×</span>
|
||||
<p>如果觉得文章对你有帮助，可以请作者喝杯咖啡 ☕️</p>
|
||||
<img src="<?php $this->options->wxpay() ?>" alt="微信二维码">
|
||||
<img src="<?php $this->options->alipay() ?>" alt="支付宝二维码">
|
||||
</div>
|
||||
</div>
|
||||
<script>function openModal(){document.getElementById('modal').style.display='flex'}function closeModal(){document.getElementById('modal').style.display='none'}</script>
|
||||
<style>.button--like{background:none;border:none;padding:0;cursor:pointer;transition:transform 0.3s ease;}.button--like:hover{transform:scale(1.1);}.icon--default{fill:#666;transition:fill 0.3s ease;}.button--like:hover .icon--default{fill:#ff4081;}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,0.1);justify-content:center;align-items:center;z-index:1000;}.modal-content{background-color:white;padding:20px;border-radius:10px;text-align:center;position:relative;}.modal-content img{width:200px;height:200px;margin-top:10px;}.close-btn{position:absolute;top:10px;right:10px;cursor:pointer;font-size:20px;color:#888;}</style>
|
||||
<?php endif; ?>
|
||||
<!-- 复制链接 -->
|
||||
<?php if($this->options->showshare): ?>
|
||||
|
|
|
|||
Loading…
Reference in New Issue