因?yàn)橐恍﹤€(gè)人原因自己選擇了辭職贯涎，那這時(shí)候免不了要研究簡(jiǎn)歷怎么寫了芹敌。但是想到之前每次維護(hù)簡(jiǎn)歷杖挣，總感覺挺麻煩的肩榕，為了解決這個(gè)問題，索性這次造個(gè)輪子專門用來(lái)維護(hù)簡(jiǎn)歷惩妇。
成果
最終實(shí)現(xiàn)的成果就我個(gè)人而言還是比較滿意的株汉，每次只需要：修改 markdown --> 提交到 Github 兩步操作，剩下的啥都不用管屿附，過個(gè)幾分鐘在線版簡(jiǎn)歷就自動(dòng)更新了郎逃，并且 PDF 也是自動(dòng)生成的最新版，最主要的是再也不怕簡(jiǎn)歷丟了～
項(xiàng)目介紹
markdown-to-resume
Markdown 轉(zhuǎn)個(gè)人簡(jiǎn)歷挺份。
特性
- 基于 Vite 的開發(fā)褒翰、簡(jiǎn)歷預(yù)覽、打包的絲滑體驗(yàn)
- 生成 HTML匀泊、PDF
- 基于 Github Actions 實(shí)現(xiàn)的 Github Pages 自動(dòng)部署以及 PDF 自動(dòng)生成
使用方式
- Fork 本倉(cāng)庫(kù)
https://github.com/yuexiaoliang/markdown-to-resume/fork并 Clone优训。 - 安裝依賴
pnpm install。 - 運(yùn)行
pnpm dev各聘。 - 修改
src/resume.md揣非。 - 倉(cāng)庫(kù)中增加名為 ACTION_TOKEN 的 Actions secrets，參考：Actions生成 secrets躲因。
- 修改
.github/workflows/gh-pages.yml第 48 行為 Github Pages 要綁定的自定義域名早敬，或刪除 46 - 48 行忌傻。 - 提交代碼。
- 啟用并運(yùn)行名為 gh-pages 的 Actions搞监。
- 開啟倉(cāng)庫(kù)的 Github Pages水孩。
如果一切順利，恭喜你已經(jīng)可以了~
配置
配置文件： vite.config.js
所有配置都需要在 Vite 的插件配置中進(jìn)行琐驴，目前支持的配置如下：
import { defineConfig } from 'vite';
import resumeBuild from './src/plugin';
import markdownItImsize from 'markdown-it-imsize';
export default defineConfig({
base: './',
plugins: [
resumeBuild({
// 對(duì) markdown-it 的實(shí)例進(jìn)行配置
markdown(md) {
// 增加一個(gè) markdown-it 插件
md.use(markdownItImsize);
},
// 生成的 PDf 名稱
pdfName: '岳曉亮個(gè)人簡(jiǎn)歷',
// PDF 的邊距俘种，會(huì)被 `@page { margin: 0px; }` 樣式覆蓋
pdfMargin: 0,
// 生成的 HTML 的 Title
webTitle: '岳曉亮個(gè)人簡(jiǎn)歷 - markdown-to-resume'
})
]
});
Markdown 編寫
本項(xiàng)目使用 markdown-it 進(jìn)行解析，并且默認(rèn)安裝了某些 markdown-it 插件對(duì) Markdown 進(jìn)行語(yǔ)法增強(qiáng)绝淡。
markdown-it-container
增強(qiáng)布局
使用前：
<!-- render after -->
# 岳曉亮
求職意向：高級(jí)前端 / 25K / 北京
<!-- render before -->
<h1>岳曉亮</h1>
<p>求職意向：高級(jí)前端 / 25K / 北京</p>
使用后：
<!-- render after -->
:::
# 岳曉亮
求職意向：高級(jí)前端 / 25K / 北京
:::
<!-- render before -->
<div class="container">
<h1>岳曉亮</h1>
<p>求職意向：高級(jí)前端 / 25K / 北京</p>
</div>
markdown-it-attrs
添加 html 屬性宙刘，如：class 、 id牢酵。
使用前：
<!-- render after -->
:::
# 岳曉亮
求職意向：高級(jí)前端 / 25K / 北京
:::
<!-- render before -->
<div class="container">
<h1>岳曉亮</h1>
<p>求職意向：高級(jí)前端 / 25K / 北京</p>
</div>
使用后：
<!-- render after -->
::: {.header}
# 岳曉亮 {.name}
求職意向：高級(jí)前端 / 25K / 北京
:::
<!-- render before -->
<div class="header">
<h1 class="name">岳曉亮</h1>
<p>求職意向：高級(jí)前端 / 25K / 北京</p>
</div>
