Skip to content

Commit

Permalink
refactor: Navigation button function can be customized configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
@kaygb
kaygb committed Sep 17, 2022
1 parent 615fb7a commit bd247f7
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 72 deletions.
9 changes: 6 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
# KZHomePage
二次元卡片个人网站主页

详细内容请查看：https://blog.170601.xyz/archives/25.html
二次元卡片个人网站主页

QQ交流群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=-tso4BmPVXPSgqNjPhRCIg4GYZ8Llu_e&jump_from=webapi">962303102</a>
> QQ交流群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=-tso4BmPVXPSgqNjPhRCIg4GYZ8Llu_e&jump_from=webapi">962303102</a>
## 使用文档

<https://blog.170601.xyz/archives/25.html>

## 使用方式

Expand Down
99 changes: 46 additions & 53 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
<!DOCTYPE html>
<html lang="">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 浏览器标签上显示的网站标题 -->
<title>月色真美,风也温柔</title>
<!-- 网站介绍 -->
<meta name="description" content="KZHomePage是一款二次元卡片式个人网站主页模板">
<!-- 网站关键字 -->
<meta name="keywords" content="风也温柔,个人主页,程序员">
<!-- 浏览器标签上显示的图标 -->
<link rel="icon" type="image/ico" href="//sdn.geekzu.org/avatar/4cc893d113dd74ceca73f9863f2c5446/">
<!-- 样式文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css">
<link rel="stylesheet" href="./static/style.css?v=1.1">
<link rel="stylesheet" href="./static/APlayer-1.10.1/dist/APlayer.min.css">

<!-- 自定义设置 -->
<style>
body{
body {
/*背景图片URL 可使用随机图片API */
background-image: url("https://bu.dusays.com/2022/06/04/629b0a2a89425.png");
background-image: url("https://bu.dusays.com/2022/06/04/629b0a2a89425.png");
}

.photo-bg {
/* 卡片左侧图片 */
background-image: url("https://bu.dusays.com/2022/06/04/629b0a2750921.jpg");
Expand All @@ -33,95 +42,79 @@
let music_volume = 0.7; // 默认音量
let music_autoplay = false; // 自动播放
let music_loop = "all"; // 音频循环播放, 可选值: 'all', 'one', 'none' ，分别为全部循环，单曲循环，不循环
// 一言设置


// TODO 一言设置
</script>
<!-- end 自定义设置 -->
</head>

<body>
<div id="main" class="container">
<div class="row my-card justify-content-center">
<div class="col-lg-4 photo-bg"></div>
<div class="col-lg-8 card">
<!-- 大标题 -->
<h1>KZHomePage</h1>
<p>很荣幸您能访问我的网站！ 目前我仍在学习中，每天抽出时间来看书学习，励志成为一个技术很牛的程序员。
<!-- 标题下的一段话 -->
<p>
很荣幸您能访问我的网站！ 目前我仍在学习中，每天抽出时间来看书学习，励志成为一个技术很牛的程序员。
</p>
<p id="hitokoto_text">:D 一言获取中...</p>
<div class="container-fluid">
<div class="row">
<button id="kaygb-blog" class="btn btn-primary col-lg-4">BLOG</button>
<a href="//www.kezez.com" id="kaygb-blog-a" target="_blank" class="btn btn-primary col-lg-4">BLOG</a>
<a href="https://github.com/kaygb/KZHomePage" target="_blank" class="btn btn-secondary col-lg-4">GitHub</a>
<a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected]" target="_blank" id="kaygb-mail-a" class="btn btn-success col-lg-4">Send a Mail</a>
<button id="kaygb-mail" class="btn btn-success col-lg-4">Send a Mail</button>
<!-- 导航按钮组 -->
<button data-href="//www.kezez.com" data-title="Blog" data-window="pop" data-anim="4"
data-area-w="80%" data-area-h="90%" data-shade="false"
class="kz-nav-btn btn btn-primary col-lg-4">Blog</button>

<button data-href="https://github.com/kaygb/KZHomePage" data-title="GitHub" data-window="newtab"
data-anim="4" data-area-w="80%" data-area-h="90%" data-shade="false"
class="kz-nav-btn btn btn-secondary col-lg-4">GitHub</button>

<button data-href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected]"
data-title="Blog" data-window="pop" data-anim="4" data-area-w="80%" data-area-h="90%"
data-shade="false" class="kz-nav-btn btn btn-success col-lg-4">Send a Mail</button>

<!-- end 导航按钮组 -->
</div>
</div>
<!-- <audio muted></audio> -->
<!-- aplayer inner -->
<div id="aplayer-inner" class="aplayer"></div>

<!-- <h4 class="mt-4">or, keep your eyes on</h4> -->
<!-- end aplayer inner -->
<ul class="social mt-1">
<li><a href="https://weibo.com/u/5223004318"><i class="fab fa-weibo " aria-hidden="true"></i></a></li>
<li><a href="https://weibo.com/u/5223004318"><i class="fab fa-weibo " aria-hidden="true"></i></a>
</li>
<li><a href="https://github.com/kaygb"><i class="fab fa-github" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-telegram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="https://www.zhihu.com/people/kaygb/"><i class="fab fa-zhihu" aria-hidden="true"></i></a></li>
<li><a href="https://www.zhihu.com/people/kaygb/"><i class="fab fa-zhihu"
aria-hidden="true"></i></a></li>
</ul>

<!-- <div id="aplayer" class="aplayer" data-order="random" data-id="20173709" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-volume="0.8"></div> -->

<footer>
<p>Copyright 2018 - Now <a href="https://www.170601.xyz/" target="_blank">七六零一</a> <a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备00000000号-1</a>
<p>Copyright 2018 - Now <a href="https://www.170601.xyz/" target="_blank">七六零一</a>
<a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备00000000号-1</a>
<br>Mod by
<a href="https://github.com/kaygb" target="_blank" rel="">kaygb</a>
<a href="https://console.upyun.com/register/?invite=r1FdZxBoH" target="_blank" rel="nofollow"><img src="https://bu.dusays.com/2021/12/15/9991d2344d2ca.png" style="width:50px;"></a>

<a href="https://console.upyun.com/register/?invite=r1FdZxBoH" target="_blank"
rel="nofollow"><img src="https://bu.dusays.com/2021/12/15/9991d2344d2ca.png"
style="width:50px;"></a>
</p>
</p>

</footer>
</div>
</div>

</div>

<!-- aplayer -->
<div id="aplayer-fixed" class="aplayer"></div>
<div id="aplayer-fixed" class="aplayer"></div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="./static/APlayer-1.10.1/dist/APlayer.min.js"></script>
<script src="./static/Meting.min.js"></script>
<!-- end_aplayer -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script defer src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="./static/layer-v3.5.1/layer/layer.js"></script>
<!-- <script src="./static/main.js"></script> -->

<script src="./static/main.js"></script>
<script>
//弹出一个页面层
$('#kaygb-blog').on('click', function() {
layer.open({
type: 2,
title: 'Blog',
shadeClose: true,
anim:4,
closeBtn: 2,
isOutAnim: false,
area: ['80%', '90%'],
content: '//www.kezez.com/'
});
});
$('#kaygb-mail').on('click', function() {
layer.open({
type: 2,
title: 'Blog',
shadeClose: true,
anim:4,
closeBtn: 2,
isOutAnim: false,
area: ['80%', '90%'],
content: '//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&[email protected]'
});
});
</script>

</html>
</html>
53 changes: 37 additions & 16 deletions static/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,51 @@
var windowWidth = $(window).width();
layer.config({
extend: 'kzhomepage/style.css', //加载您的扩展样式
extend: 'kzhomepage/style.css', //加载扩展样式
skin: 'layer-ext-kzhomepage'
});
// layer.open({
// type: 2,
// title: 'Blog',
// shadeClose: true,
// anim:5,
// closeBtn: 2,
// area: ['80%', '90%'],
// content: '//www.kezez.com/'
// });

// Nav buttons
$('.kz-nav-btn').on('click', function() {
let btn = $(this);
let type = btn.data('window') // pop current newtab
let content = btn.data('href')
switch (type) {
case 'pop':
let title = btn.data('title')
let shadeClose = btn.data('shade') === 'true' ? false : true
let anim = btn.data('anim') ? btn.data('anim')*1 : 4
let area_w = btn.data('area-w') ? btn.data('area-w') : '80%'
let area_h = btn.data('area-h') ? btn.data('area-h') : '90%'
layer.open({
type: 2,
title: title,
shadeClose: shadeClose,
anim:anim,
closeBtn: 2,
isOutAnim: false,
area: [area_w, area_h],
content: content
});
break;
case 'current':
window.location = content
break;
case 'newtab':
window.open('_blank').location = content
break;
}
});

console.log(
"\n" +
" %c KZHomePage by kaygb " +
" %c KZHomePage v1.2.0 by kaygb " +
" %c https://blog.170601.xyz/archives/25.html " +
"\n" +
"\n",
"color: #fff; background: #fd79a8; padding:5px 0;",
"background: #FFF; padding:5px 0;"
);
);
// 兼容旧版
if(meting_music_api===""){
meting_api = "https://api.mizore.cn/meting/api.php";
}
Expand All @@ -37,7 +62,6 @@ $.ajax({
},
dataType: "json",
success: function (audio) {

const ap = new APlayer({
container: music_fixed === false ? document.getElementById('aplayer-inner') : document.getElementById('aplayer-fixed') ,
audio: audio,
Expand All @@ -53,9 +77,6 @@ $.ajax({


});
// if(music_autoplay){
// ap.play();
// }
},
});

Expand Down

0 comments on commit bd247f7

Please sign in to comment.