beta.webcomponents.org是一個(gè)可以:
- 發(fā)布自己的自定義組件或組件集合
- 查看別人發(fā)布的自定義組件或組件集合
- 查看組件的readme、demo及API文檔
的網(wǎng)站。事實(shí)上Polymer的Element Catalog已經(jīng)會(huì)重定向到這里。
本文會(huì)介紹一下怎么在上面發(fā)布自己的組件。
Publish your element已經(jīng)很詳細(xì)地講解了如何發(fā)布及相關(guān)細(xì)節(jié),本文只是對(duì)其的翻譯、整理稚矿。
組件要求
你的組件必須符合下面要求:
- 使用開源許可。沒特殊要求的話可以直接使用非常自由的MIT捻浦;把寫好的許可文件保存在項(xiàng)目根目錄下的LICENSE就可以了晤揣。
- Tag & Release。你需要對(duì)你的項(xiàng)目打tag朱灿,最好是使用語意化版本昧识。
- Readme。你可以直接使用模板盗扒;另外webcomponents.org支持直接在Readme中顯示demo跪楞,這個(gè)我們會(huì)在下文提到缀去。
Release(打tag)步驟:
- checkout到合適的分支或commit,然后運(yùn)行
git tag [version]
甸祭,例如git tag v0.1.0
git push origin v0.1.0
發(fā)布缕碎!
完成上述的準(zhǔn)備后:
- 進(jìn)入Publish your element
- 找到中間的"Ready to publish?"
- 輸入github項(xiàng)目的地址,
[username]/[project_name]
- 勾選"I'm not a robot"
- 點(diǎn)擊Publish
Better Readme
下面是一些可選的功能池户。
添加徽章
到你的項(xiàng)目readme里咏雌,聲明這已經(jīng)是一個(gè)webcomponents.org發(fā)布的組件。
直接復(fù)制下面代碼到你的項(xiàng)目readme.md里煞檩。
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://beta.webcomponents.org/element/owner/my-element)
在Readme里顯示demo
Webcomponents.org可以在展現(xiàn)項(xiàng)目Readme的時(shí)候直接根據(jù)里面的代碼來顯示demo:
<!--
```
<custom-element-demo>
<template>
<link rel="import" href="my-element.html">
<next-code-block></next-code-block>
</template>
</custom-element-demo>
```
-->
```
<my-element></my-element>
```
HTML注釋內(nèi)的內(nèi)容就是最后會(huì)顯示的demo內(nèi)容处嫌;next-code-block
會(huì)將注釋下一段的例子代碼(my-element那段)生成在demo內(nèi)。
HTML注釋內(nèi)的內(nèi)容可以自由編輯斟湃,例如你想有一個(gè)特定高度的div來撐開body:
<div style="height: 200px">
<next-code-block></next-code-block>
</div