UNPKG

ydoc

Version:

基于 Markdown 的静态站点生成工具

135 lines (133 loc) 12.4 kB
<html><head><meta charSet="UTF-8"/><meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-status-bar-style" content="black"/><link rel="apple-touch-icon" sizes="180x180" href="../ydoc/images/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="../ydoc/images/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="../ydoc/images/favicon-16x16.png"/><link rel="manifest" href="../ydoc/images/manifest.json"/><link rel="mask-icon" href="../ydoc/images/safari-pinned-tab.svg&quot;" color="#5bbad5"/><meta name="theme-color" content="#ffffff"/><meta http-equiv="Cache-Control" content="no-transform"/><meta http-equiv="Cache-Control" content="no-siteapp"/><title>钩子-文档</title><link rel="stylesheet" href="../ydoc/styles/style.css"/><meta name="author" content="ymfe"/><meta name="keywords"/><meta name="description" content="ydoc description demo"/><meta id="releativePath" content=".."/><link rel="stylesheet" href="../ydoc/ydoc-plugin-search/search.css"/><link rel="stylesheet" href="../custom.css"/></head><body><div class="g-doc"><div class="m-summary" id="js-menu"><div class="m-summary-content" id="js-menu-content"><div class="m-summary-block"><ul class="m-summary-list"><li class="item"><a href="index.html" class="href">快速开始</a></li></ul></div><div class="m-summary-block"><div class="m-summary-title">教程</div><ul class="m-summary-list indent"><li class="item"><a href="structure.html" class="href">目录结构</a></li><li class="item"><a href="nav.html" class="href">导航</a></li><li class="item"><div class="m-summary-block"><a href="pages-index.html" class="href">页面</a><ul class="m-summary-list indent"><li class="item"><a href="pages-index.html" class="href">首页</a></li><li class="item"><a href="pages-book.html" class="href">文档页</a></li><li class="item"><a href="pages-custom.html" class="href">自定义页面</a></li></ul></div></li><li class="item"><a href="config.html" class="href">配置文件</a></li><li class="item"><a href="markdown.html" class="href">Markdown</a></li></ul></div><div class="m-summary-block"><div class="m-summary-title">自定义</div><ul class="m-summary-list indent"><li class="item"><a href="theme.html" class="href">主题</a></li><li class="item"><a href="jsx.html" class="href">JSX</a></li><li class="item"><div class="m-summary-block"><a href="plugins.html" class="href">扩展</a><ul class="m-summary-list indent"><li class="item"><a href="create.html" class="href">创建插件</a></li><li class="item"><a href="" class="href">Hooks</a></li><li class="item"><a href="markdown-it.html" class="href">markdown扩展</a></li></ul></div></li></ul></div><div class="m-summary-block"><ul class="m-summary-list"><li class="item"><a href="release.html" class="href">版本历史</a></li></ul></div></div><div class="m-summary-switch" id="js-summary-switch"><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="bottom"><g transform="translate(904.92214,-879.1482)"><path d="m -673.67664,1221.6502 -231.2455,-231.24803 55.6165,-55.627 c 30.5891,-30.59485 56.1806,-55.627 56.8701,-55.627 0.6894,0 79.8637,78.60862 175.9427,174.68583 l 174.6892,174.6858 174.6892,-174.6858 c 96.079,-96.07721 175.253196,-174.68583 175.942696,-174.68583 0.6895,0 26.281,25.03215 56.8701,55.627 l 55.6165,55.627 -231.245496,231.24803 c -127.185,127.1864-231.5279,231.248 -231.873,231.248 -0.3451,0 -104.688,-104.0616 -231.873,-231.248 z" fill="#fff"></path></g></svg><svg viewBox="0 0 926.23699 573.74994" version="1.1" x="0px" y="0px" width="15" height="15" class="top"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="aaa" fill="#fff" fill-rule="nonzero"><path d="M231.2455,342.502 L0,111.25397 L55.6165,55.62697 C86.2056,25.03212 111.7971,-2.99999998e-05 112.4866,-2.99999998e-05 C113.176,-2.99999998e-05 192.3503,78.60859 288.4293,174.6858 L463.1185,349.3716 L637.8077,174.6858 C733.8867,78.60859 813.060896,-2.99999997e-05 813.750396,-2.99999997e-05 C814.439896,-2.99999997e-05 840.031396,25.03212 870.620496,55.62697 L926.236996,111.25397 L694.9915,342.502 C567.8065,469.6884 463.4636,573.75 463.1185,573.75 C462.7734,573.75 358.4305,469.6884 231.2455,342.502 Z" id="Shape" transform="translate(463.118498, 286.874985) scale(1, -1) translate(-463.118498, -286.874985) "></path></g></g></svg></div></div><div class="m-main" id="js-panel"><header class="m-header" id="js-header"><div class="m-header-title js-logo"><a href="../index.html" target="_self"><img class="logo" src="../ydoc/images/dog@1x.png" srcSet="../ydoc/images/dog@2x.png 2x"/><h6 class="name">YDoc</h6></a></div><div><div class="m-search"> <div class="icon">&#xf0fd;</div> <input type="text" class="input js-input" placeholder="搜索文档内容" /> <div class="m-search-result js-search-result"></div> </div></div><nav class="m-header-nav js-nav"><ul class="m-header-items"><li class="item active"><a class="href" href="index.html">文档</a></li><li class="item "><a class="href" href="../plugin/index.html">插件</a></li><li class="item "><span class="href">规范</span><ul class="m-header-subtitle"><li class="item"><a href="../standard/style-guide.html" class="link">设计规范</a></li><li class="item"><a href="../standard/index.html" class="link">文档规范</a></li></ul></li></ul></nav><div id="js-nav-btn" class="m-header-btn ui-font-ydoc"></div></header><div class="m-content" id="js-content"><div id="markdown-body" class="m-content-container markdown-body"><h1>&#x94A9;&#x5B50;</h1> <h2 id="&#x94A9;&#x5B50;&#x5217;&#x8868;">&#x94A9;&#x5B50;&#x5217;&#x8868;</h2> <h4>&#x5168;&#x5C40;&#x94A9;&#x5B50;</h4> <table> <thead> <tr> <th>&#x540D;&#x79F0;</th> <th>&#x63CF;&#x8FF0;</th> <th>&#x53C2;&#x6570;</th> </tr> </thead> <tbody> <tr> <td><code>init</code></td> <td>&#x5728;&#x751F;&#x6210;&#x6587;&#x6863;&#x7AD9;&#x70B9;&#x524D;&#x89E6;&#x53D1;.</td> <td>&#x65E0;</td> </tr> <tr> <td><code>finish</code></td> <td>&#x5728;&#x751F;&#x6210;&#x6587;&#x6863;&#x7AD9;&#x70B9;&#x5B8C;&#x6210;&#x540E;&#x89E6;&#x53D1;.</td> <td>&#x65E0;</td> </tr> <tr> <td><code>assets</code></td> <td>&#x5F15;&#x7528;&#x63D2;&#x4EF6;&#x9759;&#x6001;&#x6587;&#x4EF6;</td> <td>&#x65E0;</td> </tr> </tbody> </table> <h4>&#x9875;&#x9762;&#x94A9;&#x5B50;</h4> <table> <thead> <tr> <th>&#x540D;&#x79F0;</th> <th>&#x63CF;&#x8FF0;</th> <th>&#x53C2;&#x6570;</th> </tr> </thead> <tbody> <tr> <td><code>page:before</code></td> <td>&#x5728;&#x521B;&#x5EFA; html &#x9875;&#x9762;&#x4E4B;&#x524D;&#x8C03;&#x7528;</td> <td>Page Object</td> </tr> <tr> <td><code>page</code></td> <td>&#x751F;&#x6210; html &#x9875;&#x9762;&#x540E;&#x8C03;&#x7528;</td> <td>Page Object</td> </tr> </tbody> </table> <h4>&#x6A21;&#x677F;&#x94A9;&#x5B50;</h4> <table> <thead> <tr> <th>&#x540D;&#x79F0;</th> <th>&#x63CF;&#x8FF0;</th> <th>&#x53C2;&#x6570;</th> </tr> </thead> <tbody> <tr> <td><code>tpl:header</code></td> <td>&#x5728;&#x9875;&#x9762;&#x5BFC;&#x822A;&#x6DFB;&#x52A0;&#x81EA;&#x5B9A;&#x4E49;&#x7684; html</td> <td>&#x65E0;</td> </tr> </tbody> </table> <h4>Page Object</h4> <pre><code class="language-js">{ <span class="hljs-comment">// &#x9875;&#x9762;&#x7C7B;&#x578B;&#xFF0C;&#x652F;&#x6301; md jsx html &#x4E09;&#x79CD;</span> type: <span class="hljs-string">&apos;md&apos;</span>, <span class="hljs-comment">// &#x9875;&#x9762;&#x6807;&#x9898;</span> title: <span class="hljs-string">&apos;string&apos;</span>, <span class="hljs-comment">// &#x9875;&#x9762;&#x63CF;&#x8FF0;&#x4FE1;&#x606F;</span> description: <span class="hljs-string">&apos;string&apos;</span>, <span class="hljs-comment">// &#x9875;&#x9762;&#x5185;&#x5BB9;</span> content: <span class="hljs-string">&apos;&#x5185;&#x5BB9;&apos;</span>, <span class="hljs-attr">prev</span>: <span class="hljs-string">&apos;&#x4E0A;&#x4E00;&#x9875;&#x8FDE;&#x63A5;&apos;</span>, <span class="hljs-attr">next</span>: <span class="hljs-string">&apos;&#x4E0B;&#x4E00;&#x9875;&#x94FE;&#x63A5;&apos;</span>, <span class="hljs-attr">releativePath</span>: <span class="hljs-string">&apos;&#x76F8;&#x5BF9;&#x8DEF;&#x5F84;&apos;</span> srcPath: <span class="hljs-string">&apos;&#x6E90;&#x6587;&#x4EF6;&#x8DEF;&#x5F84;&apos;</span>, <span class="hljs-attr">distPath</span>: <span class="hljs-string">&apos;&#x751F;&#x6210;&#x6587;&#x4EF6;&#x8DEF;&#x5F84;&apos;</span> } </code></pre> <h5>&#x589E;&#x52A0;&#x9875;&#x9762;&#x5185;&#x5BB9;&#x793A;&#x4F8B;</h5> <p>&#x4F7F;&#x7528; <code>page:before</code> &#x94A9;&#x5B50;</p> <pre><code class="language-js">{ <span class="hljs-string">&quot;page:before&quot;</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">page</span>) </span>{ page.content = page.content + <span class="hljs-string">&quot;\n Hello YDoc&quot;</span>; <span class="hljs-keyword">return</span> page; } } </code></pre> <h5>&#x66FF;&#x6362; html &#x793A;&#x4F8B;</h5> <p>&#x4F7F;&#x7528; <code>page</code> &#x94A9;&#x5B50;</p> <pre><code class="language-js">{ <span class="hljs-string">&quot;page&quot;</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">page</span>) </span>{ page.content = page.content.replace(<span class="hljs-string">&quot;&lt;b&gt;&quot;</span>, <span class="hljs-string">&quot;&lt;strong&gt;&quot;</span>) .replace(<span class="hljs-string">&quot;&lt;/b&gt;&quot;</span>, <span class="hljs-string">&quot;&lt;/strong&gt;&quot;</span>); <span class="hljs-keyword">return</span> page; } } </code></pre> <h4>&#x5F15;&#x7528;&#x9759;&#x6001;&#x6587;&#x4EF6;</h4> <p>&#x4F7F;&#x7528; <code>assets</code> &#x94A9;&#x5B50;</p> <pre><code class="language-js">{ <span class="hljs-attr">assets</span>: { <span class="hljs-attr">dir</span>: <span class="hljs-string">&apos;./assets&apos;</span>, <span class="hljs-attr">js</span>: [<span class="hljs-string">&apos;app.js&apos;</span>], <span class="hljs-attr">css</span>: [<span class="hljs-string">&apos;app.css&apos;</span>] } } </code></pre> <p>&#x590D;&#x5236;&#x5F53;&#x524D;&#x76EE;&#x5F55;&#x4E0B;&#x7684; assets &#x6587;&#x4EF6;&#x5939;&#x5230;&#x6587;&#x6863;&#xFF0C;&#x5E76;&#x4E14;&#x5728;&#x6BCF;&#x4E2A;&#x6587;&#x4EF6;&#x5F15;&#x5165; app.js &#x548C; app.css&#x3002;</p> <h3 id="&#x94A9;&#x5B50;&#x5217;&#x8868;-&#x5F02;&#x6B65;&#x64CD;&#x4F5C;">&#x5F02;&#x6B65;&#x64CD;&#x4F5C;</h3> <p>&#x56DE;&#x8C03;&#x53C2;&#x6570;&#x8FD4;&#x56DE;&#x4E00;&#x4E2A; promise,&#x80FD;&#x591F;&#x652F;&#x6301;&#x5F02;&#x6B65;&#x5904;&#x7406;&#x3002;</p> <p>Example:</p> <pre><code class="language-js">{ <span class="hljs-string">&quot;init&quot;</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>((<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">resolve</span>)</span>{ setTimeout(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ resolve(<span class="hljs-literal">true</span>) }, <span class="hljs-number">2000</span>) })) } } </code></pre> </div><div class="m-content-container m-paging"><div class="m-paging-prev m-paging-item"><a href="create.html" class="href"><span class="ui-font-ydoc"></span>创建插件</a></div><div class="m-paging-next m-paging-item"><a href="markdown-it.html" class="href">markdown扩展<span class="ui-font-ydoc"></span></a></div></div></div></div></div><script src="../ydoc/scripts/plugins/dollar.min.js"></script><script src="../ydoc/scripts/plugins/responsive-nav.min.js"></script><script src="../ydoc/scripts/plugins/slideout.min.js"></script><script src="../ydoc/scripts/app.js"></script><script src="../ydoc/ydoc-plugin-search/core.js"></script><script src="../ydoc/ydoc-plugin-search/search.js"></script><script src="../search_json.js"></script></body></html>