1.前言
基于作者 Ki 的开源项目 LikeGirl 进行修改部分内容到达美化效果。
由于项目本身存在少许的缺陷，以及基于自身的需求，特对项目进行了针对性调整。
本文章用于记录自身对原项目的调整，便于后续的迁移。同时也分享给喜爱这个项目的情侣们，如果有什么疑问可留言或email我。
2.前台调整
2.1 隐藏敏感信息
问题：在原项目中使用了公益接口（https://q1.qlogo.cn/g?b=qq&nk=账号）获取留言者头像，由于该接口需要使用QQ账号作为传输参数，导致留言者的信息暴漏在页面中，进而可能给留言者带来不必要的麻烦。暴漏示例如下图。
调整方案：将原头像获取api接口为gravatar服务，全称Globally Recognized Avatar，其采用邮箱的不可逆向破解的哈希作为参数，所以安全系数较高。由于gravatar服务在国外，以及现在采用邮箱sha256作为参数（以前采用MD5），导致无法获取或者无法获取正确头像。故这里使用国内镜像服务Cravatar – 互联网公共头像服务。
调整过程：
修改留言者QQ信息：打开leaving.php文件，按照如下修改：
此处内容需要评论回复后（审核通过）方可阅读。
隐藏男女主QQ信息，打开head.php文件，按照如下修改：
此处内容需要评论回复后（审核通过）方可阅读。
2.2 音乐播放器
效果展示：
调整方案：进入 🎵明月浩空网 注册账号，进入后台设置授权域名以及播放歌单，后在index页面最底部或在后台引入JS文件即可。
使用特点：免费使用，非会员用户无法更加个性化设置，只可设置系统已有的默认歌单。
2.3 留言弹幕
效果展示：
调整步骤：这里基于开源的JS项目yaseng/jquery.barrager.js进行调整，删减了部分功能和修复显示BUG。
修改后的JS文件，保存内容到 /Style/js/jquery.barrager.js 文件中。
(function($) {
$.fn.barrager =function(barrage) {
barrage=$.extend({
top: 0,
speed: 8,
color: '#fff',
}, barrage || {});
var time=new Date().getTime();
var barrager_id='barrage_' + time;
var id='#' + barrager_id;
var div_barrager=$("<div class='barrage' id='" + barrager_id + "'></div>").appendTo($(this));
var window_width=$(window).width() + 500;
var this_width=(window_width > this.width()) ? this.width() : window_width;
var top=(barrage.top==0) ? Math.floor(Math.random() * 500 + 20) : barrage.top;
div_barrager.css("top", top + "px");
div_barrager_box=$("<div class='barrage_box cl'></div>").appendTo(div_barrager);
if(barrage.img) {
div_barrager_box.append("<a class='portrait z' href='javascript:;'></a>");
var img=$("<img src='' >").appendTo(id + " .barrage_box .portrait");
img.attr('src', barrage.img);
}
div_barrager_box.append(" <div class='z p'></div>");
var content=$("<a title='' href=''</a>").appendTo(id + " .barrage_box .p");
content.attr({
'href': barrage.href,
'id': barrage.id
}).empty().append(barrage.info);
content.css('color', barrage.color);
div_barrager.css('margin-right', 0);
$(id).animate({
right:this_width
}, barrage.speed*1000, function() {
$(id).remove();
});
div_barrager_box.mouseover(function() {
$(id).stop(true);
});
div_barrager_box.mouseout(function() {
$(id).animate({
right:this_width
}
, barrage.speed*1000, function() {
$(id).remove();
});
});
}
$.fn.barrager.removeAll=function() {
$('.barrage').remove();
}
})(jQuery);
修改后的CSS文件，复制内容到 /Style/js/barrager.css 文件中。
.barrage{position: fixed;bottom:70px;right:-500px;display: inline-block;width: 500px;z-index: 99999}
.barrage_box{background-color: rgba(0,0,0,.5);padding-right: 8px; height: 40px;display: inline-block;border-radius: 25px;transition: all .3s;}
.barrage_box .portrait{ display: inline-block;margin-top: 4px; margin-left: 4px; width: 32px;height: 32px;border-radius: 50%;overflow: hidden;}
.barrage_box .portrait img{width: 100%;height: 100%;}
.barrage_box div.p a{ margin-right: 2px; font-size: 14px;color: #fff;line-height: 40px;margin-left: 18px;pointer-events:none;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;display: inline-block;max-width: 350px;}
.barrage .z {float: left !important;}
.barrage a{text-decoration:none;}
修改head.php文件，在合适位置引入 js、css文件。
<script src="../Style/js/loading.js?LikeGirl=<?php echo $version ?>"></script>
<link rel="stylesheet" href="/Style/css/barrager.css">
<script src="/Style/js/jquery.barrager.js"></script>
修改 leaving.php，文件，修改以下位置：
......
if (!$result)
echo "错误信息：" . $stmt->error;
// 将留言数据存入数组
$messages = []; //添加此处
$currentAdds = 0; //添加此处
include_once 'head.php';
?>
......
<?php
while ($stmt->fetch()) {
if (mt_rand(0, 10) < 4 && $currentAdds < 10) { //添加开始位置
array_push($messages, [
"img" => "https://cravatar.cn/avatar/" . md5($qq . '@qq.com'),
"info" => $text,
"speed" => mt_rand(12, 15)
]);
$currentAdds++;
} //添加结束位置
?>
<div class="leavform <?php if ($Animation == "1") { ?>animated fadeInUp delay-03s<?php } ?>">
......
// 在最后边的 </script> 后添加以下：
(function() {
const messages = <?php echo json_encode($messages); ?>;
let index = messages.length - 1;
let isBarrageActive = true;
let barrageTimeoutId = null;
function startBarrage() {
if (!isBarrageActive) return;
if (index < 0) return;
$('body').barrager(messages[index]);
index--;
const delay = Math.floor(Math.random() * 5000) + 2000;
barrageTimeoutId = setTimeout(startBarrage, delay);
}
function stopBarrage() {
isBarrageActive = false;
if (barrageTimeoutId) {
clearTimeout(barrageTimeoutId);
barrageTimeoutId = null;
}
$.fn.barrager.removeAll();
}
startBarrage();
window.addEventListener('popstate', function(event) {
console.log('Location changed via back/forward:', window.location.href);
stopBarrage();
});
const originalPushState = history.pushState;
history.pushState = function(state, title, url) {
originalPushState.apply(history, arguments);
stopBarrage();
};
const originalReplaceState = history.replaceState;
history.replaceState = function(state, title, url) {
originalReplaceState.apply(history, arguments);
stopBarrage();
};
})();
</script>3.后台调整
3.1 男女主双管理
她说 --> "你这什么破密码，我记不住，我要自己的账号。"
"好的，立马安排! " <-- 我答
效果演示：
调整过程：
首先直接手动在数据表 login 添加对象新用户数据。
然后是页面信息调整，将头像显示正确，修改 /admin/Nav.php 文件主要三处部分:
此处内容需要评论回复后（审核通过）方可阅读。
最后是个人密码修改调整，便于她修改密码，修改 /admin/userPost.php 文件如下:
$login_user = $_SESSION['loginadmin']; //新增
if ($pw) {
$loginsql = "update login set user = '$adminName' ,pw ='" . md5($pw) . "' where user = '$login_user'"; //修改
session_destroy();
} else {
$loginsql = "update login set user = '$adminName' where user = '$login_user'"; //修改
}
最后更新 2025-03-15
还在用PHP啊
好教程i like
好东西啊
有东西