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";
}
.icon-friend:before {
content: "\e84d";
}
.icon-email:before {
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="author" content="Honesty">
<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.jsdelivr.net/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="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/listener-He/Home/apple-touch-icon.png">
<link rel="icon" href="https://cdn.jsdelivr.net/gh/listener-He/Home/favicon.ico">
<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.jsdmirror.com/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/iconfont.css">
<link rel="apple-touch-icon" href="https://cdn.jsdmirror.com/gh/listener-He/Home/apple-touch-icon.png">
<link rel="icon" href="https://cdn.jsdmirror.com/gh/listener-He/Home/favicon.ico">
</head>
<body>
@@ -28,7 +28,7 @@
<div class="panel-main__content">
<div class="ih-item circle effect right_to_left">
<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-back">
<h2>
@@ -122,7 +122,7 @@
</div>
</header>
<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>
// 百度站点统计

119
index.html
View File

@@ -13,10 +13,10 @@
<meta name="keywords" content="Honesty,HeHouHui,HeHui,明厚">
<meta name="author" content="HeHouHui">
<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.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/style.css?version=2">
<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="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
<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"
media="all">
<!--科技炫酷按钮-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/css/sey.css">
<!-- <link rel="stylesheet" href="./css/style.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" />-->
<!--IE淘汰计划-->
<script>
@@ -42,9 +42,9 @@
<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);" -->
<header id="panel" class="panel-cover"
>
>
<!--星空背景-->
<!-- <canvas id="bg"></canvas>-->
<!-- <canvas id="bg"></canvas>-->
<!--天气-->
<div id="he-plugin-simple"></div>
<script>
@@ -76,26 +76,28 @@
<div class="panel-main__inner panel-inverted">
<div class="panel-main__content">
<div class="ih-item circle effect right_to_left" id="avatar">
<a class="blog-button" >
<div class="img"><img src="https://cdn.jsdelivr.net/gh/listener-He/images@default/202309111525908.jpeg" alt="img"
class="js-avatar iUp profilepic header-logo">
<a class="blog-button">
<div class="img"><img
src="https://cdn.jsdmirror.com/gh/listener-He/images@default/202309111525908.jpeg"
alt="img"
class="js-avatar iUp profilepic header-logo">
</div>
<div class="info iUp">
<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">
</div>
</div>
</a>
</div>
<h1 class="panel-cover__title panel-title iUp">
<!-- <br/>Honesty-->
<!-- <br/>Honesty-->
</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>
<!-- <canvas class="navigation-wrapper iUp" id="canvas" style="width:50%;padding-top:0px;" width="920"-->
<!-- height="350"></canvas>-->
<!-- <script src="https://cdn.jsdelivr.net/gh/listener-He/Home/js/clock.js"></script>-->
<!-- <canvas class="navigation-wrapper iUp" id="canvas" style="width:50%;padding-top:0px;" width="920"-->
<!-- height="350"></canvas>-->
<!-- <script src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/clock.js"></script>-->
<hr class="iUp"/>
<!--一言无法显示时的文字-->
<p id="description" style="margin-top: 10%" class="panel-cover__description iUp">人生天地之间，若白驹之过隙，忽然而已。
@@ -135,7 +137,8 @@
</a>
</li>
<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>
<span class="label">Linkedin</span>
</a>
@@ -149,7 +152,7 @@
<li class="navigation__item">
<a href="javascript:void(0)" class="moments-link"
title="瞬间" target="_blank">
<j class="fab fa-qq"></j>
<j class="fab fa-friend"></j>
<span class="label">瞬间</span>
</a>
</li>
@@ -198,52 +201,72 @@
</p>
</div>
</header>
<!-- 模拟iPhone 16容器 -->
<div class="iphone-simulator">
<div class="browser-view">
<div class="close-btn"></div>
<iframe id="moment-frame" width="100%" height="100%" frameborder="0"></iframe>
<!-- 模拟iPhone 16容器 -->
<div class="iphone-simulator" style="display: none">
<div class="dynamic-island">
<p class="content"></p>
</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.jsdelivr.net/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.jsdelivr.net/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 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 type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/jquery.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.jsdmirror.com/gh/listener-He/Home/js/main.js?version=2"></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.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>
// 百度站点统计
var _hmt = _hmt || [];
(function () {
try {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?ae2a009a75b13c21d5121ee51375ea4e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
} catch (e) {
console.log("百度统计错误", e);
}
var _hmt = _hmt || [];
(function () {
try {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?ae2a009a75b13c21d5121ee51375ea4e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
} catch (e) {
console.log("百度统计错误", e);
}
})();
})();
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DYWDEVKDP0"></script>
<!-- 先定义 gtag 函数作为安全兜底 -->
<script type="text/javascript">
try {
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
function gtag() {
dataLayer.push(arguments);
}
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');
} catch (e) {
console.log("google ga error", e);
console.error("Google Analytics config 失败", e);
}
</script>
<!--<script src="./js/StarrySky.js"></script>-->
<!--<script src="./js/stars.js"></script>-->
</body>

56
js/moments.js
View File

@@ -1,11 +1,41 @@
$(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) {
e.preventDefault(); // 阻止默认跳转
// 获取链接地址
var url = "https://moments.hehouhui.cn";
console.log("当前用户UA-", navigator.userAgent)
// 判断是否是移动端
var isMobile = /iPhone|Android/i.test(navigator.userAgent);
@@ -13,24 +43,38 @@ $(document).ready(function () {
// 移动端：直接跳转
window.location.href = url;
} else {
animateDynamicIsland('正在加载瞬间...');
// PC端：在模拟器中显示
$('#moment-frame').attr('src', url);
$('.iphone-simulator').show();
$('.overlay').show();
openSimulator(url);
}
});
// 关闭按钮点击事件
// 关闭按钮点击事件
$('.close-btn').on('click', function () {
$('.iphone-simulator').hide();
$('.overlay').hide();
$('.iphone-simulator').removeClass('visible');
$('#moment-frame').attr('src', ''); // 清空iframe内容
});
// 遮罩层点击事件
// 遮罩层点击事件 点击空白处关闭模拟器
$('.overlay').on('click', function () {
$(this).hide();
$('.iphone-simulator').hide();
$('.iphone-simulator').removeClass('visible');
$('#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);
}
});
});