您好,您要的主页到了,请查收。

前言

emm 💤 ,很难记清这是第几次,一个坏掉的番茄主页 被人脱裤了。

既然,有这么多人喜欢这个页面,那我索性开源好了 😄 ~

所以,我忙了一天,把整个主页项目,完完整整的重构了一遍!

去掉了 jQuery ,去掉无用的动画,增加了Sass 等等等……

在长达数个小时的奋战之后,一份热乎乎的开源主页终于诞生了!

screenshot
screenshot

正文

下面是 README.md 的完整摘抄~

实在没啥可写的了,(逃…

必备条件

  • Nodejs 6.0 以上
  • Git 可用

安装步骤

1
2
3
4
git clone https://github.com/Tomotoes/HomePage.git
cd HomePage
npm install
npm run dev

功能特性

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

项目结构

根据项目特点,一共分为两大类 :

  1. intro 首屏
  2. main 副屏

相应的函数,样式,配置也是根据此标准来的。

自定义配置

基本配置

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

比如:

1
2
3
4
5
6
7
{
"head": {
"title": "一个坏掉的番茄",
"description": "Author:SimonMa,Category:Personal Blog",
"favicon": "favicon.ico"
}
}

上面的配置信息就对应着下面 layout/head.pug 组件中的信息。

1
2
3
4
5
head
title #{head.title}
meta(charset="utf-8")
meta(name="Description" content=`${head.description}`)
link(rel="icon" href=`${head.favicon}` type="image/x-icon")

高级配置

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

所有的支持项如下:

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

你可以设置其值为 false 来关闭这一行为。

图标的替换

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

替换步骤如下:

  1. 请选择好你的图标,添加到项目后,把颜色全部调成白色。
  2. 点击 Font Class 方式
  3. 复制生成的链接中的内容
  4. 替换 文件 css/common/icon.scss 中的内容 ,其中 icon 选择器中的内容必须保留。
  5. 配置 config.json 文件中的相应项 main.ul.*.icon
1
2
3
4
5
6
7
8
9
10
11
12
.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 举例:

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

  2. 1
    2
    3
    4
    5
    6
    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
  3. 然后在Github设置好仓库的GithubPage 选项

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

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

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

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

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

赞助

开发一个优秀的项目,离不开大量时间和精力的投入。

如果此项目给你带来了帮助,欢迎赞助,star

谢谢!

协议

此项目基于 LGPL-3.0 协议。

结束语

完结,撒花!🌼

转载本站文章请注明作者和出处 一个坏掉的番茄,请勿用于任何商业用途。