dumi之搭建博客提升影響力(良心之作)

簡介

dumi 是啥，啥是dumi，相信react的忠實粉，都有這麼幾個痛點：

1. 憋了幾年的技術和業務積累寫了一套貼合自身業務的組件庫。吭哧吭哧…終於寫完了。隊友：看不懂大溼的代碼啊。
   

emmm…好吧。這個函數是…這個class是…這個組件要…用。
好吧看來是時候整個文檔了。

搜索引擎啊，請你告訴我是一名優秀的程序員嗎？
搜索引擎：嗯，算…是吧。
我剛造了個火箭，他需要一本書起飛的說明書，幫我找個文檔工具吧，要react的。
搜索引擎：抱歉，你想要的，我給不了你。
你怎麼能這樣？

2. 做技術好多年了，走的時候是不是該留下點什麼？嗯 ，那就博客吧。來,用我最擅長的react自己的造一個.
   

不知不覺，幾年過去了…一入前端深似海啊…


我：    他來了,他來了，他身披金甲聖衣，腳踏七彩雲來娶我來了。
搜索引擎:       他？姓甚名誰？
我：    他就是dumi(嘟米)啊
搜索引擎:      嗯？一款基於 Umi 打造、爲組件開發場景而生的文檔工具，與 father 一起爲開發者提供一站式的組件開發體驗，father 負責構建，而 dumi 負責組件開發及組件文檔生成 。小夥子不錯，大有前途啊。我記下了。
（好了，接下來言歸正傳）

實踐

我們先用它來寫個博客,把之前的文章整理整理吧
首先得有 node，並確保 node 版本是 10.13 或以上。

1. 初始化一個站點模式的組件庫開發腳手架

npx @umijs/create-dumi-lib --site

2. 安裝依賴

cnpm i

3. 啓動項目

npm start

哇哇哇！！！ 驚豔到了… 果然是美美的。

項目結構簡介

既然是寫博客，做內容輸出，我們先來改吧改吧。

首先改下主頁的內容：

1. 打開 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)
---

2. 修改.umirc.ts如下

import { defineConfig } from 'dumi';

export default defineConfig({
  title: 'xxx的博客',
  mode: 'site',
  // more config: https://d.umijs.org/config
});

保存看效果：

首頁有了，我們得有內容吧？ ok ，某問題。

1. 添加菜單路由.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'],
      }
    ],
  }
});

2. 新建文件
   
   blog/sword/test.md

# 辟邪劍譜

欲練此功，必先.....先........

blog/eighteen/test.md

# 降龍十八掌

### 亢龍有悔

說着左腿微屈，右臂內彎，右掌劃了個圓圈，呼的一聲，向外推去，手掌掃到面前一棵松樹，喀喇一響，松 樹應手斷折。
他左手劃個半圓，右手一掌推出，正是生平得意之作“降龍十八掌”中的「亢龍有悔」。
大丑不及逃避，明知這一招不能硬接，卻也只得雙掌一併，奮力抵擋。

### 飛龍在天

洪七公把“降龍十八掌”中的第二招「飛龍在天」教了郭靖。
這一招躍起半空，居高下擊，威力奇大，郭靖花了三天工夫，方纔學會。

### 見龍在田

郭靖見他越逼越近，早有提防，當他右手離黃蓉身前尺許之際，左掌圓勁，右掌直勢，使招「見龍在田」，擋在黃蓉身前。
這一招純是防禦，卻是在黃蓉與漁人之間布了一道堅壁，敵來則擋，敵不至則消於無形。

### 潛龍勿用

郭靖暗叫：“不好！”全身已感痠麻，危急中右手屈起食中兩指，半拳半掌，向她胸口打去，那是「潛龍勿用」的半招，本來左手同時向裏鉤拿，右推左鉤，敵人極難閃避，現下左腕被拿，只得使了半招。

### 震驚百里

歐陽鋒叫聲：“好！”第二推又已迅速異常的趕到，前勁未衰，後勁繼至。
郭靖猛覺得勁風罩上身來，心知不妙，一招「震驚百里」，也是雙掌向前平推，這是降龍十八掌中威力極大的一招。

### 或躍在淵

這第二掌「或躍在淵」，卻再也不敢留力，吸一口氣，呼的一響，左掌前探，右掌倏地從左掌底下穿了出去，直擊他小腹。

### 突如其來

郭靖聽得她呼叫，精神忽振，左掌拍出，那是降龍十八掌中的第十一掌「突如其來」。

### 雙龍取水

郭靖剛從小艇艇首爬上甲板，眼見勢急，已自不及搶上相救，雙掌齊發，一招「雙龍取水」，猛擊歐陽鋒後腰

### 神龍擺尾

黎生聽得背後風響，衣上也已微有所感，就在這一瞬之間，反手橫劈，仍是剛纔使過的“降龍十八掌”中那一招「神龍擺尾」。

### 利涉大川、鴻漸於陸

郭靖連發兩招「利涉大川」、「鴻漸於陸」，將梅超風遠遠逼開，擡頭只見黃蓉繞着柱子而奔，連打手勢，一時還不明白。

### 密雲不雨

郭靖使一招「密雲不雨」，雙掌交替連拍，擊向裘千仞頭頂，左臂格開篙頭，身子續向敵船落去。

ok 保存最後我們來看效果。

怎麼樣是不是應有盡有…

ok，博客寫好了，我們得找臺服務器部署上去吧，正好某雲最近也在做大額的優惠活動，有需要的話可以選擇性購買。好了，話說回來根據dumi的官方文檔介紹，它是負責組件開發及組件文檔生成的一個工具，做博客是大才小用了。最後感謝dumi團隊的開源。
最後附上我的個人博客，歡迎各位大佬品嚐指導。

注：dumi(嘟米)官方文檔