Skip to content

moye 的主站文档开发指南

leon edited this page Aug 7, 2015 · 3 revisions

新版的主站是基于 hexo 开发的,代码存放在site分支上,部署上gh-pages分支上。

如何开发一个新组件 demo 页面

  1. 首先安装 hexo,
npm install -g hexo
  1. 把代码切换到site分支上
  2. 在 moye 目录下输入命令:
hexo new component YourNewComponent

这时候我们会在 source/_post 目录下生成一个 YourNewComponent.md 的文档

  1. 打开这个 source/_post/YourNewComponent,按照 markdown 的标准格式编写文档就可以了

如何插入一段 codepen demo

  1. 打开任何一个有 codepen demo 的页面,点击右上角的这个 edit on codepen
  2. 在新打开的页面里边 fork 一个新的 pen 出来。
  3. 编写你的新 demo

一些小 trick

  1. 现在我把 moye 的静态文件放到了七牛 cdn 上,后面会更换到主站上。
  2. fork 出来的 pen 里边会有一些基础的脚本,比如 jquery 和 esl 和 moye 的主模块(合并版本)。所以 fork 一个现有的 pen 会方便些。这些可以点击 js 面板边上的小齿轮来查看。
  3. 现有的 pen 里边可能会带有之前组件的样式,需要打开 css 面板边上小齿轮,找到它,把它的组件名,换成你的新组件名就好了。

更新导航栏

导航栏的配置是在 source/_data/nav.yml 中,新页面只需要在合适的位置上添加上这一段

-
  text: "按钮 / Button"
  title: "按钮 / Button"
  link: comopnent/Button.html

text 是显示在导航栏中的文本,title 是组件 markdowntitlelink_post 向下的文件路径。

这个 title 是用来判断导航条是否被选中。

发布页面

只需要在 moye 目录下使用这个命令就 OK 了:

hexo deploy

别忘了把你的页面提交到site分支上哟