Git Product home page Git Product logo

swan-docs's Introduction

智能小程序文档编写指导&规范

如何编写

开启本地预览

进入 swan-docs,终端执行 npm start;

终端看到Hexo is running at http://localhost:4000/docs/. Press Ctrl+C to stop. 提示,启动成功。

访问 http://localhost:4000/docs/introduction/register/ 开始编辑(path与线上一致)。

编写

编辑器打开模块,找到你要编辑的文档所在文件夹,修改刷新浏览器即可看到修改。

新增文档

如果是新增文档,去到source/_data/nav.yml新增一份配置(nav.yml配置说明见编写规范)。然后到对应的目录下建立一个.md。

编写规范

导航配置

该配置相当于书的目录。 第一层级为header导航栏(一级导航),第二层级为左侧导航(二级导航),第三层级为左侧导航子导航(h1),第四层级为md页面(h2),第五层级为md页面内锚点(h3)。
第三层级是可选的,如果不配置text,则第三层级不显示。

nav.yml 例子如下

    -
      link: /design/principle
      text: 设计
      name: design
      nav:
        -
          link: /design/principle
          text: 智能小程序设计指南
          name: book
          sidebar:
            -
                link: /design/principle
                text: 设计原则
                name: principle
            -
                link: /design/specification
                text: 样式规范
                name: specification
            -
                link: /design/component
                text: 组件
                name: component
                sidebar:
                -
                    link: /design/header
                    text: 头部组件
                    name: header

定制模版

在.md文件中可以引入定制模版按参数替换即可

下载模版

<div class="m-doc-custom-download">
  <a href="{下载链接左}" class="m-doc-custom-download-left">
    <img src="{图片左}">
    <p>{文案左}</p>
  </a>
  <a href="{链接右}" class="m-doc-custom-download-right">
    <img src="{图片右}">
    <p>{文案右}</p>
  </a>
</div>

参数

  • {链接左} 替换成下载链接
  • {链接右} 替换成下载链接
  • {图片左} 替换成图片地址
  • {图片右} 替换成图片地址
  • {文案左} 替换成文案说明
  • {文案右} 替换成文案说明

双图模版 & 三图模版

  <div class="m-doc-custom-img">{待选模版}</div>
  // 待选模版
  <div><img src="{图片}"></div>

参数

  • {图片} 替换成图片地址
  • {待选模版} 两图就复制两个待选模版进去,三图就复制三个待选模版进去,将{图片}替换要展示图片地址。

左图右文模版

  <div class="m-doc-custom-text-image"><div>{待选模版}</div><div><img src="{图片}"></div></div>
  // 待选模版1
  <p class="m-doc-custom-text-image-h2">{标题文案}</p>
  // 待选模版2
  <notice>{加粗文案}</notice>
  // 待选模版3
  <p>{普通文案}</p>
  // 待选模版4
  <ul><li>{列表文案}</li><li>{列表文案}</li></ul>

示例模版

  <div class="m-doc-custom-examples">{待选模版}</div>
  // 待选模版
  <div class="{待选样式}">
    <img src="{图片地址}">
    <p class="m-doc-custom-examples-title">{高亮文案}</p>
    <p class="m-doc-custom-examples-text">{解释说明}</p>
  </div>

参数

  • {图片} 替换成图片地址
  • {待选模版} 两列就复制两个待选模版进去,三列就复制三个待选模版进去。
  • {待选样式} 正确:m-doc-custom-examples-correct,错误:m-doc-custom-examples-error,警告:m-doc-custom-examples-warning
  • {高亮文案} 高亮的文案
  • {解释说明} 对示例的解释说明

控制在不同设备中显示

只在pc端显示添加 class="ispc" ,只在百度 App端显示添加 class="isbox" ,只在除百度 App外移动端显示添加 class="ismobile" ,参考 设计-重创新 实现。

swan-docs's People

Contributors

wenlixiu avatar wdingding avatar jinzhan avatar sunbai321 avatar mangon avatar sw811 avatar wannamakeudance avatar errorrik avatar marxjiao avatar bmxklyzj avatar huanhuana avatar oaks907 avatar leaf217 avatar ovilia avatar wangshuonpu avatar houyu01 avatar 100pah avatar thudern avatar classjm avatar mountyprogram avatar jialebd avatar vliyuenan avatar yutianmidori avatar zhanfang avatar qianliu013 avatar bosspan avatar zhangshao-qiang avatar awenhalv avatar mixiuu avatar blackshh avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.