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

前言

眾所周知，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

---

作者：朝雨憶輕塵
出處：https://www.cnblogs.com/xifengxiaoma/ 
版權所有，歡迎轉載，轉載請注明原文作者及出處。