markdown 在 标题标签（#、## 等）下会自动将其添加为锚点，并且锚点的 id 就为标签的内容；然而，我们的内容大多是中文，就会被转化成 Unicode，可读性较差。

不考虑可读性

直接添加标题标签自动生成的锚点 id，形如：#%E6%94%AF%E6%8C%81-android-21-%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC

举例：

https://github.com/vincent4j/android-training-course-in-chinese/blob/gh-pages/SOURCE/basics/actionbar/setting-up.md#%E4%BB%85%E6%94%AF%E6%8C%81-android-30-%E5%8F%8A%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC

考虑可读性

不使用 标题标签，直接通过 html 语言替代，如此锚点 id 就可以自行指定。
效果：http://daringfireball.net/projects/markdown/syntax#overview
源码：http://daringfireball.net/projects/markdown/syntax.text

提示：此方法在 github 上不可行，但在 Jekyll 上是可行的。原因应该是，github 上的 markdown 语法是对标准 markdown 语法有过优化。所以对我们的工程来说，这样写是完全没问题的，因为我们最终跑在 Jekyll 上。
示例效果：
http://design.1sters.com/material_design/components/menus.html#menus_behavior
示例源码：
https://github.com/1sters/material_design_zh/blob/master/SOURCE/components/menus.md

what ?

我选择用jekyll来生成页面，jekyll里面有个烦人的配置，需要在每个文件最上面加上如下信息：

---
layout: page
title: 布局模板
permalink: layout-templates.html

---

其中：
layout：全部page（对应布局模板 page）
title:写你这个页面的标题（基本上就是第一行字，不要#)
permalink: 写你的文件名.html（扩展名是 html，而不是 md，Jekyll 会自动将 md 文件编译成静态的 html）

参考：
https://github.com/1sters/material_design_zh/blob/master/SOURCE/material-design/introduction.md

ps.
本来打算写个脚本自动处理的，4j说写脚本时间还不如让大家手工修改下~
如果大家有空就顺手修改下，如果没空，今天晚上我自己苦力一下~

用firefox和Chrome浏览器都没办法播放

刚才 @Jingsha 反馈，在「Meaningful Transitions 」章节中插入视频存在问题：

尝试了一下在页面里面插入视频的代码，但是preview的时候没有显示

答复：

视频不能显示的问题，先放不放，等后期找到方案了，改改就好啦。别为了搞这东西，浪费掉时间，不值得。

稍后等 @IceskYsl 找到解决方案之后，大家统一修改就可以了；当前再碰到视频的问题，先往后放一放，继续下面的翻译。

update at 2014.06.30 12:22

视频添加已经搞定，具体如何添加看工程的 Readme 文件
示例效果：
http://design.1sters.com/material_design/components/menus.html
示例源码：
https://github.com/1sters/material_design_zh/blob/master/SOURCE/components/menus.md

当前 @DonLiangGit 翻译的是繁体中文，后期用 google 转为简体。

• 图片描述中的 do 和 dont
  • do：要
  • dont：不要
• Material Design：直接保留英文
• 单位尺寸： px, dp, sp，直接保留英文，且全部小写
• UI：保留英文
• Examples：示例
• for example：例如

目前我是这么做的：

1. 原图片保存一份到images
2. 通过简单PS工具美图秀秀网页版 把图片修改为mdpi，具体为相关边有720的改为360，另外一边按比例自带修改。然后另存一份后缀mdpi到images。
3. 修改md定位到新的图片。

有部分兄弟反应他的章节翻译起来比较吃力，需要能力强点的校对者，特别需要具备一定的专业知识。

现在对这些章进行统计：

• 准则 - Principles by @lightlz
• 图像 - Imagery
• 手势 - Gestures

好九不见 11:57:25
提个小建议——咱们翻译的时候专业名词以括号形式保留原英语名词吧，比如「导航（navigation）」这种，因为咱们平时用的时候不管设计师还是开发进行控件标注的时候大多习惯用原来的英文名词...

东西比较多，部分文件也比较大。
能打个包么？

跟谷歌官方原版相比有点滞后了

规范

大家付出这么多，唯一能回报大家的就只能是通过文章底部署名。署名的式样全部统一成：

代码：> 原文：[章节名](链接) 翻译：[昵称](链接) 校对：[昵称](链接) （全角冒号，「翻译」、「校对」前面是2个空格）

效果：

原文：Authentic Motion 翻译：vincent4j 校对：iceskysl

统计

默认的昵称就是 GitHub 的用户名，链接就是 GitHub 的个人主页。如果在这个统计列表里未找到，就直接写默认的。

大家如果需要额外定制的，请按照 2楼 同样的方式申请：第一行，昵称（可以是中文）；第二行，链接（必须带 http://）。

我们翻译的是markdown格式的文档，发布的时候需要自动发布成网页和ebook，试了很多个可行的方案，比如非常流行的https://www.gitbook.io/ , https://github.com/fnando/kitabu 等，但是其都有一定的局限性（必须按照他的风格和样式，生成出来的也都一个模样）~

于是寻找其他的解决方案，最终锁定https://github.com/ruby-hacking-guide/ruby-hacking-guide.github.com 这样的方案，GitHub + Jekyll + Github Page + Calibre + Script来做~

其中：

• GitHub: 多人协作，文档编辑；
• Jekyll: 自动生成HTML的静态页；
• Github Page：托管Jekyll生成的静态页；
• Calibre：生成PDF，EPUB，mobi格式电子书；
• Script：要想自动化的工作，还需要自己写一些脚本来批量处理；

目前正在Script编写，统一处理图片，页面目录结构，css改写等~

1、在原始文章中找到视频的原始地址

• 鼠标右键视频
• 选择「复制视频网址」

例如「Authentic Motion」章节的第一个视频地址为：
http://material-design.storage.googleapis.com/videos/animation-authentic-motion-authenticMotion_massAndWeight_ex1_large_xhdpi.webm

2、修成改「七牛」对应的地址
因为 google 服务器过慢，所以将所有的视频都传到「七牛」，只需将前面的「域名」更换即可。
由
http://material-design.storage.googleapis.com
换成
http://materialdesign.qiniudn.com

最终地址为：
http://materialdesign.qiniudn.com/videos/animation-authentic-motion-authenticMotion_massAndWeight_ex1_large_xhdpi.webm

3、查看网页源码，找到 width 和 height

• 在浏览器中查看「Authentic Motion」章节源码
• 在源码中检索视频文件名「animation-authentic-motion-authenticMotion_massAndWeight_ex1_large_xhdpi.webm」
• 检索结果中，「video」标签下的「width」和「height」就是所要找的值

4、往翻译稿中添加代码
假定上一步中查找的值为：width="740" height="270"

<video crossorigin="anonymous"  loop  controls width="740" height="270">
<source src="http://materialdesign.qiniudn.com/videos/animation-authentic-motion-authenticMotion_massAndWeight_ex1_large_xhdpi.webm" type="video/webm">
</video>

其中，仅以下三个值需要指定，其他保持不变：

• width
• height
• src

项目是否停止维护了，http://design.1sters.com 能打开，但是资源已经访问不到。

很多 5、6秒的视频，每次都要手动去点击 ~ 很麻烦的。
统一转为 gif 自动循环播放多好。

文档里的视频是放在Google服务器上的，访问起来不是很顺畅，需要全部下载一份到本地~

回头一并放到七牛里去~

http://design.1sters.com/的页面下加入评论功能~

让读者可以反馈问题，讨论等~

字体排版 - Typography 1% by @IceskYsl
滑块 - Sliders 1% by @IceskYsl
Snackbars 与 Toasts - Snackbars and Toasts 1% by @poppinlp
选择 - Selection 1% by @poppinlp
》这两个同学可以放心

按钮 - Buttons 1% by @Siton
》联系过了，最近就可以给出。

文本框 - Text fields 1% by @hyaocuk
手势 - Gestures（难） 1% by @cxytomo
影像处理 - Imagery Treatment 1% by @wanningliu
》7.25 号认领的，时间还可以缓缓。

图像 - Imagery（难）1% by @chenyusi
》已经改好了，最近会发 pull request

结构 - Structure 1% by @Courtneychow88
》8.1 号，才认领的

列表控制 - List controls 1% by @EflakeEver
菜单 - Menus 1% @xieweiqi1860
》这两个认领很久很久了，也一直联系不上，如果到周一还联系不上，就移除了，让其他人来认领。

当「目录」显示状态时，想要隐藏它，当前只能点击右上角的「目录」菜单。

希望：点击任何空白区域即可隐藏。

校对须知

原则

• 从规范性，流畅性，达意，专业性四个方面校对
• 错别字纠正
• 错别标点符号纠正：特别是半角，或乱用标点符号的
• 校对者在修改之前务必要和翻译者商量过：
  其一，翻译者如此写应该有他的用意；
  其二，翻译者辛辛苦苦翻译的，在不通气的情况下就给人改了，有点对不起别人的劳动成果
• 校对者一定是要对着原文校对，不能只看翻译版本通不通就完事了
• 要把每篇文章底部的评论建议加进去：好的吸收，不好的在原评论基础上回复出不采纳的原因；通过这种方式让「建议者」收到回馈，双方互动起来，他们才更愿意给咱提宝贵的建议

参考

• 术语表：#130
• 编写规范：#89

认领步骤

前往 校对认领章节记录 选取自己钟意的章，然后在本 issue 评论，@vincent4j 会第一时间收到邮件提示，并更新 readme

提示：

• 在章中标记 （难） 的代表本章翻译起来困难，当然校对起来也会困难
• 本来自己可以修改 readme 的，但容易冲突，就我来代替大家修改

校对步骤

• 获取一份最新的仓库（有不会的么？）
• 翻译稿和原文对比、结合发布网页上「多说评论」（http://design.1sters.com/ ），在自己本地仓库修改第一个v1；
• 修正完成后，向主仓库 1sters，发起 pull request（先不merge）；
• 联系翻译者，向其展示自己的校对修改点（就是把 pull url 给他一看便知道修改点）；双方可在该pull下讨论和确认，商定之后，校对者在 ver1 的基础上再次修改出一版 ver2，最后评论完成，开始合并；
• 待 pull request 被 merge 之后，回到「多说评论」一一回复反馈者，比如说：
  已采纳的：回复，「已采纳，已经并入当前文章中」
  未采纳的：回复不采纳的原因
• 回到本 issue 中添加评论：xx章校对完成

**提示：**大家记得在每篇文章底部加上署名，署名内容来自于：#148

标题 + 内容 的形式，140 个字以内

标题

Material Design 中文版 (Google I/O 2014 最新推出的全平台设计指南)

内容

Google I/O(2014) 最新推出的 Material Design 势必会成为全平台设计规范，其适配包括 Android Mobile, Android Table, Desktop Chrome 在内的所有平台；design.1sters.com 采用高效的 GitHub 协同翻译模式在一周之内全部译完，希望能帮助到国内的设计师和开发者！

链接

http://design.1sters.com

字体排版 - Typography 1% by @IceskYsl（已经校对完成 2014.08.28）
滑块 - Sliders 1% by @IceskYsl（已经校对完成 2014.08.28）
》时间老长啦

按钮 - Buttons 1% by @Siton（已经校对完成 2014.08.20）
》联系过了，最近就可以给出。

文本框 - Text fields 1% by @hyaocuk（已经校对完成 2014.08.19）
影像处理 - Imagery Treatment 1% by @wanningliu
》7.25 号认领的，时间还可以缓缓。

结构 - Structure 1% by @Courtneychow88（已经校对完成 2014.08.28）
列表控制 - List controls 1% by @cxytomo（已经校对完成 2014.08.19）
菜单 - Menus 1% @poppinlp（已经校对完成 2014.08.21）
》8 月份，才认领的

处理方案：在 footer 加个「chrome 下查看」等字样的提示。

chrome 没问题，好像就 Firefox 不行～
点击之后会打开一个空的新标签页～

http://design.1sters.com/material_design/animation/responsive-interaction.html

看这个里面的视频，我一屏幕基本上还显示不下一个。我说的是电脑上的，不是手机。

建议：能不能通过 css 控制 video 的长高，但又不能写死，因为每个视频的长高本来就不一样，能不能按照百分比，比如说都缩小到现在的 50%

在 google 原始页面中的图片都是 xhdpi 尺寸的，超级大；那如何变小呢？

原始图片链接如：
http://material-design.storage.googleapis.com/images/components-switches-checkbox-switches_07a_large_xhdpi.png

操作：
将最后的 xhdpi 改成 mdpi，形如：
http://material-design.storage.googleapis.com/images/components-switches-checkbox-switches_07b_large_mdpi.png

也就是说，google 服务器上存放了多套尺寸的图片。

环境章节打不开？

修改对部分句子还有标点

最主要的关键字定位为「Material Design 中文」，其他次之的关键字如下：

• Material Design 中文版
• Material Design 翻译
• Material Design 中文翻译

• 提交 sitemap 给「Google 网站站长工具」
• 提交 sitemap 给「百度站长平台」

这个项目是停更了吗。。。☹

在校对过程中，有些目录翻译被修改过了，要重新全部核对。

刚才已经将我下载的所有资源文件（视频、ai、zip）上传到七牛，可能有遗漏，大家在此统计下

字体

• 大小
  • 标题大小：# 标题标签对应的字体大小
  • 默认大小：包括正文、插图说明等；简单点，除了 h 标签其他都是默认

提示：如何知道原文的字体大小？在浏览器里查看源码，是不是位于 h 标签之下。

• 颜色：除了加粗，其他全部默认

插图 & 视频

• 每行只显示一张图片或一个视频（因为一行并排显示多张或多个，markdown 处理麻烦）
• 直接下载原图（大小取 mdpi 尺寸）
• 无需对原图进行二次加工（即使有英文）
• 对齐：居左对齐（就是 markdown 默认）
• 插图或视频说明文字：如果有，统一写在图片或视频的下一行（换行，但不用空一行）；如果没有，不用自己造说明

问：原图太大，如何处理？
答：#57

问：如何添加视频？
答：#90

章节中的目录：不保留

在每章的头部，大概应该是第一段之后都会有个本章目录 Contents，我们舍弃这一部分，也就是在翻译稿里不要这部分。出发点，单章的内容不会太多，再就是写这部分还要加 锚点 比较费时。

章节中每个二级标题之间的分割线：不保留

原文中每个章节内部的二级标题之后都会人为的加入一条分割线（对应 markdown 中的连续三个等于号），而我们使用的 markdown 语法的 h2，默认就会在标题下一行加入分割线，导致重复；所以翻译稿里不保留 h2 标题上方的分割线。

Jekyll 头部信息

因为工程最终运行在 Jekyll 之下，所以必须按照其要求添加头部信息。
操作如下：#81

资源文件下载添加

• 链接：在原始链接的基础上用域名「materialdesign.qiniudn.com」替换掉「material-design.storage.googleapis.com」；
  例如：http://materialdesign.qiniudn.com/downloads/color_swatches.zip
• 文字描述：名称 + 空格 + 减号 + 空格 + 大小 + 英文括号 + 扩展名 + 英文反括号；
  形如：色样 - 0.13 MB(.zip)，给「名称」添加链接，不是给整体。