簡介
dumi 是啥,啥是dumi,相信react的忠實粉,都有這麼幾個痛點:
- 憋了幾年的技術和業務積累寫了一套貼合自身業務的組件庫。吭哧吭哧…終於寫完了。隊友:看不懂大溼的代碼啊。
emmm…好吧。這個函數是…這個class是…這個組件要…用。
好吧看來是時候整個文檔了。
搜索引擎啊,請你告訴我是一名優秀的程序員嗎?
搜索引擎:嗯,算…是吧。
我剛造了個火箭,他需要一本書起飛的說明書,幫我找個文檔工具吧,要react的。
搜索引擎:抱歉,你想要的,我給不了你。
你怎麼能這樣?
- 做技術好多年了,走的時候是不是該留下點什麼?嗯 ,那就博客吧。來,用我最擅長的react自己的造一個.
不知不覺,幾年過去了…一入前端深似海啊…
我: 他來了,他來了,他身披金甲聖衣,腳踏七彩雲來娶我來了。
搜索引擎: 他?姓甚名誰?
我: 他就是dumi(嘟米)啊
搜索引擎: 嗯?一款基於 Umi 打造、爲組件開發場景而生的文檔工具,與 father 一起爲開發者提供一站式的組件開發體驗,father 負責構建,而 dumi 負責組件開發及組件文檔生成 。小夥子不錯,大有前途啊。我記下了。
(好了,接下來言歸正傳)
實踐
我們先用它來寫個博客,把之前的文章整理整理吧
首先得有 node,並確保 node 版本是 10.13 或以上。
- 初始化一個站點模式的組件庫開發腳手架
npx @umijs/create-dumi-lib --site
- 安裝依賴
cnpm i
- 啓動項目
npm start
哇哇哇!!! 驚豔到了… 果然是美美的。
項目結構簡介
既然是寫博客,做內容輸出,我們先來改吧改吧。
首先改下主頁的內容:
- 打開
docs/index.md
修改如下
---
hero:
title: XXX的博客
desc: XXX的簡介
actions:
- text: 開始啓動
link: /blog
features:
- icon: https://gw.alipayobjects.com/zos/bmw-prod/881dc458-f20b-407b-947a-95104b5ec82b/k79dm8ih_w144_h144.png
title: Feature 1
desc: 高內聚
- icon: https://gw.alipayobjects.com/zos/bmw-prod/d60657df-0822-4631-9d7c-e7a869c2f21c/k79dmz3q_w126_h126.png
title: Feature 2
desc: 低耦合
- icon: https://gw.alipayobjects.com/zos/bmw-prod/d1ee0c6f-5aed-4a45-a507-339a4bfe076c/k7bjsocq_w144_h144.png
title: Feature 3
desc: 可伸縮
footer: Open-source MIT Licensed | Copyright © 2020<br />Powered by [dumi](https://d.umijs.org)
---
- 修改
.umirc.ts
如下
import { defineConfig } from 'dumi';
export default defineConfig({
title: 'xxx的博客',
mode: 'site',
// more config: https://d.umijs.org/config
});
保存看效果:
首頁有了,我們得有內容吧? ok ,某問題。
- 添加菜單路由
.umirc.ts
import { defineConfig } from 'dumi';
export default defineConfig({
title: 'xxx的博客',
mode: 'site',
menus: {
'/blog': [
{
title: '簡介',
},{
title: '辟邪劍譜',
children: ['blog/sword/test'],
},{
title: '降龍十八掌',
children: ['blog/eighteen/test'],
}
],
}
});
- 新建文件
blog/sword/test.md
# 辟邪劍譜
欲練此功,必先.....先........
blog/eighteen/test.md
# 降龍十八掌
### 亢龍有悔
說着左腿微屈,右臂內彎,右掌劃了個圓圈,呼的一聲,向外推去,手掌掃到面前一棵松樹,喀喇一響,鬆 樹應手斷折。
他左手劃個半圓,右手一掌推出,正是生平得意之作“降龍十八掌”中的「亢龍有悔」。
大丑不及逃避,明知這一招不能硬接,卻也只得雙掌一併,奮力抵擋。
### 飛龍在天
洪七公把“降龍十八掌”中的第二招「飛龍在天」教了郭靖。
這一招躍起半空,居高下擊,威力奇大,郭靖花了三天工夫,方纔學會。
### 見龍在田
郭靖見他越逼越近,早有提防,當他右手離黃蓉身前尺許之際,左掌圓勁,右掌直勢,使招「見龍在田」,擋在黃蓉身前。
這一招純是防禦,卻是在黃蓉與漁人之間布了一道堅壁,敵來則擋,敵不至則消於無形。
### 潛龍勿用
郭靖暗叫:“不好!”全身已感痠麻,危急中右手屈起食中兩指,半拳半掌,向她胸口打去,那是「潛龍勿用」的半招,本來左手同時向裏鉤拿,右推左鉤,敵人極難閃避,現下左腕被拿,只得使了半招。
### 震驚百里
歐陽鋒叫聲:“好!”第二推又已迅速異常的趕到,前勁未衰,後勁繼至。
郭靖猛覺得勁風罩上身來,心知不妙,一招「震驚百里」,也是雙掌向前平推,這是降龍十八掌中威力極大的一招。
### 或躍在淵
這第二掌「或躍在淵」,卻再也不敢留力,吸一口氣,呼的一響,左掌前探,右掌倏地從左掌底下穿了出去,直擊他小腹。
### 突如其來
郭靖聽得她呼叫,精神忽振,左掌拍出,那是降龍十八掌中的第十一掌「突如其來」。
### 雙龍取水
郭靖剛從小艇艇首爬上甲板,眼見勢急,已自不及搶上相救,雙掌齊發,一招「雙龍取水」,猛擊歐陽鋒後腰
### 神龍擺尾
黎生聽得背後風響,衣上也已微有所感,就在這一瞬之間,反手橫劈,仍是剛纔使過的“降龍十八掌”中那一招「神龍擺尾」。
### 利涉大川、鴻漸於陸
郭靖連發兩招「利涉大川」、「鴻漸於陸」,將梅超風遠遠逼開,擡頭只見黃蓉繞着柱子而奔,連打手勢,一時還不明白。
### 密雲不雨
郭靖使一招「密雲不雨」,雙掌交替連拍,擊向裘千仞頭頂,左臂格開篙頭,身子續向敵船落去。
ok 保存最後我們來看效果。
怎麼樣是不是應有盡有…
ok,博客寫好了,我們得找臺服務器部署上去吧,正好某雲最近也在做大額的優惠活動,有需要的話可以選擇性購買。好了,話說回來根據dumi的官方文檔介紹,它是負責組件開發及組件文檔生成的一個工具,做博客是大才小用了。最後感謝dumi團隊的開源。
最後附上我的個人博客,歡迎各位大佬品嚐指導。