Ka taea e koe te kaupapa puna tuwhera pai rawa atu, engari ki te kore he tuhinga pai, karekau pea e rere. I roto i te tari, ko nga tuhinga pai ka aukati i a koe ki te whakautu i nga patai ano. Ko nga tuhinga ka whakarite kia mohio nga tangata ki te kaupapa mena ka wehe nga kaimahi matua i te kamupene, ka huri ranei nga mahi. Ko nga aratohu ora ka awhina i te pono o nga raraunga.
Mena ka hiahia koe ki te tuhi i nga tuhinga roa, ko Markdown he waahanga pai ki te HTML. I etahi wa kaore e ranea te wetereo Markdown. I tenei keehi ka taea e tatou te whakamahi HTML i roto. Hei tauira, nga huānga ritenga. Na reira, ki te hanga koe i tetahi punaha hoahoa me nga waahanga paetukutuku taketake, ka ngawari te whakauru ki roto i nga tuhinga tuhinga. Mena kei te whakamahi koe i te React (tetahi anga JSX ranei penei i a Preact, i te Vue ranei), ka taea e koe te mahi pera me MDX.
He tirohanga whanui tenei tuhinga mo nga taputapu mo te tuhi tuhinga me te hanga aratohu. Ehara i te katoa o nga taputapu kua whakarārangihia ki konei e whakamahi ana i te MDX, engari kei te piki haere ki roto i nga taputapu tuhinga.
He aha te MDX?
kōnae .mdx he rite tonu te wetereo ki a Markdown, engari ka taea e koe te kawemai i nga waahanga JSX tauwhitiwhiti me te whakauru ki roto i to ihirangi. Ko te tautoko mo nga waahanga Vue kei te alpha. Hei timata ki te mahi me te MDX, me whakauru noa "Waihanga React App". He monomai mo Next.js me Gatsby. Ko te putanga o muri mai o Docusaurus (putanga 2) ka whai tautoko tangata whenua ano.
Te tuhi tuhinga me Docusaurus
I tuhi a Docusaurus ki runga Facebook. Ka whakamahia i runga i nga kaupapa puna tuwhera katoa engari ko React. I waho o te kamupene e whakamahia ana e Redux, Prettier, Gulp me Babel.
Nga kaupapa e whakamahi ana i te Docusaurus.
Ka taea te whakamahi Docusaurus ki te tuhi tetahi tuhinga, ehara i te mea hei whakaahua i te pito o mua. He React kei raro i te awhi, engari kaore koe e mohio ki te whakamahi. Ka tangohia e koe nga konae Markdown, he tohu makutu me te pai o te hanganga, te whakatakotoranga me nga tuhinga panui me te hoahoa ataahua kua rite.
I runga i te paetukutuku Redux ka kite koe i te tauira paerewa Docusaurus
Ko nga paetukutuku i hangaia me Docusaurus ka taea hoki te whakauru i tetahi blog a Markdown. Ka hono tonu a Prism.js mo te miramira wetereo. Ahakoa te mea i puta tata mai a Docusaurus, i mohiotia ko te taputapu pai rawa atu o 2018 i runga i StackShare.
Ētahi atu Kōwhiringa Waihanga Ihirangi
Ko Docusaurus he mea hanga motuhake mo te hanga tuhinga. Ae ra, kotahi miriona me te kotahi nga huarahi ki te hanga paetukutuku - ka taea e koe te toha i to ake otinga ki tetahi reo, CMS, ki te whakamahi ranei i tetahi kaihanga pae pateko.
Hei tauira, ko nga tuhinga mo te React, te punaha hoahoa IBM, Apollo me te Ghost CMS e whakamahi ana i a Gatsby - he kaihanga pae pateko e whakamahia ana mo nga rangitaki. Mena ka mahi tahi koe me Vue, ko VuePress he whiringa pai mo koe. Ko tetahi atu whiringa ko te whakamahi i te miihini kua tuhia ki te Python - MkDocs. He puna tuwhera me te whirihora ma te whakamahi i te konae YAML kotahi. He pai ano te GitBook, engari he kore utu noa mo nga roopu whanui me nga roopu kore-arumoni. Ka taea hoki e koe te tuku noa i nga konae mardown ma te whakamahi i a Git ka mahi tahi me ratou i Github.
Tuhituhi i nga waahanga: Docz, Puka Korero me te Kaitohutohu
Aratohu, hoahoa punaha, whare pukapuka waahanga - ahakoa ka kiia e koe, kua tino paingia inaianei. Ko te taenga mai o nga anga waahanga penei i te React me nga taputapu kua whakahuahia i konei kua huri mai i nga kaupapa horihori hei taputapu whai hua.
He rite tonu nga mahi a Puka Korero, Docz me Styleguidist: whakaatu i nga huānga tauwhitiwhiti me te tuhi i o raatau API. Ka taea e tetahi kaupapa te maha, rau rau ranei nga waahanga - he rereke nga ahuatanga me nga ahuatanga katoa. Mena kei te hiahia koe kia whakamahia ano nga waahanga, me mohio nga tangata kei te noho tonu. Ki te mahi i tenei, tuhia noa nga waahanga. Ka whakaratohia e nga aratohu he tirohanga ngawari ki te rapu mo o waahanga katoa. Ka awhina tenei ki te pupuri i te ahua o te tirohanga me te karo i nga mahi tukurua.
Ko enei taputapu he huarahi watea ki te tiro i nga ahuatanga rereke. He uaua pea ki te whakaputa i ia ahua o tetahi waahanga i roto i te horopaki o te tino tono. Engari ki te paato i te tono tuuturu, he pai ki te whakawhanake i tetahi waahanga motuhake. Ka taea te whakatairite i nga ahuatanga uaua ki te toro atu (pēnei i nga whenua uta).
I te taha o te whakaaturanga ataata o nga momo whenua me te rarangi o nga rawa, me tuhi he whakamaarama whanui mo nga ihirangi - nga whakaaro hoahoa, nga keehi whakamahi, nga whakaahuatanga ranei o nga hua whakamatautau a nga kaiwhakamahi. He tino ngawari ki te ako a Markdown - ko te tikanga, me waiho nga aratohu hei rauemi tiritahi ma nga kaihoahoa me nga kaihanga. Ko Docz, Styleguidist, me te Puka Korero e tuku ana he huarahi ngawari ki te whakakotahi i a Markdown me nga waahanga.
Docz
I tenei wa ka mahi tahi a Docz me React, engari kei te haere tonu nga mahi ki te tautoko i nga waahanga Preact, Vue me te paetukutuku. Ko Docz te mea hou o nga taputapu e toru, engari kua kaha ki te kohikohi neke atu i te 14 nga whetu i runga i a Github. Ka whakauruhia e Docz nga waahanga e rua − <Playground> и < Props >. Ka kawemai, ka whakamahia i roto i nga konae .mdx.
import { Playground, Props } from "docz";
import Button from "../src/Button";
## You can _write_ **markdown**
### You can import and use components
<Button>click</Button>Ka taea e koe te takai i o ake waahanga React me <Playground>ki te hanga i tetahi tairitenga o te CodePen i hangaia, CodeSandbox ranei - ara, ka kite koe i to waahanga ka taea e koe te whakatika.
<Playground>
<Button>click</Button>
</Playground><Props> ka whakaatu i nga taonga katoa e waatea ana mo tetahi waahanga React, nga uara taunoa, me te mea e hiahiatia ana te taonga.
<Props of={Button} />Ko ahau ake, ka kite ahau ko tenei huarahi MDX he maamaa te maarama me te ngawari ki te mahi.
Mena he powhiriwhiri koe na te Gatsby kaihanga pae pateko, he pai te whakaurunga a Docz.
Aratohu kāhua
Ka rite ki a Docz, ka tuhia nga tauira ma te whakamahi i te tohu tohu Markdown. Ka whakamahi a Styleguidist i nga poraka waehere Markdown (toru korero) i roto i nga konae .md kōnae, ehara i te MDX.
```js
<Button onClick={() => console.log('clicked')>Push Me</Button>Ko nga poraka Waehere kei Markdown ka whakaatu noa i te waehere. I te wa e whakamahi ana i te Styleguidist, tetahi poraka waehere me te tohu reo js, jsx ranei javascript ka tukuna hei waahanga React. Pērā i a Docz, ka taea te whakatika te waehere - ka taea e koe te huri i ngā āhuatanga me te kite tonu i te hua.
Ka waihanga aunoatia e Styleguidist he ripanga taonga mai i nga PropTypes, Rere, Whakapuaki Kuputuhi ranei.
Kei te tautoko a Styleguidist i te React me te Vue.
Pukapuka Korero
Ko te pukapuka pakiwaitara e noho ana hei "taiao whanaketanga waahanga UI." Engari ki te tuhi i nga waahanga tauira ki roto i nga konae Markdown, MDX ranei, ka tuhi koe hītori i roto i nga konae Javascript. kōrero tuhia te ahua motuhake o tetahi waahanga. Hei tauira, ka whai hitori pea tetahi waahanga mo te ahua kua utaina me te ahua haua (hauora).
storiesOf('Button', module)
.add('disabled', () => (
<Button disabled>lorem ipsum</Button>
))He tino uaua ake te Puka Korero i a Styleguidist me Docz. Engari i te wa ano, koinei te waahanga tino rongonui; neke atu i te 36 nga whetu o te kaupapa i runga i Github. He kaupapa puna tuwhera me te 000 kaikohaoha me nga kaimahi wa-katoa. Ka whakamahia e Airbnb, Algolia, Atlassian, Lyft me Salesforce. He maha ake nga anga e tautokohia ana e te Puka Korero i nga kaiwhakataetae - React, React Native, Vue, Angular, Mithril, Ember, Riot, Svelte me HTML auau.
Hei te tukunga kei te heke mai ka puta nga ahuatanga mai i Docz me MDX ka whakaurua.
# Button
Some _notes_ about your button written with **markdown syntax**.
<Story name="disabled">
<Button disabled>lorem ipsum</Button>
</Story>Ka tere haere nga ahuatanga hou o te Puka Korero i roto i nga marama e whai ake nei, a, te ahua nei ka nui te anga whakamua.
Ngā putanga
Ko nga painga o te whare pukapuka tauira e whakanuia ana i roto i nga miriona tuhinga mo te Waenga. Ina oti pai, ka ngawari ake te hanga hua e pa ana me te pupuri i te tuakiri. Ko te tikanga, kaore tetahi o enei taputapu e hanga makutu i tetahi punaha hoahoa. Me whai whakaaro nui tenei ki te hoahoa me te CSS. Engari ka tae ki te wa ki te hanga i tetahi punaha hoahoa kia uru atu ki te kamupene katoa, Docz, Storybook me Styleguidist nga whiringa pai.
Mai i te kaiwhakamaori. Ko taku wheako tuatahi tenei mo Habré. Mena ka kitea e koe etahi he, he whakaaro ranei mo te whakapai ake i te tuhinga, tuhia mai ki a au i roto i te karere whaiaro.
Source: will.com