演示地址
嗯哼,你想为网站装上如此酷炫的主页吗?
下面就让我们开始吧!
git clone https://github.com/Tomotoes/HomePage.git
cd HomePage
npm install
npm run dev
scss
作为css
预处理器pug
作为html
预处理器gulp
作为构建工具, 并以配置好构建脚本UI
css
与js
文件总共超不过18.5
kb!根据项目特点,一共分为两大类 :
intro
首屏main
副屏相应的函数,样式,配置也是根据此标准来的。
配置文件 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作为背景。
如需关闭,请设置 intro.background: false
。
配置信息默认开启了 supportAuthor
选项,即支持作者。
所有的支持项如下:
章鱼猫
如需关闭,请设置 intro.supportAuthor: false
。
项目中的图标,全部来自 阿里巴巴矢量图标库
替换步骤如下:
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
仓库便可留给首页了!
百度云下载 提取码:u5wu
Github下载
版权属于:Cyril 本文链接:https://www.cyrilstudio.top/archives/545/ 转载时须注明出处及本声明