Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(iconfont): 新增朋友图标并优化瞬间功能

Browse Source 
- 在 iconfont.css 中添加了新的朋友图标 (\e84d)
-优化了瞬间功能的加载和显示逻辑
- 更新了 CDN链接为更快的镜像源
- 修复了一些小的前端问题，如百度统计和 Google Analytics 的加载顺序
This commit is contained in:
hehh
2025-07-17 15:11:42 +08:00
parent c635de68fb
commit fc837d961b
5 changed files with 7076 additions and 6904 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
css/iconfont.css
View File

@@ -43,6 +43,10 @@
content: "\e608"; content: "\e608";
} }
.icon-friend:before {
content: "\e84d";
}
.icon-email:before { .icon-email:before {
content: "\e6f5"; content: "\e6f5";
} }

13785
css/style.css
View File

File diff suppressed because it is too large Load Diff

14
index-2.html
View File

@@ -10,11 +10,11 @@
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚"> <meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
<meta name="author" content="Honesty"> <meta name="author" content="Honesty">
<title>Honesty的主页</title> <title>Honesty的主页</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/css/onlinewebfonts.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/css/onlinewebfonts.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/css/vno.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/css/vno.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/css/iconfont.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/css/iconfont.css">
<link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/listener-He/Home/apple-touch-icon.png"> <link rel="apple-touch-icon" href="https://cdn.jsdmirror.com/gh/listener-He/Home/apple-touch-icon.png">
<link rel="icon" href="https://cdn.jsdelivr.net/gh/listener-He/Home/favicon.ico"> <link rel="icon" href="https://cdn.jsdmirror.com/gh/listener-He/Home/favicon.ico">
</head> </head>
<body> <body>
@@ -28,7 +28,7 @@
<div class="panel-main__content"> <div class="panel-main__content">
<div class="ih-item circle effect right_to_left"> <div class="ih-item circle effect right_to_left">
<a href="#" title="" class="blog-button"> <a href="#" title="" class="blog-button">
<div class="img"><img src="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/img/logo3.jpg" alt="img" class="js-avatar iUp profilepic"></div> <div class="img"><img src="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/img/logo3.jpg" alt="img" class="js-avatar iUp profilepic"></div>
<div class="info iUp"> <div class="info iUp">
<div class="info-back"> <div class="info-back">
<h2> <h2>
@@ -122,7 +122,7 @@
</div> </div>
</header> </header>
<script type="text/javascript" src="./assets/js/main.js"></script> <script type="text/javascript" src="./assets/js/main.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/assets/json/images.json?cb=getBingImages"></script> <script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/assets/json/images.json?cb=getBingImages"></script>
<script async src="https://analyse.hehouhui.cn/tracker.js" data-ackee-server="https://analyse.hehouhui.cn" data-ackee-domain-id="7887135f-a413-46e2-a98c-52d4f18d9973"></script> <script async src="https://analyse.hehouhui.cn/tracker.js" data-ackee-server="https://analyse.hehouhui.cn" data-ackee-domain-id="7887135f-a413-46e2-a98c-52d4f18d9973"></script>
<script> <script>
// 百度站点统计 // 百度站点统计

119
index.html
View File

@@ -13,10 +13,10 @@
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚"> <meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
<meta name="author" content="HeHouHui"> <meta name="author" content="HeHouHui">
<title>Honesty的主页</title> <title>Honesty的主页</title>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/css/style.css?version=2"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/css/style.css?version=2">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/css/iconfont.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/css/iconfont.css">
<link rel="apple-touch-icon" href="https://blog-file.hehouhui.cn/bj/logo.png"> <link rel="apple-touch-icon" href="https://blog-file.hehouhui.cn/bj/logo.png">
<link rel="icon" href="https://cdn.jsdelivr.net/gh/listener-He/Home/favicon.ico?version=1"> <link rel="icon" href="https://cdn.jsdmirror.com/gh/listener-He/Home/favicon.ico?version=1">
<!--引入SweetAlert <!--引入SweetAlert
<script src="https://fastly.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js"></script>--> <script src="https://fastly.jsdelivr.net/npm/sweetalert@2.1.2/dist/sweetalert.min.js"></script>-->
@@ -30,8 +30,8 @@
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css" <link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
media="all"> media="all">
<!--科技炫酷按钮--> <!--科技炫酷按钮-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/css/sey.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/css/sey.css">
<!-- <link rel="stylesheet" href="./css/style.css" />--> <!-- <link rel="stylesheet" href="./css/style.css" />-->
<!--IE淘汰计划--> <!--IE淘汰计划-->
<script> <script>
@@ -42,9 +42,9 @@
<body oncontextmenu=self.event.returnValue=false onselectstart="return false"> <body oncontextmenu=self.event.returnValue=false onselectstart="return false">
<!-- style="background: url(https://blog-file.hehouhui.cn/bj/1.jpg) center center / cover no-repeat rgb(102, 102, 102);" --> <!-- style="background: url(https://blog-file.hehouhui.cn/bj/1.jpg) center center / cover no-repeat rgb(102, 102, 102);" -->
<header id="panel" class="panel-cover" <header id="panel" class="panel-cover"
> >
<!--星空背景--> <!--星空背景-->
<!-- <canvas id="bg"></canvas>--> <!-- <canvas id="bg"></canvas>-->
<!--天气--> <!--天气-->
<div id="he-plugin-simple"></div> <div id="he-plugin-simple"></div>
<script> <script>
@@ -76,26 +76,28 @@
<div class="panel-main__inner panel-inverted"> <div class="panel-main__inner panel-inverted">
<div class="panel-main__content"> <div class="panel-main__content">
<div class="ih-item circle effect right_to_left" id="avatar"> <div class="ih-item circle effect right_to_left" id="avatar">
<a class="blog-button" > <a class="blog-button">
<div class="img"><img src="https://cdn.jsdelivr.net/gh/listener-He/images@default/202309111525908.jpeg" alt="img" <div class="img"><img
class="js-avatar iUp profilepic header-logo"> src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg"
alt="img"
class="js-avatar iUp profilepic header-logo">
</div> </div>
<div class="info iUp"> <div class="info iUp">
<div class="info-back"> <div class="info-back">
<img alt="img" src="https://cdn.jsdelivr.net/gh/listener-He/Home/images/kl.gif" <img alt="img" src="https://cdn.jsdmirror.com/gh/listener-He/Home/images/kl.gif"
class="js-avatar profilepic"> class="js-avatar profilepic">
</div> </div>
</div> </div>
</a> </a>
</div> </div>
<h1 class="panel-cover__title panel-title iUp"> <h1 class="panel-cover__title panel-title iUp">
<!-- <br/>Honesty--> <!-- <br/>Honesty-->
</h1> </h1>
<!-- <p class="panel-cover__subtitle panel-subtitle iUp">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>--> <!-- <p class="panel-cover__subtitle panel-subtitle iUp">众里寻他千百度，蓦然回首，那人却在，灯火阑珊处。</p>-->
<p class="panel-cover__subtitle panel-subtitle iUp"></p> <p class="panel-cover__subtitle panel-subtitle iUp"></p>
<!-- <canvas class="navigation-wrapper iUp" id="canvas" style="width:50%;padding-top:0px;" width="920"--> <!-- <canvas class="navigation-wrapper iUp" id="canvas" style="width:50%;padding-top:0px;" width="920"-->
<!-- height="350"></canvas>--> <!-- height="350"></canvas>-->
<!-- <script src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/clock.js"></script>--> <!-- <script src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/clock.js"></script>-->
<hr class="iUp"/> <hr class="iUp"/>
<!--一言无法显示时的文字--> <!--一言无法显示时的文字-->
<p id="description" style="margin-top: 10%" class="panel-cover__description iUp">人生天地之间，若白驹之过隙，忽然而已。 <p id="description" style="margin-top: 10%" class="panel-cover__description iUp">人生天地之间，若白驹之过隙，忽然而已。
@@ -135,7 +137,8 @@
</a> </a>
</li> </li>
<li class="navigation__item"> <li class="navigation__item">
<a href="https://www.linkedin.com/in/honesty861024" title="Linkedin" target="_blank"> <a href="https://www.linkedin.com/in/honesty861024" title="Linkedin"
target="_blank">
<j class="fab fa-telegram-plane"></j> <j class="fab fa-telegram-plane"></j>
<span class="label">Linkedin</span> <span class="label">Linkedin</span>
</a> </a>
@@ -149,7 +152,7 @@
<li class="navigation__item"> <li class="navigation__item">
<a href="javascript:void(0)" class="moments-link" <a href="javascript:void(0)" class="moments-link"
title="瞬间" target="_blank"> title="瞬间" target="_blank">
<j class="fab fa-qq"></j> <j class="fab fa-friend"></j>
<span class="label">瞬间</span> <span class="label">瞬间</span>
</a> </a>
</li> </li>
@@ -198,52 +201,72 @@
</p> </p>
</div> </div>
</header> </header>
<!-- 模拟iPhone 16容器 --> <!-- 模拟iPhone 16容器 -->
<div class="iphone-simulator"> <div class="iphone-simulator" style="display: none">
<div class="browser-view"> <div class="dynamic-island">
<div class="close-btn"></div> <p class="content"></p>
<iframe id="moment-frame" width="100%" height="100%" frameborder="0"></iframe>
</div> </div>
</div> <div class="back-btn"></div>
<div class="browser-view">
<div class="close-btn"></div>
<div class="skeleton"></div>
<iframe id="moment-frame" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
<!-- 遮罩层 --> <!-- 遮罩层 -->
<div class="overlay"></div> <div class="overlay"></div>
<!--黑暗主题--> <!--黑暗主题-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/fetch.min.js"></script> <script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/fetch.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/main.js?version=2"></script> <script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/main.js?version=2"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/bj.js"></script> <script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/bj.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/moments.js"></script> <script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/moments.js"></script>
<script async src="https://analyse.hehouhui.cn/tracker.js" data-ackee-server="https://analyse.hehouhui.cn" data-ackee-domain-id="7887135f-a413-46e2-a98c-52d4f18d9973"></script> <script async src="https://analyse.hehouhui.cn/tracker.js" data-ackee-server="https://analyse.hehouhui.cn"
data-ackee-domain-id="7887135f-a413-46e2-a98c-52d4f18d9973"></script>
<script> <script>
// 百度站点统计 // 百度站点统计
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function () { (function () {
try { try {
var hm = document.createElement("script"); var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?ae2a009a75b13c21d5121ee51375ea4e"; hm.src = "https://hm.baidu.com/hm.js?ae2a009a75b13c21d5121ee51375ea4e";
var s = document.getElementsByTagName("script")[0]; var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s); s.parentNode.insertBefore(hm, s);
} catch (e) { } catch (e) {
console.log("百度统计错误", e); console.log("百度统计错误", e);
} }
})(); })();
</script> </script>
<!-- Google tag (gtag.js) --> <!-- 先定义 gtag 函数作为安全兜底 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
<script type="text/javascript"> <script type="text/javascript">
try { try {
window.dataLayer = window.dataLayer || []; window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);} function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date()); gtag('js', new Date());
} catch (e) {
console.log("Google Analytics Init 错误", e);
}
</script>
<!-- 再异步加载 Google 的 gtag.js -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
<!-- 可选：继续调用 config -->
<script type="text/javascript">
try {
gtag('config', 'G-DYWDEVKDP0'); gtag('config', 'G-DYWDEVKDP0');
} catch (e) { } catch (e) {
console.log("google ga error", e); console.error("Google Analytics config 失败", e);
} }
</script> </script>
<!--<script src="./js/StarrySky.js"></script>--> <!--<script src="./js/StarrySky.js"></script>-->
<!--<script src="./js/stars.js"></script>--> <!--<script src="./js/stars.js"></script>-->
</body> </body>

56
js/moments.js
View File

@@ -1,11 +1,41 @@
$(document).ready(function () { $(document).ready(function () {
function animateDynamicIsland(text = '正在加载...') {
const island = document.querySelector('.dynamic-island');
const content = island.querySelector('.content');
content.textContent = text;
island.classList.add('expand');
setTimeout(() => {
island.classList.remove('expand');
}, 2000); // 2秒后收缩
}
function openSimulator(url) {
const sim = document.querySelector('.iphone-simulator');
const iframe = document.getElementById('moment-frame');
const skeleton = document.querySelector('.skeleton');
const browserView = document.querySelector('.browser-view');
sim.style.display = 'block';
document.querySelector('.overlay').style.display = 'block';
iframe.src = url;
iframe.onload = () => {
setTimeout(() => {
skeleton.style.display = 'none';
browserView.classList.add('loaded');
}, 300); // 延迟更自然
};
}
// 处理瞬间链接点击事件 // 处理瞬间链接点击事件
$('.moments-link').on('click', function (e) { $('.moments-link').on('click', function (e) {
e.preventDefault(); // 阻止默认跳转 e.preventDefault(); // 阻止默认跳转
// 获取链接地址 // 获取链接地址
var url = "https://moments.hehouhui.cn"; var url = "https://moments.hehouhui.cn";
console.log("当前用户UA-", navigator.userAgent)
// 判断是否是移动端 // 判断是否是移动端
var isMobile = /iPhone|Android/i.test(navigator.userAgent); var isMobile = /iPhone|Android/i.test(navigator.userAgent);
@@ -13,24 +43,38 @@ $(document).ready(function () {
// 移动端：直接跳转 // 移动端：直接跳转
window.location.href = url; window.location.href = url;
} else { } else {
animateDynamicIsland('正在加载瞬间...');
// PC端：在模拟器中显示 // PC端：在模拟器中显示
$('#moment-frame').attr('src', url); openSimulator(url);
$('.iphone-simulator').show();
$('.overlay').show();
} }
}); });
// 关闭按钮点击事件 // 关闭按钮点击事件
$('.close-btn').on('click', function () { $('.close-btn').on('click', function () {
$('.iphone-simulator').hide(); $('.iphone-simulator').hide();
$('.overlay').hide(); $('.overlay').hide();
$('.iphone-simulator').removeClass('visible');
$('#moment-frame').attr('src', ''); // 清空iframe内容 $('#moment-frame').attr('src', ''); // 清空iframe内容
}); });
// 遮罩层点击事件 // 遮罩层点击事件 点击空白处关闭模拟器
$('.overlay').on('click', function () { $('.overlay').on('click', function () {
$(this).hide(); $(this).hide();
$('.iphone-simulator').hide(); $('.iphone-simulator').hide();
$('.iphone-simulator').removeClass('visible');
$('#moment-frame').attr('src', ''); $('#moment-frame').attr('src', '');
}); });
const iframe = document.getElementById('moment-frame');
document.querySelector('.back-btn').addEventListener('click', () => {
try {
// 安全地尝试让 iframe 内部回退
if (iframe.contentWindow && iframe.contentWindow.history.length > 1) {
iframe.contentWindow.history.back();
}
} catch (e) {
// 跨域或权限问题
console.error('无法回退：', e);
}
});
}); });