一个美观易用的个人主页模板，拥有流体动画背景、响应式设计和丝滑的页面过渡效果，支持通过简单的配置文件自定义页面内容与样式，轻松打造自己的个性化主页。
功能特性
- 高度封装了页面中的所有的信息
- 使用 WebGL-Fluid-Simulation 作为背景
- 使用 less 作为 css 预处理器
- 使用 pug 作为 html 预处理器
- 使用 gulp 作为构建工具, 并以配置好构建脚本
- 令人舒服的动画 , 以及漂亮的 UI
- 响应式，无缝支持移动端
- 所引用的 css 与 js 文件总共超不过 18.5 kb!
- 延迟响应切换页面事件
- 还有很多特性留给你探索...
安装步骤
git clone https://github.com/SimonAKing/HomePage.git
cd HomePage
npm install
npm run dev
项目结构
根据项目特点,一共分为两大类 ：
- intro 首屏
- main 副屏
相应的函数，样式，配置也是根据此标准来的。
基本配置
配置文件 config.json 中的每一项键名 , 都与相应的组件名所对应。
比如：
{
"head": {
"title": "SimonAKing",
"description": "Category:Personal Blog",
"favicon": "favicon.ico"
}
}
上面的配置信息就对应着下面 layout/head.pug 组件中的信息。
head
title #{head.title}
meta(charset="utf-8")
meta(name="Description" content=`${head.description}`)
link(rel="icon" href=`${head.favicon}` type="image/x-icon")
仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！
链接: https://web.fly63.com/nav/4863
