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

源码简介

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

安装步骤

npm install
npm run dev
npm install
npm run dev
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"
  }
}
{
  "head": {
    "title": "pdha.top",
    "description": "Author:SimonMa,Category:Personal Blog",
    "favicon": "favicon.ico"
  }
}
{
	"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")
head
  title #{head.title}
  meta(charset="utf-8")
  meta(name="Description" content=`${head.description}`)
  link(rel="icon" href=`${head.favicon}` type="image/x-icon")
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;
}
.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;
}
.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;
}

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