Tomotoes-HomePage

中文版说明

Introduction

一个坏掉的番茄

home page.

Online browsing

Do you want to install such a cool homepage for your website?

Let's start now!

Prerequisites

• Nodejs 6.0 above
• Git available

Install

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

Features

1. Highly encapsulates all the information in the page
2. Use WebGL-Fluid-Simulation as background
3. Use

   scss

   as

   css

   preprocessor
4. Use

   pug

   as

   html

   preprocessor
5. Use

   gulp

   as a build tool and configure the build script
6. Comfortable animation and beautiful UI
7. Responsive, mobile support
8. The referenced

   css

   and

   js

   files do not exceed

   18.5

   kb in total!
9. Delayed response switch page event
10. There are many features left for you to explore...

Structure

According to the characteristics of the project, it is divided into two categories： 1.

intro

main

The corresponding functions, styles and configurations are also based on this standard.

Basic configuration

Each key name in the config.json file

config.json

such as：

{
    "head": {
        "title": "一个坏掉的番茄",
        "description": "Author:SimonMa,Category:Personal Blog",
        "favicon": "favicon.ico"
    }
}

The above configuration information corresponds to the information in the following

layout/head.pug

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

Advanced configuration

WebGL-Fluid-Simulation

Use WebGL-Fluid-Simulation as background at home.

If you want to turn it off, set

intro.background: false

supportAuthor

The

supportAuthor

All support items are as follows：

1. The

   octopus cat

   will be displayed in the upper right corner of the home page.
2. The console prints the author's site information

If you want to turn it off, set

intro.author: false

Icon replacement

Icons in the project, all from 阿里巴巴矢量图标库

The replacement steps are as follows:

1. Please select your icon, add it to the project, and change the color to white.
2. Click Font Class method
3. Copy the contents of the generated link
4. Replace the contents of the file

   /src/css/common/icon.scss

   , where the contents of the

   icon

   selector must be preserved.
5. Config.json the corresponding item in the

   config.json

   file

   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;
}

Deployment

After executing

npm run build

dist

You can then deploy the dist directory to your favorite server hosting provider.

The following is an example of

GithubPage

1. create

   userName.github.io

   Repo

2. cd dist
   git init 
   git add -A
   git commit -am"init"
   git remote add origin https://github.com/userName/userName.github.io.git
   git push -f origin master
   

1. Then set the repo's Github Page option in GitHub.

2. Visit

   username.github.io

   to browse!

If your previous

username. github.io

blog

Then migrate the occupied items to

blog

GithubPage

The repo became a subdirectory of

username. github.io/blog

In this way, your

username. github.io

Sponsor

I spent a lot of time and energy to develop this project.

If this project has brought you help, welcome to sponsor,

star

Thank you!

License

The Project is released under the

LGPL-3.0