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

refactor: 重构网站样式和功能，优化用户体验

Browse Source 
- 删除冗余CSS文件(bj.css, font.css, sey.css, stars-style.css)
- 重构导航栏样式，添加现代化交互效果
- 优化社交图标，使用SVG替代字体图标并添加渐变效果
- 新增关于页面(about.html)及相关资源
- 更新首页(index.html)布局和样式
- 重构星空背景JavaScript(bj.js)，添加错误处理
- 新增关于页面JavaScript功能(about.js)
This commit is contained in:
hehh
2025-08-05 12:16:35 +08:00
parent a5b2ad5478
commit 56bd98a1b9
11 changed files with 2162 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
index.html
View File

@@ -13,25 +13,24 @@
<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=3">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdmirror.com/gh/listener-He/Home/css/iconfont.css">
<link rel="stylesheet" type="text/css" href="./css/style.css?version=3">
<link rel="stylesheet" type="text/css" href="./css/iconfont.css">
<link rel="apple-touch-icon" href="https://blog-file.hehouhui.cn/bj/logo.png">
<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>-->
<script src="https://fastly.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdmirror.com/npm/sweetalert2@10.15.5/dist/sweetalert2.all.min.js"></script>
<!--引入izitoast-->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/izitoast@1.4.0/dist/css/iziToast.min.css">
<link rel="stylesheet" href="https://cdn.jsdmirror.com/npm/izitoast@1.4.0/dist/css/iziToast.min.css">
<script type="text/javascript"
src="https://fastly.jsdelivr.net/npm/izitoast@1.4.0/dist/js/iziToast.min.js"></script>
src="https://cdn.jsdmirror.com/npm/izitoast@1.4.0/dist/js/iziToast.min.js"></script>
<!--引入fontawesome-->
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
media="all">
<!--科技炫酷按钮-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/listener-He/Home/css/sey.css?version=3">
<!-- <link rel="stylesheet" href="./css/style.css" />-->
<!--IE淘汰计划-->
<script>
@@ -41,12 +40,11 @@
<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"
>
<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>
WIDGET = {
"CONFIG": {
@@ -109,7 +107,7 @@
<nav class="cover-navigation cover-navigation--primary">
<ul class="navigation">
<li class="navigation__item">
<a href="https://about.hehouhui.cn/"><span>关于</span><i></i></a>
<a href="https://about.hehouhui.cn/"><span>关于我</span><i></i></a>
</li>
<li class="navigation__item">
<a href="https://blog.hehouhui.cn/"><span>博客</span><i></i></a>
@@ -132,32 +130,98 @@
<div class="social-icons-row">
<div class="social-icon">
<a href="https://github.com/listener-He" title="Github" target="_blank">
<i class="fab fa-github"></i>
<svg width="20" height="20" viewBox="0 0 24 24">
<defs>
<linearGradient id="github-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
</linearGradient>
<linearGradient id="github-gradient-hover" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
<stop offset="50%" style="stop-color:#4ecdc4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#45b7d1;stop-opacity:1" />
</linearGradient>
</defs>
<path fill="url(#github-gradient)" d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
<span class="label">Github</span>
</a>
</div>
<div class="social-icon">
<a href="https://www.linkedin.com/in/honesty861024" title="Linkedin"
target="_blank">
<i class="fab fa-linkedin"></i>
<svg width="20" height="20" viewBox="0 0 24 24">
<defs>
<linearGradient id="linkedin-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
</linearGradient>
<linearGradient id="linkedin-gradient-hover" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
<stop offset="50%" style="stop-color:#4ecdc4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#45b7d1;stop-opacity:1" />
</linearGradient>
</defs>
<path fill="url(#linkedin-gradient)" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
</svg>
<span class="label">Linkedin</span>
</a>
</div>
<div class="social-icon">
<a href="https://twitter.com/Honesty861024" title="Twitter" target="_blank">
<i class="fab fa-twitter"></i>
<svg width="20" height="20" viewBox="0 0 24 24">
<defs>
<linearGradient id="twitter-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
</linearGradient>
<linearGradient id="twitter-gradient-hover" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
<stop offset="50%" style="stop-color:#4ecdc4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#45b7d1;stop-opacity:1" />
</linearGradient>
</defs>
<path fill="url(#twitter-gradient)" d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
</svg>
<span class="label">Twitter</span>
</a>
</div>
<div class="social-icon">
<a onClick="weixin()" title="微信" class="weixin-link">
<i class="fab fa-weixin"></i><span class="label">微信</span>
<svg width="20" height="20" viewBox="0 0 24 24">
<defs>
<linearGradient id="wechat-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
</linearGradient>
<linearGradient id="wechat-gradient-hover" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
<stop offset="50%" style="stop-color:#4ecdc4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#45b7d1;stop-opacity:1" />
</linearGradient>
</defs>
<path fill="url(#wechat-gradient)" d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 01.213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.326.326 0 00.167-.054l1.903-1.114a.864.864 0 01.717-.098 10.16 10.16 0 002.837.403c.276 0 .543-.027.811-.05-.857-2.578.157-4.972 1.932-6.446 1.703-1.415 3.882-1.98 5.853-1.838-.576-3.583-4.196-6.348-8.596-6.348zM5.785 5.991c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.813 0c.642 0 1.162.529 1.162 1.18 0 .659-.52 1.188-1.162 1.188-.642 0-1.162-.529-1.162-1.188 0-.651.52-1.18 1.162-1.18zm5.34 2.867c-1.797-.052-3.746.512-5.28 1.786-1.72 1.428-2.687 3.72-1.78 6.22.942 2.453 3.666 4.229 6.884 4.229.826 0 1.622-.12 2.361-.336a.722.722 0 01.598.082l1.584.926a.272.272 0 00.14.045c.134 0 .24-.111.24-.248 0-.06-.023-.12-.038-.177l-.327-1.233a.582.582 0 01.181-.556c1.52-1.186 2.506-2.952 2.506-4.992 0-3.563-3.359-6.446-7.069-6.446zm-2.496 3.778c.462 0 .837.382.837.853 0 .471-.375.854-.837.854-.462 0-.837-.383-.837-.854 0-.471.375-.853.837-.853zm4.992 0c.462 0 .837.382.837.853 0 .471-.375.854-.837.854-.462 0-.837-.383-.837-.854 0-.471.375-.853.837-.853z"/>
</svg>
<span class="label">微信</span>
</a>
</div>
<div class="social-icon">
<a href="mailto:hehouhui@hehouhui.cn" title="Email">
<i class="fas fa-envelope"></i>
<svg width="20" height="20" viewBox="0 0 24 24">
<defs>
<linearGradient id="email-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
<stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
</linearGradient>
<linearGradient id="email-gradient-hover" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
<stop offset="50%" style="stop-color:#4ecdc4;stop-opacity:1" />
<stop offset="100%" style="stop-color:#45b7d1;stop-opacity:1" />
</linearGradient>
</defs>
<path fill="url(#email-gradient)" d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-20.728c-.904 0-1.636-.732-1.636-1.636v-13.909c0-.904.732-1.636 1.636-1.636h20.728c.904 0 1.636.732 1.636 1.636zm-1.636-1.636h-20.728l10.364 9.545 10.364-9.545zm0 2.909l-10.364 9.545-10.364-9.545v10.999h20.728v-10.999z"/>
</svg>
<span class="label">Email</span>
</a>
</div>
@@ -240,7 +304,7 @@
<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=3"></script>
<script type="text/javascript" src="https://cdn.jsdmirror.com/gh/listener-He/Home/js/bj.js?version=3"></script>
<script type="text/javascript" src="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>