一款色彩绚丽的个人主页源码

源码简介

视觉风格上，网站背景采用了色彩斑斓、富有动感的流体图案，给人一种现代、时尚且富有创意的感觉。这或许暗示网站在设计风格上比较追求个性化和独特性，可能提供多样化的个性化模板或设计工具，帮助用户打造独具特色的个人主页

安装步骤

npm install
npm run dev

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

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

1. intro 首屏
2. main 副屏

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

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

比如：

{
	"head": {
		"title": "pdha.top",
		"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")

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

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

所有的支持项如下：

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

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

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

替换步骤如下:

1. 请选择好你的图标，添加到项目后，把颜色全部调成白色。
2. 点击 Font Class 方式
3. 复制生成的链接中的内容
4. 替换 文件 css/common/icon.scss 中的内容 ，其中 icon 选择器中的内容必须保留。
5. 配置 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;
}

感谢您的来访，获取更多精彩文章请收藏本站。