HomePage – 一个炫酷的主页引导页导航源代码

源码简介

嗯哼,你想为网站装上如此酷炫的主页吗?

在线演示:Demo

功能特性

  • 高度封装了页面中的所有的信息
  • 使用 WebGL-Fluid-Simulation 作为背景
  • 使用 scss 作为 css 预处理器
  • 使用 pug 作为 html 预处理器
  • 使用 gulp 作为构建工具, 并以配置好构建脚本
  • 令人舒服的动画 , 以及漂亮的 UI
  • 响应式,无缝支持移动端
  • 所引用的 css 与 js 文件总共超不过 18.5 kb!
  • 延迟响应切换页面事件
  • 根据时间动态设置背景
  • 还有很多特性留给你探索…

配置环境

Nodejs 6.0 以上

Git 可用

安装教程

git clone https://github.com/Tomotoes/HomePage.git
cd HomePage
npm install
npm run dev

基本配置

配置文件 config.json 中的每一项键名 , 都与相应的组件名所对应。

比如:

{
    "head": {
        "title": "一个坏掉的番茄",
        "description": "Author:SimonMa,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")

高级配置

WebGL-Fluid-Simulation

首页使用WebGL-Fluid-Simulation作为背景。

如需关闭,请设置intro.background: false。

supportAuthor

配置信息默认开启了 supportAuthor 选项,即支持作者。

所有的支持项如下:

  • 会在首页右上角显示 章鱼猫
  • 控制台会打印作者的站点信息

如需关闭,请设置intro.supportAuthor: false。

图标的替换

项目中的图标,全部来自 阿里巴巴矢量图标库

替换步骤如下:

  • 请选择好你的图标,添加到项目后,把颜色全部调成白色。
  • 点击 Font Class 方式
  • 复制生成的链接中的内容
  • 替换 文件 css/common/icon.scss 中的内容 ,其中 icon 选择器中的内容必须保留。
  • 配置 config.json 文件中的相应项 main.ul.*.icon
    .icon {
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: 0 auto;
    fill: currentColor;
    font-family: 'iconfont' !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

项目部署

在根目录下执行npm run build 后,会将项目文件生成到 dist 目录。

然后,你可以将dist目录部署到你喜欢的服务器托管商。

下面以GithubPage 举例:

新建 你的用户名.github.io 仓库

cd dist
git init 
git add -A
git commit -am"init"
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git
git push -f origin master

然后在Github设置好仓库的GithubPage 选项

访问 你的用户名.github.io 即可浏览啦!

假如你之前的用户名.github.io仓库已经有内容了,可以新建另一个的仓库,比如blog。

再将所占用项目迁移到blog,并设置好这个仓库的GithubPage 选项。

而这个仓库即成为了一个子目录用户名.github.io/blog。

如此一来,你的用户名.github.io仓库便可留给首页了!

效果预览

file

file

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇