Git Product home page Git Product logo

swan-docs's Introduction

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

如何编写

开启本地预览

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

终端看到VuePress dev server listening at http://localhost:4000/docs/ 提示,启动成功。

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

编写

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

新增文档

如果是新增文档,去到program-docs/nav/nav.yml新增一份配置(nav.yml配置说明见编写规范)。 然后到对应的目录下(program-docs/docs/)建立一个.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

asadeer avatar bmxklyzj avatar classjm avatar errorrik avatar houyu01 avatar huanhuana avatar jialebd avatar jingxiangzheng avatar jinzhan avatar jovinhao avatar leaf217 avatar lok6666 avatar lyuyang-jk avatar mangon avatar marxjiao avatar mawenchao0417 avatar mumu-li avatar oaks907 avatar ovilia avatar rabbit77 avatar sherrie avatar sunbai01 avatar sunbai321 avatar sw811 avatar thudern avatar wangshuonpu avatar wannamakeudance avatar wdingding avatar wenlixiu avatar yutianmidori avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

swan-docs's Issues

websocket问题

在百度小程序上调用
swan.sendSocketMessage({
data: 使用ArrayBuffer类型的数据
}),
但服务端实际收到的data不是ArrayBuffer而是utf-8的字符串。
请问百度小程序为什么要将data转成字符串再发送到socket通道?能否取消这个操作?因为这个问题导致我无法在百度小程序上使用mqtt实现IM。

app如何集成

应用怎么集成小程序的框架,使得应用也具有小程序的能力?

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.