『Others』markdown履歷制作

最近準備找實習，需要做一份履歷，這裡來介紹一些簡單的建立制作方法，都是一些很基礎的東西，還有一些部落客履歷制作中遇到的一些坑。

工具安裝

首先，部落客這裡使用的是Typora軟體來寫的履歷，我們就從它的下載下傳安裝開始。

點選下面連結下載下傳安裝包：

Typora官網

下載下傳連結

提取碼：w96j

下載下傳完成後，輕按兩下安裝包，無腦下一步就好。

安裝完成，打開效果如下：

履歷制作

因為我們制作履歷需要用到圖檔，而且圖檔還要放到右上角，是以一些簡單的markdown可能不太夠用，但是markdown可以内嵌html語言。是以我們使用html語言來書寫。

首先我們先導入一張圖檔，将其放到右上角。

<!--将圖檔設為浮動，在右邊-->
<div style="float:right">
	<!--設定圖檔路徑，設定顯示寬度為200-->
    <img src="./img.jpeg" width="200">
</div>
           

效果如下：

然後我們需要在圖檔的左邊開始寫入資訊，包括個人資訊等等。

<!--将圖檔設為浮動，在右邊-->
<div style="float:right">
	<!--設定圖檔路徑，設定顯示寬度為200-->
    <img src="./img.jpeg" width="200">
</div>
<!--文字資訊設為浮動，在左邊-->
<div style="float:left">
	<!--一級标題-->
    <h1>
        個人資訊
    </h1>
    <!--無序清單-->
    <ul>
        <li>姓名：綠谷出久</li>
        <li>性别：男</li>
        <li>職業：英雄</li>
        <li>偶像：歐爾麥特</li>
        <li>口頭禅：哈哈</li>
        <li>等等</li>
    </ul>
    <!--一級标題-->
    <h1>
        教育經曆
    </h1>
    <!--無序清單-->
    <ul>
        <li>雄英高中</li>
    </ul>
</div>
           

效果如下：

當左邊的文字和右邊的圖檔高度差不多時，我們再寫另外一個div，繼續完成下面的資訊。

<!--将圖檔設為浮動，在右邊-->
<div style="float:right">
	<!--設定圖檔路徑，設定顯示寬度為200-->
    <img src="./img.jpeg" width="200">
</div>
<!--文字資訊設為浮動，在左邊-->
<div style="float:left">
	<!--一級标題-->
    <h1>
        個人資訊
    </h1>
    <!--無序清單-->
    <ul>
        <li>姓名：綠谷出久</li>
        <li>性别：男</li>
        <li>職業：英雄</li>
        <li>偶像：歐爾麥特</li>
        <li>口頭禅：哈哈</li>
        <li>等等</li>
    </ul>
    <!--一級标題-->
    <h1>
        教育經曆
    </h1>
    <!--無序清單-->
    <ul>
        <li>雄英高中</li>
    </ul>
</div>

<!--建立一個div子產品-->
<div>
	<!--一級标題-->
    <h1>
        獲獎經曆
    </h1>
    <!--無序清單-->
    <ul>
        <li>雄英體育祭障礙物賽跑第一名；雄英體育祭障礙物賽跑第一名；雄英體育祭障礙物賽跑第一名；雄英體育祭障礙物賽跑第一名；雄英體育祭障礙物賽跑第一名</li>
        <li>雄英期末考試和爆豪勝己合作打敗歐爾麥特；雄英期末考試和爆豪勝己合作打敗歐爾麥特；雄英期末考試和爆豪勝己合作打敗歐爾麥特；雄英期末考試和爆豪勝己合作打敗歐爾麥特</li>
    </ul>
</div>
           

我們先來看效果：

但是這裡還有一個問題，我們将markdown導出為pdf看一下：

點選檔案，點選導出為pdf。

然後，選個儲存路徑，起個名字，點選儲存。

導出PDF成功。

我們打開PDF來看一下：

從上述效果可以看出，我們期望的建立的div塊應該在上面兩個div塊的下方，但是它跑到了兩個塊的中間，這是不行的，下面是解決方案：

<!--将圖檔設為浮動，在右邊-->
<div style="float:right">
	<!--設定圖檔路徑，設定顯示寬度為200-->
    <img src="./img.jpeg" width="200">
</div>
<!--文字資訊設為浮動，在左邊-->
<div style="float:left">
	<!--一級标題-->
    <h1>
        個人資訊
    </h1>
    <!--無序清單-->
    <ul>
        <li>姓名：綠谷出久</li>
        <li>性别：男</li>
        <li>職業：英雄</li>
        <li>偶像：歐爾麥特</li>
        <li>口頭禅：哈哈</li>
        <li>等等</li>
    </ul>
    <!--一級标題-->
    <h1>
        教育經曆
    </h1>
    <!--無序清單-->
    <ul>
        <li>雄英高中</li>
    </ul>
</div>

<!--建立一個div子產品-->
<div style="display:inline-block">
	<!--一級标題-->
    <h1>
        獲獎經曆
    </h1>
    <!--無序清單-->
    <ul>
        <li>雄英體育祭障礙物賽跑第一名</li>
        <li>雄英期末考試和爆豪勝己合作打敗歐爾麥特</li>
    </ul>
    <!--剩下内容在這個div塊裡補充即可-->
</div>
           

注意，建立的div塊要和上面的兩個div塊代碼之間留一行空行，建立的div style設定為"display:inline-block"。前面兩個div塊代碼之間沒有空行。

按照上面修改後，我們再導出為pdf看一下效果：

現在就正常了。

最後，在用Markdown寫履歷的時候，有可能在最後導出為pdf時照片丢失，這裡有一個解決方法：

首先使用線上工具将圖檔轉碼至base64編碼。

圖檔轉base64編碼

打開網頁如下：

點選選擇要轉換成base64的圖檔，就得到了base64編碼：

将紅框内的内容全選，然後複制。

<!--将圖檔設為浮動，在右邊-->
<div style="float:right">
	<!--設定圖檔路徑，設定顯示寬度為200-->
    <img src="./img.jpeg" width="200">
</div>
           

然後用複制的内容去替換./img.jpeg即可。這樣轉成pdf圖檔就不會丢失了。

注意：使用"display:inline-block"後會導緻上下兩個div塊之間多一個空行，間隙會變大，可以使用相對定位，将下面的div塊向下移動15個像素即可（這裡不知道為什麼是向下移動，這個是部落客試出來的，有懂的歡迎留言）。

<div style="position:relative;bottom:15">
</div>
           

最後，将履歷制作的無注釋源碼放在下面，需要的自取：

<div>
	<div style="float:right">
    	<img src="./img.jpeg" width="200">
	</div>
	<div style="float:left">
    	<h1>
        	個人資訊
    	</h1>
    	<ul>
        	<li>姓名：綠谷出久</li>
        	<li>性别：男</li>
        	<li>職業：英雄</li>
        	<li>偶像：歐爾麥特</li>
        	<li>口頭禅：哈哈</li>
        	<li>等等</li>
    	</ul>
    	<h1>
        	教育經曆
    	</h1>
    	<ul>
        	<li>雄英高中</li>
    	</ul>
	</div>
</div>
<div style="display:inline-block;position:relative;bottom:15px">
    <h1>
        獲獎經曆
    </h1>
    <ul>
        <li>雄英體育祭障礙物賽跑第一名；雄英體育祭障礙物賽跑第一名；雄英體育祭障礙物賽跑第一名；雄英體育祭障礙物賽跑第一名；雄英體育祭障礙物賽跑第一名</li>
        <li>雄英期末考試和爆豪勝己合作打敗歐爾麥特；雄英期末考試和爆豪勝己合作打敗歐爾麥特；雄英期末考試和爆豪勝己合作打敗歐爾麥特；雄英期末考試和爆豪勝己合作打敗歐爾麥特</li>
    </ul>
</div>
           

最後，如果需要貼上自己的部落格或者GitHub連結的，可以使用下面文法：

<!--無序清單-->
<ul>
	<li>GitHub：<a href="https://github.com/sss-0916">https://github.com/sss-0916</a></li>        
	<li>技術部落格：<a href="https://blog.csdn.net/sss_0916">https://blog.csdn.net/sss_0916</a></li>    
</ul>
           

效果如下：

如果不想要這個下劃線，代碼改成如下即可：

<!--無序清單-->
<ul>
	<li>GitHub：<a href="https://github.com/sss-0916" style="text-decoration:none">https://github.com/sss-0916</a></li>
	<li>技術部落格：<a href="https://blog.csdn.net/sss_0916" style="text-decoration:none">https://blog.csdn.net/sss_0916</a></li>
</ul>
           

效果如下：

我們經常去面試給面試官的都是紙質履歷，是以上面的連結點不了，我們可以将連結生成二維碼貼到履歷上，隻需手機一掃，就可以進入。

• 首先，我們進入二維碼生成網站。

  二維碼生成

• 效果如下，我們點選網址，網址靜态碼，點選LOGO，上傳LOGO。

  

• 也可以不上傳LOGO，效果如下：

  

• 下面是一個LOGO下載下傳網站。

  LOGO下載下傳網站

• 使用LOGO效果如下。

  

• 我使用的CSDN和GitHub LOGO如下。

  我使用的LOGO

  提取碼：7cei

下面是我生成的兩個二維碼效果圖：

• CSDN二維碼：

  

• GitHub二維碼：