🎃一个坏掉的番茄个人主页~
一个坏掉的番茄home page.
Do you want to install such a cool homepage for your website?
Let's start now!
git clone https://github.com/Tomotoes/HomePage.git cd HomePage npm install npm run dev
scssas
csspreprocessor
pugas
htmlpreprocessor
gulpas a build tool and configure the build script
cssand
jsfiles do not exceed
18.5kb in total!
According to the characteristics of the project, it is divided into two categories: 1.
introFirst screen 2.
mainSecondary screen
The corresponding functions, styles and configurations are also based on this standard.
Each key name in the config.json file
config.jsoncorresponds to the corresponding component name.
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.pugcomponent.
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")
Use WebGL-Fluid-Simulation as background at home.
If you want to turn it off, set
intro.background: false.
The
supportAuthoroption is turned on by default for configuration information, that is, authors are supported.
All support items are as follows:
octopus catwill be displayed in the upper right corner of the home page.
If you want to turn it off, set
intro.author: false.
Icons in the project, all from 阿里巴巴矢量图标库
The replacement steps are as follows:
/src/css/common/icon.scss, where the contents of the
iconselector must be preserved.
config.jsonfile
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; }
After executing
npm run buildunder the root directory, the project file will be generated to the
distdirectory.
You can then deploy the dist directory to your favorite server hosting provider.
The following is an example of
GithubPage:
create
userName.github.ioRepo
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
Then set the repo's Github Page option in GitHub.
Visit
username.github.ioto browse!
If your previous
username. github.iorepo already has content, you can create another repo, such as
blog.
Then migrate the occupied items to
blogand set the
GithubPageoption for this repo.
The repo became a subdirectory of
username. github.io/blog.
In this way, your
username. github.iorepo can be left to the home page!
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!
The Project is released under the
LGPL-3.0license.