IT人如何打造個性化的個人網站（線上簡歷）

阿新 • • 發佈：2018-11-07

前言

眾所周知，IT行業人員在求職時，如果擁有自己的技術部落格和個人網站多少是可以加些分的，因為這也是IT人的技術證明之一。內容豐富的技術部落格就不必多少了，往往技術部落格大神市場上多是供不應求的，而且技術部落格出彩主要是在內容經營上，至於部落格本身直接到各大技術平臺註冊一個即可，當然有興趣的朋友想要自建個人部落格也不是很難，比如可以用非常流行的GitHub Pages進行搭建，最主要是可以免費。而個人網站是主要是用來展示資訊，功能比部落格系統要簡單的多，搭建過程比部落格系統也要容易的多，而且對執行環境的要求也特別簡單，很多時候只要瀏覽器即可開發和執行。接下來我們就來搭建一個線上簡歷型別的個人網站作為案例進行講解。喜歡這個模板的朋友也可以直接修改JSON檔案的個人資訊定製自己專屬的簡歷網站。

線上演示：http://139.196.87.48:9002/brilliant/

選擇模板

首先多多百度、谷狗一下，尋找到一款心儀的模板，注意關注一下模板使用的技術要適合自己為宜，以執行環境簡單為宜，最好是純HTML，只要一個瀏覽器就可以檢視。

如果是使用到bootstrap、vue、angular等相關技術的模板，就可能需要在修改或安裝部署的時候對相關技術有所瞭解了，下面是我模板之家找到的一款個人網站模板。

模板提供：模板之家

模板名稱：亮綠色前端工程師web簡歷模板

下載地址：http://www.cssmoban.com/cssthemes/7585.shtml

整個網站簡潔美觀，顏色清新，富有個性化，使用的技術也比較簡單，只要用瀏覽器就能直接檢視，很適合用來打造個人網站。

網站包含基礎資訊、工作經驗、教育經歷、專業技能、作品展示等模組，我們可以根據自己的需要進行適當新增、刪除和修改。

基礎資訊

基礎資訊頁面。

工作經驗

工作經驗頁面。

專業技能

專業技能頁面。

業務分析

1.為了方便定製資訊，我們決定把頁面展示資訊集中抽取到JSON檔案，頁面讀取JSON檔案資訊進行展示。

2.將資訊都抽取到JSON檔案，當我們需要定製或修改簡歷資訊的時候直接修改對應的JSON檔案即可生效。

3.一般我們除了中文簡歷，有時也需要用到英文簡歷，所以我們的目標還要能支援中英文簡歷可以切換。

4.根據需求增刪和修改模組，比如這裡我們刪除不需要的客戶評價，增加一個專案經驗的時間線型別模組。

抽取資訊

根據上面連結下載模板後，利用編輯器開啟下載好的專案。

專案結構非常簡單，主要是一個HTML檔案，一個CSS檔案。

我們新建兩個.json檔案，分別收集中英文簡歷的相關資訊。

讀取資訊

接下來我們從JSON檔案讀取資訊顯示到頁面。因為我們做中英文切換時需要改變頁面顯示，所以我們選用Vue來進行資料繫結。

另外由於有些瀏覽器的跨域限制，在讀取本地JSON檔案時會出現跨域問題，所以這裡需要借用客戶端跨域技術JSONP來處理。

下載Vue

下載 Vue.min.js ，放置到本地，如下圖所示。

引入Vue

開啟 index.html，在頁面直接引入就直接可以使用了。

當然如果不想下載，你也可以直接使用CDN.

下推薦國外比較穩定的兩個 CDN，國內還沒發現哪一家比較好，目前還是建議下載到本地。

Staticfile CDN（國內） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

載入JSON

首先在JSON檔案的外圍加上JSONP的回撥方法，如中文的加上 zh_cn({json info})。

然在在頁面新增一個 zh_cn 同名函式，這樣在json載入後，就會呼叫 zh_cn 這個函式。

zh_cn.json

en_us.json

然後在頁面引入兩個json檔案，注意引用語句必須放置在回撥函式之後。因為檔案載入成功之後會進行回撥，所以回撥函式得先存在。

<script src="assets/language/en_us.json"></script>
<script src="assets/language/zh_cn.json"></script>

兩個回撥方法，將中英文簡歷資訊載入並存入 localStorage，並且在初始化頁面和中英文切換時根據需求讀取中文或英文簡歷資訊。

    <script type="text/javascript">
        function en_us(data) {
            window.localStorage.setItem("en_us", JSON.stringify(data))
        }
        function zh_cn(data) {
            window.localStorage.setItem("zh_cn", JSON.stringify(data))
            var vm = new Vue({
                name: 'resume',
                el: '#container',
                data: {
                    lang:'zh_cn',
                    language:null,
                    basicInfo:null,
                    experiences:null,
                    projects:null,
                    education:null,
                    skills:null,
                    portfolio:null,
                    contact:null
                },
                methods: {
                    changeLanguage: function () {
                        var zh_cn = 'zh_cn'
                        var en_us = 'en_us'
                        if(this.lang == zh_cn) {
                            this.lang = en_us
                            this.language = "Chinese"
                        } else {
                            this.lang = zh_cn
                            this.language = "英文簡歷"
                        }
                        var data = window.localStorage.getItem(this.lang)
                        if(data != null) {
                            data = JSON.parse(data)
                            this.basicInfo = data.basicInfo
                            this.experiences = data.experiences
                            this.projects = data.projects
                            this.education = data.education
                            this.skills = data.skills
                            this.portfolio = data.portfolio
                            this.contact = data.contact
                        }
                    }
                },
                mounted:function(){
                    this.changeLanguage()
                }
            })
        }
    </script>

就這麼簡單，完成之後只需要修改JSON資訊就可以定製自己的網上簡歷了。定製完成直接丟到tomcat就可以了，伺服器連重啟都不用。

測試效果

中文簡歷

英文簡歷

專業技能

專案經驗

作品展示

原始碼下載

碼雲：https://gitee.com/liuge1988/brilliant

IT人如何打造個性化的個人網站（線上簡歷）

前言

選擇模板

基礎資訊

工作經驗

專業技能

業務分析

抽取資訊