iKun主页2.1修复版上线!无需数据库即可搭建个人网站,集成页面背景音乐功能,模块化文件结构(含home.php/zuopin.php等核心页)。优化底部按钮交互逻辑,修复JS缺失问题,支持作品弹窗展示、友情链接管理。轻量级静态页面方案,适合快速部署个人作品集或兴趣站点,附详细配置教程。
iKun主页 2.1修复版 资源结构说明(排版优化版)
▌核心文件目录结构
网站根目录/ ├─ ikunpage/ │ ├─ script/ # 脚本目录 │ │ └─ navtab.js # 导航栏配置文件 │ └─ zuopin/ # 作品弹窗资源目录 ├─ home.php # 主页内容配置 ├─ zuopin.php # 作品列表页 ├─ zuopin-tanchuang.php# 作品弹窗逻辑 └─ links.php # 友情链接配置
▌功能模块详解
- 导航系统配置
- 文件:
ikunpage/script/navtab.js
- 作用:定义网站顶部导航栏的菜单项、链接及交互逻辑
- 配置内容示例:
// 示例代码片段 const navItems = [ { title: '首页', link: '/home.php' }, { title: '作品展示', link: '/zuopin.php' }, { title: '友情链接', link: '/links.php' } ];
- 文件:
- 主页内容管理
- 文件:
home.php
- 功能:配置网站首页的版块布局、文字内容及多媒体元素
- 特色:集成页面背景音乐播放功能(需检查音频文件路径)
- 文件:
- 作品展示系统
- 主入口:
zuopin.php
- 展示作品缩略图列表
- 点击触发弹窗逻辑
- 弹窗模块:
zuopin-tanchuang.php
- 控制弹窗的显示/隐藏
- 加载弹窗内容模板
- 资源目录:
ikunpage/zuopin/
- 存放作品详情页的HTML片段或图片资源
- 主入口:
- 友情链接管理
- 文件:
links.php
- 功能:配置合作伙伴链接的显示顺序和样式
- 配置格式:
'示例网站', 'url' => 'https://example.com'], // 更多链接... ]; ?-->
- 文件:
▌常见问题解决
Q:底部按钮无响应怎么办?
A:按以下步骤排查:
- 重新下载完整源码包(首次发布可能遗漏JS文件)
- 检查浏览器控制台是否有404错误
- 确认
navtab.js
文件路径正确引入 - 验证按钮元素是否绑定正确的事件监听器
Q:如何修改导航菜单顺序?
A:直接编辑navtab.js
中的数组顺序,保持JSON格式有效性
Q:作品弹窗不显示内容?
A:检查:
zuopin-tanchuang.php
文件是否存在- 弹窗目录
ikunpage/zuopin/
下是否有内容文件 - 缩略图链接地址是否正确
▌部署建议
- 推荐使用PHP 7.4+环境运行
- 音乐文件建议使用MP3格式并放置在
ikunpage/audio/
目录 - 修改配置文件前建议备份原始版本
- 移动端适配需额外检查CSS媒体查询
注:本版本为轻量级实现,未集成数据库功能,所有内容通过静态文件管理,适合个人展示类站点快速部署。