diff --git a/.gitignore b/.gitignore
index 8946708..d78f983 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,5 @@
/psd
-.idea
\ No newline at end of file
+.idea
+/pad
+/*.sublime-project
+/*.sublime-workspace
diff --git a/README.md b/README.md
index b2da75b..94f5ca8 100644
--- a/README.md
+++ b/README.md
@@ -6,13 +6,13 @@ MIX，Mobile In X的缩写。意为，在无线终端领域的各种解决方案
### gitpower(内网)
-[HOME](http://mixteam.git.assets.m.etao.net/mixdoc/index.html)
+[HOME](http://mixteam.git.assets.m.etao.net/mixdoc/)
### github(外网)
[HOME](http://mixteam.github.com/mixdoc/)
-## 文档规范
+## 文档编写规范
* 在pages下，选择文档内容对应的项目子目录，目前分别有platform，js，css，tools，test，repo，git。
* 每个子目录下，有一个category.md，用于展示右侧的文档条目，采用列表的语法书写。最多缩进一级。
@@ -30,6 +30,9 @@ MIX，Mobile In X的缩写。意为，在无线终端领域的各种解决方案
* 在子目录下建立对应的目录和文件，例如：`brief/summary.md`。
* 普通文档只有一个一级标题，用一个`#`标注。可以有多个二级和三级标题。二级和三级标题会被自动认为是本文档的目录索引。如果需要四级标题，请使用`**四级标题**`着重语法来表示。
* API文档只有一个一级标题，用一个`#`标注。二级标题为API的种类，比如JS中为`方法`、`事件`、`属性`，CSS中为`变量`、`函数`、`类名`。三级标题为具体的方法名或属性名等等。对于JS的方法名，必须用列表语法来书写符合[JSDoc](https://code.google.com/p/jsdoc-toolkit/w/list)的文档注释。
+* 引用图片请用相对md文件的路径，或者绝对路径。
+* 所有`[link](#)`形式的链接中的`href`都会被替换成`javascript:void(0)`。
+* 所有二级和三级标题，如果要手动设置锚点名称（默认为按照数字递增），请加上锚点链接，例如`## [Test](#test)`。
**JS 举例**
diff --git a/assets/css/site.css b/assets/css/site.css
index 893fd87..ea5efdd 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -856,10 +856,8 @@ section.content article h2+h2{margin:0 0 0.5em;}
section.content article h3{font-size:1.3em;line-height:1.1282em;margin:2.2em 0 0.5em;}
section.content article h3+h3{margin:0 0 0.5em;}
section.content article h2,section.content article h3,section.content article h4{position:relative;padding-right:40px;}
-section.content article h1 span,section.content article h2 span,section.content article h3 span,section.content article h4 span{font-size:25px;position:absolute;display:block;top:0;right:0;opacity:0.3;}
-section.content article h1 span:hover,section.content article h2 span:hover,section.content article h3 span:hover,section.content article h4 span:hover{opacity:1;}
-section.content article h1 span a,section.content article h2 span a,section.content article h3 span a,section.content article h4 span a{font-size:0.8em;color:#000;text-decoration:none;font-weight:bold;}
-section.content article h1 span a.top,section.content article h2 span a.top,section.content article h3 span a.top,section.content article h4 span a.top{cursor:pointer;font-size:12px;}
+section.content article h1 a.top,section.content article h2 a.top,section.content article h3 a.top,section.content article h4 a.top{position:absolute;display:block;top:0;right:0;cursor:pointer;font-size:12px;color:#CCC;text-decoration:none;font-weight:bold;}
+section.content article h1 a.top:hover,section.content article h2 a.top:hover,section.content article h3 a.top:hover,section.content article h4 a.top:hover{color:#666;}
section.content article h5{font-size:1.125em;line-height:1.4em;}
section.content article h6{font-size:1em;line-height:1.4667em;}
section.content article pre,section.content article tt,section.content article code{font-size:14px;line-height:1.5438em;margin:0;padding:0;}
@@ -899,7 +897,7 @@ section.category .categroup>li.active>a b.caret{border-top:0px;border-bottom:4px
section.category .categroup>li.active .catelist{height:auto;}
section.category li.active>a.link{background-color:#CECECE;color:#656565;}
section.content{width:100%;border-left:200px solid #dfdfdf;box-sizing:border-box;}section.content article{padding:0 30px 30px;}
-section.dropdown{position:fixed;width:60px;height:28px;box-sizing:border-box;background-color:#FFF;border:1px solid #DDD;right:30px;top:115px;}section.dropdown>a{width:100%;padding:0 5px;box-sizing:border-box;height:28px;line-height:28px;display:block;font-size:14px;}section.dropdown>a>b.caret{float:right;margin-top:12px;border-top:4px solid #555;}
+section.dropdown{position:fixed;width:60px;height:28px;box-sizing:border-box;background-color:#FFF;border:1px solid #DDD;right:30px;top:115px;z-index:9;}section.dropdown>a{width:100%;padding:0 5px;box-sizing:border-box;height:28px;line-height:28px;display:block;font-size:14px;}section.dropdown>a>b.caret{float:right;margin-top:12px;border-top:4px solid #555;}
section.dropdown>a:hover{text-decoration:none;}
section.dropdown.open{height:auto;border-bottom-color:#FFF;}section.dropdown.open>a>b.caret{border-top:0px;border-bottom:4px solid #555;}
section.dropdown .dropdown-menu{border-color:#DDD;-webkit-border-radius:0px;-webkit-box-shadow:none;margin:0;}section.dropdown .dropdown-menu.pull-right{right:-1px;}
diff --git a/assets/js/content.js b/assets/js/content.js
index db29a03..3d16268 100644
--- a/assets/js/content.js
+++ b/assets/js/content.js
@@ -15,18 +15,35 @@
return s.split(PATH_REGEX);
}
- $.getHtml = function(url, success) {
+ $.getHtml = function(url, callback, parseHandler, successHandler) {
+
url = url + (hasMarked ? '.md' : '.html');
+ if (arguments.length === 3){
+ successHandler = arguments[2];
+ parseHandler = null;
+ }
+
$.ajax({
url : url,
type : 'GET',
success : function(text) {
if (hasMarked){
- success(marked(text))
+ var lexer, parsed;
+
+ if (parseHandler) {
+ lexer = marked.lexer(text);
+ parsed = marked.parser(parseHandler(lexer));
+ } else {
+ parsed = marked(text);
+ }
+
+ successHandler(parsed);
} else {
- success(text);
+ successHandler(text);
}
+
+ callback && callback();
},
error : function() {
alert('加载失败');
@@ -56,138 +73,188 @@
}
function loadCategory(callback) {
+ var url = $.joinPath(basePath, 'category')
+ ;
+
+ $.getHtml(url, callback, loadedCategory);
+ }
+
+ function loadedCategory(html) {
var name = hashParam.name,
page = hashParam.page,
- section = hashParam.section,
- url = $.joinPath(basePath, 'category')
+ dom = $(html),
+ topLis = dom.children('li')
;
- $.getHtml(url, function(html) {
- var dom = $(html),
- topLis = dom.children('li')
+ Object.each(topLis, function(el) {
+ var topLi = $(el),
+ link = topLi.children('a'),
+ linkHref = link.attr('href').replace(/\.\w+$/, ''),
+ subUl = topLi.children('ul'),
+ subLis = subUl.children('li')
;
- Object.each(topLis, function(el) {
- var topLi = $(el),
- link = topLi.children('a'),
- linkHref = link.attr('href').replace(/\.\w+$/, ''),
- subUl = topLi.children('ul'),
- subLis = subUl.children('li')
- ;
-
- if ((!linkHref || linkHref === '#') && subUl.length) {
- link.attr('href', 'javascript:void(0)')
- .addClass('toggle')
- .append('');
+ if ((!linkHref || linkHref === '#') && subUl.length) {
+ link.attr('href', 'javascript:void(0)')
+ .addClass('toggle')
+ .append('');
- subUl.attr('class', 'nav nav-pills nav-stacked catelist');
+ subUl.attr('class', 'nav nav-pills nav-stacked catelist');
- Object.each(subLis, function(el) {
- var subLi = $(el),
- subLink = subLi.children('a'),
- subLinkHref = subLink.attr('href').replace(/\.\w+$/, '')
- ;
-
- subLink.attr('href', '#' + name + '/' + subLinkHref)
- .addClass('link');
+ Object.each(subLis, function(el) {
+ var subLi = $(el),
+ subLink = subLi.children('a'),
+ subLinkHref = subLink.attr('href').replace(/\.\w+$/, '')
+ ;
- if (!page || page === '/' || subLinkHref === page) {
- page = hashParam.page = subLinkHref;
- subLi.addClass('active');
- topLi.addClass('active');
- }
- });
- } else {
- link.attr('href', '#' + name + '/' + linkHref)
+ subLink.attr('href', '#' + name + '/' + subLinkHref)
.addClass('link');
-
- if (!page || page === '/' || linkHref === page) {
- page = hashParam.page = linkHref;
+
+ if (!page || page === '/' || subLinkHref === page) {
+ page = hashParam.page = subLinkHref;
+ subLi.addClass('active');
topLi.addClass('active');
}
+ });
+ } else {
+ link.attr('href', '#' + name + '/' + linkHref)
+ .addClass('link');
+
+ if (!page || page === '/' || linkHref === page) {
+ page = hashParam.page = linkHref;
+ topLi.addClass('active');
}
- });
-
- cateUl.html(dom[0].innerHTML);
- dom = null;
-
- callback && callback();
+ }
});
+
+ cateUl.html(dom[0].innerHTML);
+ dom = null;
}
function loadContent(callback) {
- var name = hashParam.name,
- page = hashParam.page,
- section = hashParam.section,
+ var page = hashParam.page,
url = $.joinPath(basePath, page)
;
if (page === '#') return;
- $.getHtml(url, function(html) {
- var dom = $('' + html + '
'),
- hEls = dom.find('h2, h3'),
- menu = $('')
- ;
+ $.getHtml(url, callback, parseContent, loadedContent);
+ }
- // fix href = "#"
- dom.find('a[href="#"]').each(function() {
- $(this).attr('href', 'javascript:void(0)');
- });
+ function parseContent(lexer) {
+ var name = hashParam.name,
+ page = hashParam.page,
+ baseId = name + '/' + page + '/',
+ imgReg = /^\!\[(.*?)\]\((.*?)\)/,
+ linkReg = /\[(.*?)\]\((.*?)\)/g,
+ headerMenu = []
+ ;
- // fix href= "http://xxxx"
- dom.find('a[href^="http"]').each(function() {
- $(this).attr('target', '_blank');
- });
+ Object.each(lexer, function(tok) {
+ var type = tok.type,
+ depth = tok.depth,
+ text = tok.text
+ ;
- // fix img
- dom.find('img').each(function() {
- var el = this,
- img = $(el),
- figure = $('![]()
')
- ;
+ linkReg.lastIndex = 0;
- figure.find('img')
- .attr({
- src : $.joinPath(basePath, page, '..', img.attr('src')),
- alt : img.attr('alt')
- });
+ switch (type) {
+ case 'heading':
+ var matches,
+ title, id
+ ;
+
+ if (depth === 2 || depth === 3) {
+ if (!(matches = linkReg.exec(text))) {
+ title = text;
+ id = baseId + headerMenu.length;
+ text = '[' + text + '](' + headerMenu.length + ')';
+ } else {
+ title = matches[1];
+ id = matches[2].replace('#', baseId);
+ }
- figure.find('figcaption')
- .text(img.attr('alt'));
+ text = title + 'TOP';
- img.replaceWith(figure);
- });
+ headerMenu.push('' + title + '');
+ }
- Object.each(hEls, function(el, idx) {
- var header = $(el),
- title = header.text(),
- menuLi = $(''),
- id = name + '/' + page + '/' + idx
- ;
+ break;
+ case 'paragraph':
+ var matches,
+ imgAlt, imgSrc,
+ link, linkTitle, linkHref
+ ;
- header.append('TOP')
+ // fix img
+ if ((matches = text.match(imgReg))) {
+ imgAlt = matches[1];
+ imgSrc = $.joinPath(basePath, page, '..', matches[2]);
+
+ type = 'html';
+ text = [
+ '',
+ '
',
+ '' + imgAlt + '',
+ ''
+ ].join('');
+ }
- menuLi.find('a').text(title)
- .attr('href', '#' + id);
+ // fix link
+ while ((matches = linkReg.exec(text))) {
+ link = matches[0];
+ linkTitle = matches[1];
+ linkHref = matches[2];
+
+ if (linkHref.indexOf('http') === 0) {
+ text = text.replace(link, '' + linkTitle + '');
+ } else {
+ if (linkHref === '#') {
+ linkHref = 'javascript:void(0)';
+ } else if (linkHref.indexOf('#') === 0) {
+ linkHref = linkHref.replace('#', '#' + baseId);
+ }
+ text = text.replace(link, '[' + linkTitle + '](' + linkHref + ')');
+ }
+ }
- if (el.tagName.toLowerCase() === 'h2') {
- menuLi.addClass('level0');
- } else {
- menuLi.addClass('level1');
- }
+ break;
+ }
- menu.append(menuLi);
- });
- articleEl.html(dom[0].innerHTML);
- dom = null;
+ tok.type = type;
+ tok.text = text;
- dropdownUl.html(menu[0].innerHTML);
- menu = null;
+ });
- callback && callback();
+ lexer.splice(1, 0, {
+ type : 'html',
+ text : [
+ ''
+ ].join('')
});
+
+ return lexer;
+ }
+
+ function loadedContent(html) {
+ var name = hashParam.name,
+ page = hashParam.page,
+ baseId = name + '/' + page + '/',
+ dom = $('' + html + '
')
+ ;
+
+ // // use new window to open
+ // dom.find('a[href^="http"]').each(function() {
+ // $(this).attr('target', '_blank');
+ // });
+
+ articleEl.html(html);
}
function bindEvents() {
@@ -234,24 +301,6 @@
articleEl.on('click', 'a.top', function(e) {
win.scrollTo(0, 0);
});
-
- dropdownUl.on('mousemove', function(e) {
- dropdownUl.attr('open', 'true');
- }).on('mouseout', function(e) {
- dropdownUl.attr('open', 'false');
-
- winEl.one('scroll', function() {
- if (dropdownUl.attr('open') !== 'true') {
- dropdownUl.parent().removeClass('open');
- }
- });
- }).prev('a').on('click', function(e) {
- var el = this,
- anchor = $(el)
- ;
- anchor.parent().toggleClass('open');
- });
-
}
function init() {
@@ -280,16 +329,38 @@
loadCategory(function() {
loadContent(function() {
+ var path = $.joinPath(name, page, section)
+ ;
+
articleEl.find('a.top').each(function() {
var el = this,
anchor = $(el),
id = anchor.attr('id')
;
- if (id === $.joinPath(name, page, section)) {
+ if (id === path) {
win.scrollTo(0, anchor.offset().top);
}
});
+
+ dropdownUl = $('section.dropdown ul.dropdown-menu');
+
+ dropdownUl.on('mousemove', function(e) {
+ dropdownUl.attr('open', 'true');
+ }).on('mouseout', function(e) {
+ dropdownUl.attr('open', 'false');
+
+ winEl.one('scroll', function() {
+ if (dropdownUl.attr('open') !== 'true') {
+ dropdownUl.parent().removeClass('open');
+ }
+ });
+ }).prev('a').on('click', function(e) {
+ var el = this,
+ anchor = $(el)
+ ;
+ anchor.parent().toggleClass('open');
+ });
});
});
}
@@ -299,7 +370,6 @@
logoUl = $('section.category .logo');
cateUl = $('section.category ul.categroup');
articleEl = $('section.content article');
- dropdownUl = $('section.dropdown ul.dropdown-menu');
init();
bindEvents();
diff --git a/assets/less/marked.less b/assets/less/marked.less
index 793e999..5d30f80 100644
--- a/assets/less/marked.less
+++ b/assets/less/marked.less
@@ -97,30 +97,21 @@ section.content article {
padding-right: 40px;
}
- h1 span, h2 span, h3 span, h4 span {
- font-size: 25px;
+ h1 a.top, h2 a.top, h3 a.top, h4 a.top {
+ // display: none;
position: absolute;
display: block;
top: 0;
right: 0;
- opacity: 0.3;
- }
-
- h1 span:hover, h2 span:hover, h3 span:hover, h4 span:hover {
- opacity: 1;
- }
-
- h1 span a, h2 span a, h3 span a, h4 span a {
- font-size: 0.8em;
- color: #000;
+ cursor: pointer;
+ font-size: 12px;
+ color: #CCC;
text-decoration: none;
font-weight: bold;
}
- h1 span a.top, h2 span a.top, h3 span a.top, h4 span a.top {
- // display: none;
- cursor: pointer;
- font-size: 12px;
+ h1 a.top:hover, h2 a.top:hover, h3 a.top:hover, h4 a.top:hover {
+ color: #666;
}
h2 a, h3 a {
diff --git a/assets/less/site.less b/assets/less/site.less
index 09c118b..32dd405 100644
--- a/assets/less/site.less
+++ b/assets/less/site.less
@@ -328,6 +328,7 @@ section.dropdown {
border: 1px solid #DDD;
right: 30px;
top: 115px;
+ z-index: 9;
& > a {
width: 100%;
diff --git a/content.html b/content.html
index bfb53be..1858fd3 100644
--- a/content.html
+++ b/content.html
@@ -86,20 +86,6 @@
-
diff --git a/pages/css/assets/images/2012-12-13-15-1.JPG b/pages/css/assets/images/2012-12-13-15-1.JPG
new file mode 100644
index 0000000..87af372
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-15-1.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-15-2.JPG b/pages/css/assets/images/2012-12-13-15-2.JPG
new file mode 100644
index 0000000..21e806f
Binary files /dev/null and b/pages/css/assets/images/2012-12-13-15-2.JPG differ
diff --git a/pages/css/assets/images/2012-12-13-18.JPG b/pages/css/assets/images/2012-12-13-18.JPG
index dff3559..c227248 100644
Binary files a/pages/css/assets/images/2012-12-13-18.JPG and b/pages/css/assets/images/2012-12-13-18.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-10.JPG b/pages/css/assets/images/2012-12-14-10.JPG
new file mode 100644
index 0000000..f18c131
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-10.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-11.JPG b/pages/css/assets/images/2012-12-14-11.JPG
new file mode 100644
index 0000000..65dae4b
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-11.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-12.JPG b/pages/css/assets/images/2012-12-14-12.JPG
new file mode 100644
index 0000000..4b8aecc
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-12.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-13.JPG b/pages/css/assets/images/2012-12-14-13.JPG
new file mode 100644
index 0000000..bb761bf
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-13.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-14.JPG b/pages/css/assets/images/2012-12-14-14.JPG
new file mode 100644
index 0000000..a408b98
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-14.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-15.JPG b/pages/css/assets/images/2012-12-14-15.JPG
new file mode 100644
index 0000000..1a0582e
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-15.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-4.JPG b/pages/css/assets/images/2012-12-14-4.JPG
index 682070a..a7ae65d 100644
Binary files a/pages/css/assets/images/2012-12-14-4.JPG and b/pages/css/assets/images/2012-12-14-4.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-5.JPG b/pages/css/assets/images/2012-12-14-5.JPG
new file mode 100644
index 0000000..c5df5ca
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-5.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-6.JPG b/pages/css/assets/images/2012-12-14-6.JPG
new file mode 100644
index 0000000..b5d4c20
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-6.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-7.JPG b/pages/css/assets/images/2012-12-14-7.JPG
new file mode 100644
index 0000000..b5df40d
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-7.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-8.JPG b/pages/css/assets/images/2012-12-14-8.JPG
new file mode 100644
index 0000000..b94999d
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-8.JPG differ
diff --git a/pages/css/assets/images/2012-12-14-9.JPG b/pages/css/assets/images/2012-12-14-9.JPG
new file mode 100644
index 0000000..da18414
Binary files /dev/null and b/pages/css/assets/images/2012-12-14-9.JPG differ
diff --git a/pages/css/tutorial/whats_mobile_component.md b/pages/css/tutorial/whats_mobile_component.md
index d114bad..2c58ff1 100644
--- a/pages/css/tutorial/whats_mobile_component.md
+++ b/pages/css/tutorial/whats_mobile_component.md
@@ -1,4 +1,4 @@
-#适合移动端的组件 **移动端组件**
+#适合移动端的组件（基于H5实践） **移动端组件**
写此篇的目的，完全是因为在读bootStrap后将其部分搬到Mixcss发现诸多“水土不服”的地方，移动端的组件还是与PC上的组件有诸多不同点的。
@@ -133,6 +133,12 @@ bootstrap：
Mobile：
+此外，一些list也是导航：
+
+
+包括一些header，也算是一种导航：
+
+
**和PC相比，Mobile的设计->占用空间灵活（隐藏）、简约**
##Breadcrumbs
@@ -203,13 +209,82 @@ Mobile：
**Mobile在对空间利用要求更加高，紧凑，简明，突出；另外一个就是响应式，现在的H5还是固定列宽，而Bootstrap已经做了响应式的Grid布局，MixCss也尽力将响应式引入到Mobile端，特别是针对这种Thumbnails（因为它占据整个页面的主体）**
-##Alerts
+##Alerts&Popup
弹框类
bootStrap:
-
+
+
+Mobile:
+
+
+
+##Progress bars
+
+For loading, redirecting, or action status
+
+booStrap：
+
+
+
+Mobile：
+
+
+
+**这种等待还是被类似“菊花”的这种占用空间小，同时表达清晰的图标代替**
+
+##Media object
+
+booStrap：
+
+
+
+Mobile：
+
+
+
+**从文字排版到表达信息基本一致，只是在空间利用上有些差别**
+
+##Slider(banner)
+
+PC:
+
+
+
+Mobile:
+
+
+
+**在Slider上PC端以banner展示为主，而Mobile端除了banner展示，加入了一些滑动的手势**
+
+
+##Footer
+
+PC:
+
+
+
+Mobile:
+
+
+
+
+**展示的信息量、占用空间的区别**
+
+##Responsive##
+
+响应式设计
+
+PC:
+
+
+
+Mobile：
+
+**H5在这块以固定布局设计，在MixCss中尝试加入Grid流式布局**
+
diff --git a/pages/git/category.md b/pages/git/category.md
index fea82c3..14c9b08 100644
--- a/pages/git/category.md
+++ b/pages/git/category.md
@@ -1 +1,2 @@
-* [更新中](#)
\ No newline at end of file
+* [知识学习](#)
+ * [图解Git](knowledge/git_reference.md)
\ No newline at end of file
diff --git a/pages/git/knowledge/git_reference.md b/pages/git/knowledge/git_reference.md
new file mode 100644
index 0000000..f458aa4
--- /dev/null
+++ b/pages/git/knowledge/git_reference.md
@@ -0,0 +1,141 @@
+# 图解Git **git**
+
+***此文来源于网络***
+
+如果你稍微理解git的工作原理，这篇文章能够让你理解的更透彻。
+
+## 基本用法
+
+
+
+上面的四条命令在工作目录、暂存目录(也叫做索引)和仓库之间复制文件。
+
+* `git add files` 把当前文件放入暂存区域。
+* `git commit` 给暂存区域生成快照并提交。
+* `git reset -- files` 用来撤销最后一次git add files，你也可以用git reset 撤销所有暂存区域文件。
+* `git checkout -- files` 把文件从暂存区域复制到工作目录，用来丢弃本地修改。
+
+你可以用 `git reset -p`, `git checkout -p`, 或者 `git add -p`进入交互模式。
+
+也可以跳过暂存区域直接从仓库取出文件或者直接提交代码。
+
+
+
+* `git commit -a` 相当于运行 git add 把所有当前目录下的文件加入暂存区域再运行。git commit.
+* `git commit files` 进行一次包含最后一次提交加上工作目录中文件快照的提交。并且文件被添加到暂存区域。
+* `git checkout HEAD -- files` 回滚到复制最后一次提交。
+
+## 约定
+
+后文中以下面的形式使用图片。
+
+
+
+绿色的5位字符表示提交的ID，分别指向父节点。分支用橘色显示，分别指向特定的提交。当前分支由附在其上的HEAD标识。 这张图片里显示最后5次提交，ed489是最新提交。 master分支指向此次提交，另一个maint分支指向祖父提交节点。
+
+## 命令详解
+
+### [Diff](#diff)
+
+有许多种方法查看两次提交之间的变动。下面是一些示例。
+
+
+
+### [Commit](#commit)
+
+提交时，git用暂存区域的文件创建一个新的提交，并把此时的节点设为父节点。然后把当前分支指向新的提交节点。下图中，当前分支是master。 在运行命令之前，master指向ed489，提交后，master指向新的节点f0cec并以ed489作为父节点。
+
+
+
+即便当前分支是某次提交的祖父节点，git会同样操作。下图中，在master分支的祖父节点maint分支进行一次提交，生成了1800b。 这样，maint分支就不再是master分支的祖父节点。此时，[合并](#merge) (或者 [复位](#rebase)) 是必须的。
+
+
+
+如果想更改一次提交，使用 git commit --amend。git会使用与当前提交相同的父节点进行一次新提交，旧的提交会被取消。
+
+
+
+另一个例子是[分离](#detached)，后文讲。
+
+### [Checkout](#checkout)
+
+checkout命令通常用来从仓库中取出文件，或者在分支中切换。
+
+checkout命令让git把文件复制到工作目录和暂存区域。比如git checkout HEAD~ foo.c把文件从foo.c提交节点HEAD~ (当前提交节点的父节点)复制到工作目录并且生成索引。注意当前分支没有变化。
+
+
+
+如果没有指定文件名，而是一个本地分支，那么将切换到那个分支去。同时把索引和工作目录切换到那个分支对应的状态。
+
+
+
+
+如果既没有指定文件名，也没有指定分支名，而是一个标签、远程分支、SHA-1值或者是像master~3类似的东西，就得到一个匿名分支，称作detached HEAD。 这样可以很方便的在历史版本之间互相切换。但是，这样的提交是完全不同的。、
+
+
+
+### [Detached](#detached)
+
+HEAD是分离的时候, 提交可以正常进行, 但是没有更新已命名的分支. 。(可以看作是匿名分支。)
+
+
+
+如果此时切换到别的分支，那么所作的工作会全部丢失。注意这个命令之后就不存在2eecb了。
+
+
+
+如果你想保存当前的状态，可以用这个命令创建一个新的分支: `git checkout -b name`。
+
+
+
+### [Reset](#reset)
+
+reset命令把当前分支指向另一个位置，并且有选择的变动工作目录和索引。也用来在从历史仓库中复制文件到索引，而不动工作目录。
+
+如果不给选项，那么当前分支指向到那个提交。如果用--hard选项，那么工作目录也更新，如果用--soft选项，那么都不变。
+
+
+
+如果没有给出提交点的版本号，那么默认用HEAD。这样，分支指向不变，但是索引会回滚到最后一次提交，如果用--hard选项，工作目录也同样。
+
+
+
+如果给了文件名(或者 -p选项), 那么工作效果和带文件名的[checkout](#checkout)差不多，除了索引被更新。
+
+
+
+### [Merge](#merge)
+
+merge 命令把不同分支合并起来。合并前，索引必须和当前提交相同。如果另一个分支是当前提交的祖父节点，那么合并命令将什么也不做。 另一种情况是如果当前提交是另一个分支的祖父节点，就导致fast-forward合并。指向只是简单的移动，并生成一个新的提交。
+
+
+
+否则就是一次真正的合并。默认把当前提交(ed489 如下所示)和另一个提交(33104)以及他们的共同祖父节点(b325c)进行一次[三方合并](http://en.wikipedia.org/wiki/Three-way_merge)。结果是先保存当前目录和索引，然后和父节点33104一起做一次新提交。
+
+
+
+### [Cherry Pick](#cherry-pick)
+
+`cherry-pick`命令"复制"一个提交节点并在当前复制做一次完全一样的新提交。
+
+
+
+### [Rebase](#rebase)
+
+复位是合并命令的另一种选择。合并把两个父分支合并进行一次提交，提交历史不是线性的。复位在当前分支上重演另一个分支的历史，提交历史是线性的。 本质上，这是线性化的自动的 [cherry-pick](#cherry-pick)
+
+
+
+上面的命令都在topic分支中进行，而不是master分支，在master分支上重演，并且把分支指向新的节点。注意旧提交没有被引用，将被回收。
+
+要限制回滚范围，使用--onto选项。下面的命令在master分支上重演当前分支从169a6以来的最近几个提交，即2c33a。
+
+
+
+同样有`git rebase --interactive`让你更方便的完成一些复杂操组，比如丢弃、重排、修改、合并提交。没有图片体现着下，细节看这里:[git-rebase(1)](http://www.kernel.org/pub/software/scm/git/docs/git-rebase.html#_interactive_mode)
+
+## 技术说明
+
+文件内容并没有真正存储在索引(.git/index)或者提交对象中，而是以blob的形式分别存储在数据库中(.git/objects)，并用SHA-1值来校验。 索引文件用识别码列出相关的blob文件以及别的数据。对于提交来说，以树(tree)的形式存储，同样用对于的哈希值识别。树对应着工作目录中的文件夹，树中包含的 树或者blob对象对应着相应的子目录和文件。每次提交都存储下它的上一级树的识别码。
+
+如果用detached HEAD提交，那么最后一次提交会被the reflog for HEAD引用。但是过一段时间就失效，最终被回收，与`git commit --amend`或者`git rebase`很像。
diff --git a/pages/git/knowledge/images/git-refer-basic-usage.png b/pages/git/knowledge/images/git-refer-basic-usage.png
new file mode 100644
index 0000000..ee764a4
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-basic-usage.png differ
diff --git a/pages/git/knowledge/images/git-refer-basic-usage2.png b/pages/git/knowledge/images/git-refer-basic-usage2.png
new file mode 100644
index 0000000..69caad4
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-basic-usage2.png differ
diff --git a/pages/git/knowledge/images/git-refer-checkout-after-detached.png b/pages/git/knowledge/images/git-refer-checkout-after-detached.png
new file mode 100644
index 0000000..d28988f
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-checkout-after-detached.png differ
diff --git a/pages/git/knowledge/images/git-refer-checkout-b-detached.png b/pages/git/knowledge/images/git-refer-checkout-b-detached.png
new file mode 100644
index 0000000..9c54c08
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-checkout-b-detached.png differ
diff --git a/pages/git/knowledge/images/git-refer-checkout-branch.png b/pages/git/knowledge/images/git-refer-checkout-branch.png
new file mode 100644
index 0000000..b10970a
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-checkout-branch.png differ
diff --git a/pages/git/knowledge/images/git-refer-checkout-detached.png b/pages/git/knowledge/images/git-refer-checkout-detached.png
new file mode 100644
index 0000000..2032014
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-checkout-detached.png differ
diff --git a/pages/git/knowledge/images/git-refer-checkout-files.png b/pages/git/knowledge/images/git-refer-checkout-files.png
new file mode 100644
index 0000000..d839cee
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-checkout-files.png differ
diff --git a/pages/git/knowledge/images/git-refer-cherry-pick.png b/pages/git/knowledge/images/git-refer-cherry-pick.png
new file mode 100644
index 0000000..ebceddf
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-cherry-pick.png differ
diff --git a/pages/git/knowledge/images/git-refer-commit-amend.png b/pages/git/knowledge/images/git-refer-commit-amend.png
new file mode 100644
index 0000000..5d977c8
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-commit-amend.png differ
diff --git a/pages/git/knowledge/images/git-refer-commit-detached.png b/pages/git/knowledge/images/git-refer-commit-detached.png
new file mode 100644
index 0000000..bd89609
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-commit-detached.png differ
diff --git a/pages/git/knowledge/images/git-refer-commit-maint.png b/pages/git/knowledge/images/git-refer-commit-maint.png
new file mode 100644
index 0000000..50ca19d
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-commit-maint.png differ
diff --git a/pages/git/knowledge/images/git-refer-commit-master.png b/pages/git/knowledge/images/git-refer-commit-master.png
new file mode 100644
index 0000000..e82a7f4
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-commit-master.png differ
diff --git a/pages/git/knowledge/images/git-refer-conventions.png b/pages/git/knowledge/images/git-refer-conventions.png
new file mode 100644
index 0000000..1e4e056
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-conventions.png differ
diff --git a/pages/git/knowledge/images/git-refer-diff.png b/pages/git/knowledge/images/git-refer-diff.png
new file mode 100644
index 0000000..a7aabf8
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-diff.png differ
diff --git a/pages/git/knowledge/images/git-refer-merge-ff.png b/pages/git/knowledge/images/git-refer-merge-ff.png
new file mode 100644
index 0000000..09f9c0c
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-merge-ff.png differ
diff --git a/pages/git/knowledge/images/git-refer-merge.png b/pages/git/knowledge/images/git-refer-merge.png
new file mode 100644
index 0000000..31663cc
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-merge.png differ
diff --git a/pages/git/knowledge/images/git-refer-rebase-onto.png b/pages/git/knowledge/images/git-refer-rebase-onto.png
new file mode 100644
index 0000000..0957251
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-rebase-onto.png differ
diff --git a/pages/git/knowledge/images/git-refer-rebase.png b/pages/git/knowledge/images/git-refer-rebase.png
new file mode 100644
index 0000000..8aa6de4
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-rebase.png differ
diff --git a/pages/git/knowledge/images/git-refer-reset-commit.png b/pages/git/knowledge/images/git-refer-reset-commit.png
new file mode 100644
index 0000000..bdb7581
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-reset-commit.png differ
diff --git a/pages/git/knowledge/images/git-refer-reset-files.png b/pages/git/knowledge/images/git-refer-reset-files.png
new file mode 100644
index 0000000..37307d3
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-reset-files.png differ
diff --git a/pages/git/knowledge/images/git-refer-reset.png b/pages/git/knowledge/images/git-refer-reset.png
new file mode 100644
index 0000000..a9df065
Binary files /dev/null and b/pages/git/knowledge/images/git-refer-reset.png differ
diff --git a/pages/platform/brief/intro.md b/pages/platform/brief/intro.md
index 92252d5..94f5ca8 100644
--- a/pages/platform/brief/intro.md
+++ b/pages/platform/brief/intro.md
@@ -6,13 +6,13 @@ MIX，Mobile In X的缩写。意为，在无线终端领域的各种解决方案
### gitpower(内网)
-[HOME](http://mixteam.git.assets.m.etao.net/mixjs_docs/index.html)
+[HOME](http://mixteam.git.assets.m.etao.net/mixdoc/)
### github(外网)
-[HOME](http://mixteam.github.com/mixjs_docs/)
+[HOME](http://mixteam.github.com/mixdoc/)
-## 文档规范
+## 文档编写规范
* 在pages下，选择文档内容对应的项目子目录，目前分别有platform，js，css，tools，test，repo，git。
* 每个子目录下，有一个category.md，用于展示右侧的文档条目，采用列表的语法书写。最多缩进一级。
@@ -30,6 +30,9 @@ MIX，Mobile In X的缩写。意为，在无线终端领域的各种解决方案
* 在子目录下建立对应的目录和文件，例如：`brief/summary.md`。
* 普通文档只有一个一级标题，用一个`#`标注。可以有多个二级和三级标题。二级和三级标题会被自动认为是本文档的目录索引。如果需要四级标题，请使用`**四级标题**`着重语法来表示。
* API文档只有一个一级标题，用一个`#`标注。二级标题为API的种类，比如JS中为`方法`、`事件`、`属性`，CSS中为`变量`、`函数`、`类名`。三级标题为具体的方法名或属性名等等。对于JS的方法名，必须用列表语法来书写符合[JSDoc](https://code.google.com/p/jsdoc-toolkit/w/list)的文档注释。
+* 引用图片请用相对md文件的路径，或者绝对路径。
+* 所有`[link](#)`形式的链接中的`href`都会被替换成`javascript:void(0)`。
+* 所有二级和三级标题，如果要手动设置锚点名称（默认为按照数字递增），请加上锚点链接，例如`## [Test](#test)`。
**JS 举例**
diff --git a/pages/platform/category.md b/pages/platform/category.md
index a48c58d..3abe914 100644
--- a/pages/platform/category.md
+++ b/pages/platform/category.md
@@ -1,4 +1,6 @@
* [简介](brief/intro.md)
+* [大事记](#)
+ * [Mix网站低调上线](events/online.md)
* [阶段小结](#)
* [2012.12.10](brief/2012_12_10.md)
* [2012.11.22](brief/2012_11_22.md)
diff --git a/pages/platform/events/images/banner.jpg b/pages/platform/events/images/banner.jpg
new file mode 100644
index 0000000..f064641
Binary files /dev/null and b/pages/platform/events/images/banner.jpg differ
diff --git a/pages/platform/events/images/components.png b/pages/platform/events/images/components.png
new file mode 100644
index 0000000..654fdb5
Binary files /dev/null and b/pages/platform/events/images/components.png differ
diff --git a/pages/platform/events/images/pages.png b/pages/platform/events/images/pages.png
new file mode 100644
index 0000000..ab892ec
Binary files /dev/null and b/pages/platform/events/images/pages.png differ
diff --git a/pages/platform/events/online.md b/pages/platform/events/online.md
new file mode 100644
index 0000000..5a4006b
--- /dev/null
+++ b/pages/platform/events/online.md
@@ -0,0 +1,35 @@
+# Mix网站低调上线 **mix**
+
+
+
+## 简介
+
+MIX，Mobile In X的缩写。意为，在无线终端领域的各种解决方案。包括但不限于JS Framework、CSS Framework、UnitTest、Code Repository、Compnent Repository、Develop Tools。同时，mix也有混合之意。表示这些解决方案，是集合了业界的最佳实践，并取其精华，去取糟粕。
+
+## 诞生
+
+Mix项目始于今年9月份。这个极富含义的名称，正是@异翅 童鞋不经意的灵机一动，瞬息跃于纸上。大家一致认为，Mix蕴涵了一个全新的移动端解决方案应该遵循的设计原则。我们不希望造轮子，但又不满足于业界各种框架的存在缺陷，于是乎，Mix应运而生。
+
+当初的Mix只是狭义的指代如今的Mixjs框架。借有业界知名的underscore、backbone、zepto、brix，我们重构了一套应用于移动端的JS MVC框架。以这个项目为起点，我们尝试自行搭建Git服务器（@徐宁），尝试通过Git来组织项目版本，尝试为Seajs加入localStorage功能（@玄寂），尝试探索浏览器本身的各种不同特性（@完颜），尝试用NodeJS来编写利于开发调试的工具（@渚薰）。这些我们团队的第一次，也是不少童靴的第一次。
+
+## 开发
+
+框架的开发用了将近一个半月时间，同时我们也深知，一个框架如果不能被实践检验就不能成为好的框架。也正是希望框架能够良性的迭代和发展下去，前端的童鞋就联合交互和视觉的童鞋发起了一个试验性的项目——淘宝H5 for iPad。我们希望借有一个完整的业务来纠正框架的各种不足。在视觉和交互的童鞋的参与下，很快便有了第一套视觉组件：
+
+
+
+并且，在前辈Brix（@李牧）的帮助下，我们拥有了适合移动端的组件开发规范。并以这套规范，开发了完整的视觉组件。紧接着，淘宝整站基础业务的页面也出炉了（图片中罗列了部分页面）：
+
+
+
+这些工作成果，不得不感谢@弈天、@神患 童鞋的艰辛付出。让我们更加有信心让框架成长下去。
+
+## 里程碑
+
+在整个项目的开发过程中，恰逢双11的年度活动，童鞋们在保证主线业务精益求精的前提下，依旧投入到项目中来，兢兢业业。接近年底了，也不知童鞋们的KPI都完成的如何了。这个ipad的试验项目也快要接近尾声，同时伴随其左右的JS框架，也正式发布0.1版，并正式更名为Mix JS。原有的MIX被赋予了平台的意义。令人高兴的事，一淘H5的项目也在这个时候启动了。在@子宽 童鞋的建议下，Mix JS将被用于一淘H5 webapp的开发，真正接受考验。同时，“有爱”也在考察Mix JS，希望能利用更加优秀的资源来让用户获得更加优秀的体验。
+
+此次Mix平台网站的上线，也是为了能够规范Mix的文档，给Mix一个展示其自身魅力的空间。在网站上线之处，文章比较稀少，慢慢的会变得丰满，且高品质高质量。Mix平台的下一版开发也在如火如荼的进行当中，届时展示在大家面前的不仅仅只有JS框架，还会有CSS框架、测试工具，以及丰富的组件库。
+
+## 感谢
+
+最后，非常感谢为Mix奉献的童鞋：@异翅 @完颜 @江成 @曹纯 @徐宁 @岑安 @玄寂 @哓田 @子宽，以及所有关注Mix的童鞋们。同时也感谢@云杰 童鞋为Mix网站设计UI。
\ No newline at end of file