演示：https://imgur.la
在Chevereto V4 首页显示图片托管数量，今天为大家分享一下 Chevereto V4 首页显示图片托管数量的实现方法。
1. 修改后台代码
修改 index.php 文件，位置：/chevereto/app/legacy/routes/index.php，修改以下两处：
第一处： 找到下述代码：
use Chevereto\Legacy\Classes\Settings;
–
在此后添加代码：
–
use Chevereto\Legacy\Classes\Stat;
第二处： 找到下述代码：
$handler::setVar('doctitle', _s(Settings::get('website_doctitle'));
$handler::setVar('pre_doctitle', _s(Settings::get('website_name'));
在此后添加代码：
$handler::setVar('totals', Stat::getTotals());
2. 修改首页代码
修改 index.php 文件，位置：/chevereto/content/legacy/themes/Peafowl/views/index.php，修改以下一处：
找到下述代码：
<div class="home-buttons">
<?php echo Handler::var('homepage_cta'); ?>
</div>
添加以下内容：
<!– 最终修复版 –>
<div class=”chv-dashboard” style=”padding: 1.5rem; margin: 1.5rem auto; width: 80%; max-width: 700px; color: #fff; text-align: center;”>
<!– 第一排（2项） –>
<div style=”display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap;”>
<div style=”text-align: center;”>
<i class=”fas fa-clock-rotate-left” style=”font-size: 1.4rem; color: #4CAF50;”></i>
<p style=”font-size: 1rem; margin: 0.2rem 0; opacity: 0.9;”>Site Uptime</p>
<p style=”font-size: 1.4rem; font-weight: bold; margin: 0; color: #fff;”>2249 Days</p>
</div>
<div style=”text-align: center;”>
<i class=”fas fa-images” style=”font-size: 1.4rem; color: #2196F3;”></i>
<p style=”font-size: 1rem; margin: 0.2rem 0; opacity: 0.9;”>Total Images</p>
<p style=”font-size: 1.4rem; font-weight: bold; margin: 0; color: #fff;”>122,765</p>
</div>
</div>
<!– 第二排（3项，补全图标） –>
<div style=”display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap;”>
<div style=”text-align: center;”>
<i class=”fas fa-bolt” style=”font-size: 1.4rem; color: #FFC107;”></i>
<p style=”font-size: 1rem; margin: 0.2rem 0; opacity: 0.9;”>Upload Speed</p>
<p style=”font-size: 1.4rem; font-weight: bold; margin: 0; color: #fff;”>Fast & Stable</p>
</div>
<div style=”text-align: center;”>
<i class=”fas fa-file-lines” style=”font-size: 1.4rem; color: #FFC107;”></i> <!– 补全图标 –>
<p style=”font-size: 1rem; margin: 0.2rem 0; opacity: 0.9;”>File Size</p>
<p style=”font-size: 1.4rem; font-weight: bold; margin: 0; color: #fff;”>Up to 100MB</p>
</div>
<div style=”text-align: center;”>
<i class=”fas fa-file-image” style=”font-size: 1.4rem; color: #FFC107;”></i>
<p style=”font-size: 1rem; margin: 0.2rem 0; opacity: 0.9;”>Multi-format</p>
<p style=”font-size: 1.4rem; font-weight: bold; margin: 0; color: #fff;”>JPG/PNG/WebP/MP4</p>
</div>
</div>
<!– 第三排（3项，统一颜色/大小） –>
<div style=”display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap;”>
<div style=”text-align: center;”>
<i class=”fas fa-link” style=”font-size: 1.4rem; color: #FFC107;”></i>
<p style=”font-size: 1.2rem; margin: 0.2rem 0; color: #fff; font-weight: 500;”>Auto Share Links</p>
</div>
<div style=”text-align: center;”>
<i class=”fas fa-shield-halved” style=”font-size: 1.4rem; color: #FFC107;”></i>
<p style=”font-size: 1.2rem; margin: 0.2rem 0; color: #fff; font-weight: 500;”>Secure Storage</p>
</div>
<div style=”text-align: center;”>
<i class=”fas fa-code” style=”font-size: 1.4rem; color: #FFC107;”></i>
<p style=”font-size: 1.2rem; margin: 0.2rem 0; color: #fff; font-weight: 500;”>For Blogs/Codes</p>
</div>
</div>
<!– 邮箱 –>
<div style=”font-size: 1.3rem; color: #fff;”>
<i class=”fas fa-envelope” style=”color: #2196F3; margin-right: 0.5rem; font-size: 1.2rem;”></i>
Contact: <a href=”mailto:admin@mails.cm” style=”color: #2196F3; text-decoration: underline; font-weight: 600;”>admin@mails.cm</a>
</div>
</div>
<!– 响应式适配 –>
<style>
@media (max-width: 768px) {
.chv-dashboard {width: 95% !important; padding: 1rem !important;}
div {flex-direction: column !important; gap: 0.8rem !important;}
}
</style>
<!– 图标库 –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css” />
到这一步就大功告成了。
评论(0)