jazzqi/landing_page.md

## landing_page.md

      
    Raw
  

              landing_page.md
            
          
    Landing Page架构

hexo static blog generator

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

自定义 layout
可配置化 site data，page data
EJS模板引擎支持

WebPack 介绍

WebPack是一个模块打包的工具，它的作用是把互相依赖的模块处理成静态资源。

优点：

打包整合
能满足网络请求的异步需求
能同步加载多个模块
把依赖树按需分割
可以同步、异步加载，把初始加载时间控制在较低的水平
每个静态资源都应该能成为一个模块(AMD, CommonJS, ECMA Module, image, css, sass, template等)
能适用于大型项目

缺点：

代码复杂度上升，调试困难
文档不全（查看文章资料和选择plugin时需要注意WebPack版本，文中使用的是WebPack 2.1）

WebPack配置文件 - webpack.config.js

entry

WebPack处理的入口文件，包含运行时和一系列模块。如果一个入口块包含了module_a，那么运行时将会执行这个模块，如果没包含，那么将会等待包含了module_a的模块，然后执行。
resolve

文件路径的指向。
output

配置输出路径
module.loaders

配置
plugins

WebPack Loader 插件

bootstrap-loader, bootstrap-sass

.bootstraprc
url-loader, resolve-url-loader

抽取静态asset，如font/images。
通过limit=1000参数，小于1k的文件内联，大文件单独分离。
style-loader, css-loader, sass-loader, sass-resources-loader, node-sass

处理css, sass文件。
postcss-loader

配置autoprefix。
babel-loader

Shim codes in ES6/ES5 standard
WebPack Plugins 插件

extract-text-webpack-plugin

从entry chunk中抽取内联style到CSS文件。可在html head中单独引用，便于优化性能。
CommonsChunkPlugin(Webpack bundled)

合并entry中的多个module到同一个文件。
DedupePlugin

处理交叉依赖，避免重复引用。有些JS库有自己的依赖树，并且这些库可能有交叉的依赖，DedupePlugin可以找出他们并删除重复的依赖。
UglifyJsPlugin

JavaScript代码压缩混淆。
NoErrorsPlugin

运行报错时不退出WebPack进程。
ProvidePlugin

Expose jQuery and $ to global.
before:
var = require('jquery');

$('#something').toggleClass('class');

after:
require('jquery');

$('#something').toggleClass('class');

环境配置

node --version # Prefered version: 6.5.0

可以使用nvm，同时安装多版本node。
npm i -g hexo-cli # 全局安装 hexo
npm i -g webpack # 全局安装 WebPack

npm i # 安装依赖package
SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm i # For GFWed area

npm run dev # 生成development版静态页面
npm run prod # 生成production版静态页面

webpack （--watch） # WebPack打包资源到dist/
hexo clean # 清理hexo生成的页面
hexo generate （--watch） # hexo生成页面 

node preview # 启动预览Server, http://localhost:4000/

项目结构

root目录，Hexo相关结构

├── _config.yml	# Hexo 配置文件
├── webpack.config.js # WebPack 配置文件
├── .bootstraprc # bootstrap-loader 配置文件（启用extractStyles, 拼接style.scss）
├── node_modules
│   └── ...
├── package.json 
├── preview.js 	# node preview，启动预览
├── public 		# hexo generate 产生的静态页面
│   ├── about.html
│   ├── css/
│   ├── dist/
│   ├── entrepreneur/
│   ├── favicon_128.ico
│   ├── favicon_16.ico
│   ├── favicon_32.ico
│   ├── favicon_64.ico
│   ├── images/
│   ├── index.html
│   ├── investor/
│   └── js/
├── scaffolds	# hexo scaffolds 暂未用到
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source # 
│   ├── _data/ # json数据
│   │   ├── footer.json
│   │   └── ...
│   ├── about.md # 配置页面title，layout和entry script
│   ├── index.md
│   ├── entrepreneur/
│   └── investor/
└── themes
    └── alpha # Hexo 主题

/themes/alpha 目录，Hexo主题，WebPack

themes/alpha
├── Gruntfile.js
├── LICENSE
├── README.md
├── _config.yml
├── package.json
├── layout	# 定义 Hexo theme layout
│   ├── _about.ejs
│   ├── _entrepreneur
│   │   ├── ares.ejs
│   │   ├── fa.ejs
│   │   └── smart_fa.ejs
│   ├── _index.ejs
│   ├── _investor
│   │   ├── activity.ejs
│   │   ├── platform.ejs
│   │   └── quadrant.ejs
│   ├── _partial # partials
│   │   ├── after-footer.ejs
│   │   ├── footer.ejs
│   │   ├── head.ejs
│   │   ├── header.ejs
│   │   └── mobile-nav.ejs
│   ├── index.ejs
│   └── layout.ejs	# HTML layout
└── source
    ├── favicon_128.ico
    ├── ...
    ├── css/
    │   ├── style.scss # css文件夹中的stylesheet会bundle到这个style.css中，然后append到Bootstrap stylesheet。
    │   ├── _about.scss
    │   ├── ...
    │   ├── partial/
    │   │   ├── _footer.scss
    │   │   ├── _header.scss
    │   │   ├── _logo.scss
    │   │   └── _shared.scss
    │   └── util/
    │       ├── _common.scss
    │       ├── _mixins.scss
    │       ├── _override.scss
    │       ├── _variables.scss
    │       └── bourbon/
    │           └── ...
    ├── js/
    │   ├── about.js
    │   ├── vendor.js
    │   ├── app.js
    │   └── ...
    ├── dist # WebPack 编译结果
    │   ├── assets
    │   │   ├── 1dc35d25e61d819a9c357074014867ab.ttf # url-loader 抽取出的静态文件 
    │   │   └── ...
    │   ├── css
    │   │   └── bundle.css # 从vendor中抽取的stylesheet bundle（bootstrap, css/, fontawesome, slick, slick-theme ）
    │   └── js
    │       ├── about.js # 各页面入口文件，require(vendor)
    │       ├── index.js
    │       └── ...
    │       └── vendor.js # vendor
    └── images
        └── ...