打造一份網(wǎng)頁版簡(jiǎn)歷

時(shí)間：2023-09-22 03:48:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-22 03:48:01 來源：網(wǎng)站運(yùn)營

打造一份網(wǎng)頁版簡(jiǎn)歷：多年前，因?yàn)閾Q工作的需要，我得更新簡(jiǎn)歷。但可能是寫慣了CSS的緣故，在Word中排版實(shí)在是各種不順手，于是就發(fā)揮了作為前端工程師的優(yōu)勢(shì)，把簡(jiǎn)歷做成了網(wǎng)頁。久而久之，這份簡(jiǎn)歷就成為了我的個(gè)人產(chǎn)品，無論是否需要再找工作，每隔一段時(shí)間我都會(huì)進(jìn)行更新迭代。

網(wǎng)頁版簡(jiǎn)歷有以下這些好處：

• 無須下載，直接打開；
• 內(nèi)容展示形式更豐富，排版更靈活；
• 可以展示自己的技術(shù)能力；
• 可以通過超鏈接訪問外部資源（如個(gè)人作品）；
• 可以讓自己登上搜索引擎的榜單（SEO）。

在此基礎(chǔ)上，我還給這份簡(jiǎn)歷定下了一個(gè)重要目標(biāo)——「Write once, run anywhere」。兼容PC、手機(jī)和平板設(shè)備，還可以通過瀏覽器直接打印。

本文將從技術(shù)角度描述這樣一份簡(jiǎn)歷的開發(fā)過程。

設(shè)計(jì)

說到設(shè)計(jì)，很多程序員會(huì)喊：“我是寫代碼的，不懂設(shè)計(jì)?！钡自捳f得好：沒吃過豬肉，總見過豬跑吧。平時(shí)看過這么多網(wǎng)頁，還跟大量產(chǎn)品設(shè)計(jì)稿打交道?？吹讲季趾线m的，抄一下；看到配色合適的，抄一下；看到素材合適的，也抄一下。值得注意的是，近年來有一類頁面特別適合改造成個(gè)人簡(jiǎn)歷，那就是手機(jī)廠商每發(fā)布一款新手機(jī)都會(huì)做的手機(jī)宣傳頁。我自己的簡(jiǎn)歷設(shè)計(jì)就是借鑒了iPhone的宣傳頁。

此外，大家可能見過下面這兩種比較吸引眼球的簡(jiǎn)歷：

• 游戲式： http://rleonardi.com/interactive-resume/ 。
• 敲代碼式： http://strml.net/ 。

然而，嘗完鮮之后你會(huì)發(fā)現(xiàn)，它們的問題也很突出：

• 那個(gè)采用游戲交互的簡(jiǎn)歷，其實(shí)沒什么實(shí)質(zhì)內(nèi)容。
• 那個(gè)采用敲代碼交互的簡(jiǎn)歷，你確定招聘者愿意花這么多時(shí)間去等它敲完？

更重要的是，這種形式的頁面打印出來是亂七八糟的。所以筆者并不建議把簡(jiǎn)歷做成這樣。

隱私保護(hù)

簡(jiǎn)歷上涉及隱私的信息，無非就是姓名和各種聯(lián)系方式（身份證號(hào)、出生日期什么的就沒必要寫了）。那么這里說的保護(hù)，主要為了防止不必要的騷擾（騷擾電話、垃圾郵件等）。

保護(hù)措施包括：

• 有針對(duì)性地隱藏信息，不要讓所有人都看到；
• 對(duì)信息進(jìn)行“加密”輸出，避免被爬蟲抓取。

隱藏信息可以通過網(wǎng)頁URL參數(shù)來控制，有參數(shù)時(shí)顯示隱私信息，沒有時(shí)則隱藏（注意只把帶參數(shù)的URL發(fā)給信任的人）。示例代碼如下：

// URL是否帶有privacy參數(shù)（例如「http://abc.com?privacy」）var showPrivacy = /[?&]privacy=?(&|$)/.test(window.location.search);document.write(showPrivacy ? '張三' : '張先生');而“加密”信息的方法，則多了去了，例如：

['me', 'abc', 'com'].join('.').replace('.', '@'); // "me@abc.com"['a13800b', 'c138000d'].join('').replace(/[a-z]/g, ''); // "13800138000"甚至，你可以把這些信息做成圖片。

適配PC和移動(dòng)設(shè)備

一個(gè)頁面適配多種設(shè)備，對(duì)前端開發(fā)工程師來說并不陌生。

首先是通過媒體查詢?cè)诓煌拇翱趯挾认虏捎貌煌牟季帧?br>
其次，處理高分屏下圖片的清晰度問題。鑒于「image-set」、「src-set」的兼容性還不是那么好，解決方案有兩種：

• 用兩倍或三倍大小的原圖，再通過CSS縮小。主要用于內(nèi)容圖片，比如作品的截圖。
• 使用SVG格式的圖片。主要用于設(shè)計(jì)素材，比如一些小圖標(biāo)。

最后，不要忘了貼上簡(jiǎn)歷URL的二維碼，方便移動(dòng)設(shè)備直接掃碼訪問。

打印

打印機(jī)也是一種設(shè)備，可以通過媒體查詢適配。但是適配之前，要先搞清楚打印機(jī)的世界是怎么樣的。

A4紙的尺寸是寬21cm、高29.7cm，但是如果你用Chrome把頁面存成PDF（在打印的界面可以存）之后，看到的分辨率是寬595px、高842px。研究了一番之后，我發(fā)現(xiàn)這是按72ppi（Pixels Per Inch，即一英寸所含的像素?cái)?shù)）換算的：

1in = 2.54cm
21cm / 2.54cm * 72px ≈ 595px
29.7cm / 2.54cm * 72px ≈ 842px

在595px這個(gè)寬度下，按照屏幕適配的規(guī)則，會(huì)采用小屏設(shè)備的布局。然而，A4紙的空間比小屏設(shè)備的屏幕要大得多，并不適合采用這樣的布局，所以就需要大量調(diào)整樣式。在這過程中，踩進(jìn)了一個(gè)坑：

@media not print and (max-width: 639px) { /* ... */}上面的媒體查詢代碼，表達(dá)的并非「不是打印設(shè)備并且寬度不超過639px」，而是「不是寬度不超過639px的打印設(shè)備」（關(guān)于這一點(diǎn)可以看看Mozilla的解釋說明）。

不過生人自有妙計(jì)，我們可以把媒體查詢改成嵌套式：

@media not print { @media (max-width: 639px) { /* ... */ }}結(jié)果又掉進(jìn)了另一個(gè)坑，有些舊內(nèi)核的瀏覽器并不支持嵌套媒體查詢。就這樣折騰了一番之后發(fā)現(xiàn)，根據(jù)不同的設(shè)備應(yīng)用不同的樣式表文件才是最好的選擇：

<link href="./css/style.css" media="not print" rel="stylesheet" type="text/css" /><link href="./css/style-print.css" media="print" rel="stylesheet" type="text/css" />那么打印的樣式要怎么寫呢？首先是「@page」，可以用來修改頁面容器的版式，最常用的是指定頁面的尺寸及邊距：

@page { size: A4 portrait; margin: 2.1cm 1.9cm;}其次，某些瀏覽器默認(rèn)是不打印背景色和背景圖片的。對(duì)于Chrome，可以加上這段CSS代碼強(qiáng)制打印背景（對(duì)其他瀏覽器來說，暫時(shí)沒有辦法）：

body { -webkit-print-color-adjust: exact; }再次，根據(jù)需要處理鏈接。要知道打印出來之后，用手指往紙上戳是打不開網(wǎng)頁的。如果你想讓別人看到鏈接地址，也可以通過CSS將其輸出到頁面上，例如：

a:after { content: '[' attr(href) ']'; }最后，紙質(zhì)簡(jiǎn)歷的篇幅不宜過長(zhǎng)，可以選擇性地隱藏一些內(nèi)容。CSS部分：

/* style.css */.only-for-print { display: none; }/* style-print.css */.not-for-print { display: none; }HTML部分：

<div class="not-for-print">這是非打印版</div><div class="only-for-print">這是打印版</div>順帶一提，以上所說的這些做法都不兼容IE6- 8等舊瀏覽器，但是打印店可能還在用XP系統(tǒng)，所以輸出個(gè)pdf文件去打印是比較保險(xiǎn)的。

構(gòu)建

作為一名現(xiàn)代前端開發(fā)工程師，簡(jiǎn)歷怎么能少了構(gòu)建這一步呢？雖然只有一個(gè)頁面，但是該做的還是得做。以我自己的簡(jiǎn)歷為例，沒有外部JavaScript腳本（保護(hù)隱私的邏輯就直接寫在頁面上了）、也沒有用Sass等動(dòng)態(tài)樣式語言，因此只需要一些基本的構(gòu)建（文件名添加Hash、壓縮CSS代碼、壓縮HTML代碼等）。

首先，整理一下文件結(jié)構(gòu)：

• src/ 源代碼文件夾
• dist/ 發(fā)布文件夾
• webpack.config.js 公用構(gòu)建邏輯
• webpack.dev.config.js 開發(fā)環(huán)境構(gòu)建邏輯
• webpack.prod.config.js 生產(chǎn)環(huán)境構(gòu)建邏輯
• package.json

構(gòu)建用到的npm包如下：

"devDependencies": { "autoprefixer": "^9.1.5", "css-loader": "^1.0.0", "cssnano": "^4.1.0", "extract-loader": "^2.0.1", "file-loader": "^1.1.11", "html-webpack-plugin": "^3.2.0", "postcss-loader": "^3.0.0", "webpack": "^4.16.4", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.5"}公共構(gòu)建邏輯如下：

const path = require('path');module.exports = { entry: [ './src/main.js' ], output: { path: path.resolve(__dirname, './dist') }, module: { rules: [ { test: //.css$/, use: [{ loader: 'file-loader', options: { name: '[name].[hash:8].[ext]', outputPath: 'assets/', publicPath: '/assets/' } }, 'extract-loader', 'css-loader', 'postcss-loader'] }, { test: //.(jpg|png|gif|svg)$/, use: { loader: 'file-loader', options: { name: '[name].[hash:8].[ext]', outputPath: 'assets/', publicPath: '/assets/' } } } ] }};上文提過，頁面沒有用到外部JavaScript，但是entry又寫了「main.js」。其實(shí)這個(gè)js文件是空的，它的作用是：

• Webpack的entry不能為空，無論如何都得設(shè)一個(gè)入口；
• 如果沒有入口js，「webpack-dev-server」也就無法注入熱更新的邏輯。

接下來看看開發(fā)環(huán)境的構(gòu)建邏輯：

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const config = require('./webpack.config.js');module.exports = Object.assign({ mode: 'development', plugins: [ new HtmlWebpackPlugin({ template: './src/index.ejs', inject: true, minify: { collapseWhitespace: true } }) ], devServer: { compress: true, overlay: true, port: 4550 }}, config);為了構(gòu)建html文件，這里用到了「html-webpack-plugin」，并且要把html文件中對(duì)資源的引用改成模板占位符（ejs格式）：

<link href="<%= require('./css/style-v2.7.css') %>" media="not print" rel="stylesheet" type="text/css" /><link href="<%= require('./css/style-v2.7-print.css') %>" media="print" rel="stylesheet" type="text/css" />最后看看生產(chǎn)環(huán)境的構(gòu)建邏輯：

const config = require('./webpack.config.js');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = Object.assign({ mode: 'production', plugins: [ new HtmlWebpackPlugin({ template: './src/index.ejs', inject: false, minify: { collapseWhitespace: true } }) ]}, config);由于頁面沒有外部JavaScript，而且生產(chǎn)環(huán)境下也不需要「webpack-dev-server」，所以「inject」設(shè)成了false（仍然會(huì)生成main.js，只是沒有注入到頁面中）。

實(shí)例

見原文的實(shí)例部分。

后記

本文第一版發(fā)表于2015年中，于2018年10月底對(duì)內(nèi)容進(jìn)行了修改和完善，希望對(duì)廣大找工作的程序員同胞們有所幫助。

本文同時(shí)發(fā)表于作者個(gè)人博客： 打造一份網(wǎng)頁版簡(jiǎn)歷 | 前端開發(fā) | Heero's Blog 。