網站的準備——準備

這一段時間花了我大概兩個月。

遠遠超過我的預期。

本文寫完於2015-08-29。由於技術進步，其中的描述不一定適用於現在，請自行定奪。

上傳

先是Discuz和Typecho。它們的上傳挺簡單，把壓縮包上傳，然後在主機控制面板里解壓縮即可。難的是Typecho的插件和主題的上傳。阿里雲的FTP太差勁，總是出現421錯誤。每當FileZilla提示「421 There are too many connections from your internet address.」時，我都會有一種暈眩的感覺。關鍵是，我已經把並發連接數設為1、失敗後等待45秒再繼續傳輸、最大重試次數設為20了，而且我確定沒有別的連接，還是不行。

Typecho插件

Typecho插件的啟用也是個問題。我用的Typecho是1.0版的，有些插件還不支持：有些插件啟用後，編輯器的工具欄不見了；有些插件無法啟用，直接報404錯誤；有一個插件則是在網頁上方報錯，關鍵是，那個插件是計數插件，對於我選擇的主題來說非常重要（後來我找到了Stat的修改版，終於成功了)。

最讓人頭疼的是代碼的顯示插件。我想找到一個設置簡單、支持代碼多、好看的代碼顯示插件。最初找到的是Code Highlight，結果發現它很不適合我用的主題，有些字元甚至看不見了……苦逼啊……

DNSHH主題下使用Code Highlight後的效果

後來我又試了CodeBox插件，結果更慘不忍睹：

CodeBox的顯示效果

你在逗我嗎？！

然後我又試了好多插件，但都不滿意。有些插件居然要在編輯時在代碼前面添加你的代碼語言！這太反人類了！而且，我寫的代碼大多數都是HTML、CSS、PHP、JS混在一塊的，你讓我咋說？

後來我才知道，許多Markdown的渲染器都是這樣操作的……

現在，我暫時使用Syntax Highlighter，

同時，我發現有些插件有衝突，比如QRCode和JustArchives，前者會阻礙後者的運行。

Typecho主題

從接觸到Typecho開始，我就看上了Ben做的主題DNSHH，所以我用的主題是這個。

剛開始是從typecho.cc下的，1.1版。但是該版本無法設置圖片logo。我當時百思不得其解，ben-lab.com不就是用圖片作logo的嗎？後來才發現，該主題已經升級到1.2版了，那個版本可以設置圖片logo。於是我升級了。

然後就是導航欄的鏈接。我之前一直沒能解決這問題，後來在網上搜，一下子就找著了解決方法。但是，把代碼插到哪兒又是一個問題。經歷了長時間的嘗試與錯誤，我才找到了合適的地方插入。

此外，這款主題有一些小問題，如果你在用1.2版，請看我的文章：DNSHH 1.2版主題的一些小問題的解決方法 。

郵件

這一部分是最氣人的。在測試了Discuz和Typecho的郵件功能（當然Typecho是用插件來實現的）後，我生氣地發現，阿里雲的主機不支持郵件發送！目前也沒有好的解決方法，一年後再看吧，或許我會考慮換主機提供商。

實際上，一年後，我幾乎荒廢了這個網站……

Discuz

Discuz顯然比Typecho好弄：插件和模板都是從應用中心下的，毫無壓力。這或許就是我前幾天一直把心思用在Typecho的原因吧。但Discuz的設置太多太繁瑣，尤其是Rewrite規則（相比之下，Typecho的Rewrite規則設置沒讓我動一行代碼）。而且，Discuz的插件和模板再也不像我以前見到的那樣，現在付費的太多了，免費的又添加了很多限制，讓你不得不掏錢。所以找到好一點的免費模板和插件在現在變得很難。

但令我怎麼也想不到的是，通過備案後，Discuz的伺服器地址怎麼也改不回來了！我又因為誤操作把Discuz毀了，只好重裝。然後，苦逼的事情發生了：我需要一個個下載將近20款插件和2個主題！同時，因為我綁定了QQ，每安裝一次插件，都要驗證！我花了一個下午才把插件安裝完。

主頁

在《網站的準備——前期》中我已說過，我在此之前已經做了一系列網頁。但現在我又不想要了，於是我開始重新做主頁。

首先是歡迎頁面。在看到「翁天信 - Dandy Weng」這個個人網站的主頁後，我就決定做一個基於視差滾動的歡迎頁面。但翁天信對於這個效果的實現方法沒有講明（參見"我的個人主頁第五次改版介紹 | Dandy"s Blog"），而且我無法在網站的源代碼中找到實現這種效果的方法，所以我就瘋狂地找能夠實現視差滾動的插件。

這類插件比較多，但幾乎沒有一個能完全模擬網站中的視差滾動效果，而且絕大多數插件的效果糟糕的透頂。

我本來好不容易看中了One Page Scroll這個插件，還寫進去了網站內容，但我偶然間發現它不支持移動設備！我果斷放棄，但我再次尋找插件卻花了更長的時間，好在最終我找到了。

我最終找到的是 fullPage.js ——我之前差點把它排除，由於它用的jquery都是來自谷歌的，加上已知原因，所以無法顯示效果。但我發現，它還提供了一個純js版的，夠用了，效果挺好，我就用了。

我還對原代碼進行了一些修改，以開啟右邊的導航點，這樣不會讓人以為就一頁，我也就只能幫到這兒了。

把文字放進去了之後，我就著手找合適的背景圖片。第一張是公路圖片，第二張是幼芽的圖片，第三張是打開的窗戶的圖片，第四張不設圖片。

公路圖片好找，出來的結果一大堆。幼芽的圖片不太好找，我找了一個多小時。最難找的當屬打開的窗戶的圖片了，我在百度里找不著，又去國外的幾個圖片網站找，找了三個小時才找到一張好點的，但也不是我想要的打開的推拉窗——難道國外不興推拉窗？另外，關於窗戶的圖片挺多，但絕大多數都是關閉的窗戶，關於打開的窗戶的圖片看起來還不到千分之一，這讓我很納悶。

好不容易把整個歡迎頁面做完，第二天，我又發現，這個頁面在我的手機上顯示不正常……於是，我又苦逼地改代碼，終於讓它看起來正常了一些。由於JS載入時間有點長，歡迎頁內容在載入JS之前就被顯示出來，堆疊在一起，很難看。我又讓它事先不顯示，到JS載入完成之後再顯示出來（這個方法很管用，我在後來做「關於我」的頁面時也用到了這方法）。至此，歡迎頁面大功告成。大家可以欣賞一下（截圖時我把導航欄和導航點隱去了，以便宣傳）：

第一頁

第二頁

第三頁

第四頁

其實，我草草地主頁有一個原因：應付新浪的審核。詳情請見「社交網路連接與SEO」一章。

產品和實驗室

這個相對好做。主要問題就是在滾動圖上，弄了半天也沒法讓它自適應縮放。

404頁

我自己做了一個404圖片，個人感覺挺不錯。

我做的404圖片

我是不會告訴你，我最先想用PS做，但PS的鋼筆工具太難用了，於是我就用Flash做，累死人了！但最終還要放到PS中去掉白色填充、改變線條顏色。

然後我花了三個多小時做好了404頁，並設置好。但這時候出了很大的問題：404頁的圖片顯示不了了！後來，我發現，404頁中不能用相對於文檔的路徑。我將圖片地址改為相對於伺服器的路徑後，問題解決了。

以下是404頁的效果圖：

404頁效果圖

但Typecho無法與別的平台共享404頁，我只好將相同的代碼複製到404.php中。

Typecho背景圖片

我有一個網點本，用來做設計的。我原本想掃描上面的圖像作為背景的，但最終我還是用PS模擬上面的圖像作為背景，這樣顯得更乾淨。

但這也是極其麻煩的。首先，我需要確定背景色。首先，我想的是米黃色，並輕易地搜到了它的顏色代碼。但當我用該顏色填充背景時，感覺不對勁，就不用了。然後，我又搜「道林紙」（我的網點本用的是道林紙）的圖片，希望根據圖片中的紙張顏色確定背景色。最終，我成功了。

然後就是最苦逼的步驟了：在上面繪製網點。我原本要每50像素一個點的，但**全部完成**後發現太稀疏了，於是馬上改成每20像素一個點。修改網點距離的同時，我還要修改圖像尺寸，以保證背景平鋪時銜接自然。單單這一項我就花了3個小時（連同吃飯、休息）。

最後就是最重要的步驟了——在上面繪製手稿圖。說實話，我在上面用鉛筆工具的地方只有三處——因為我沒有數位板——其他的都用字、簡單的幾何圖形代替了。

最大的問題是字體的選擇上。我在字體網站上翻了半天，最終發現，方正靜蕾簡體的字體和我的字體有點像，於是我果斷用它。但該字體在PS中的顯示效果不好：行間距、字間距太大——不是一般的大！於是我又苦逼的修改行間距和字間距……關鍵是，我在這張圖裡大量的用了字元……

最後，當家裡的表在午夜敲了12下時，我終於完成了背景的製作。大家可以看一下：

Typecho背景

Typecho頭像

由於Typecho是使用Gravatar獲取頭像的，而Gravatar因為已知原因經常登不上，所以我一直沒設置頭像。

然而，有一天，Gravatar居然奇蹟般的能登上了！我就馬上進行相關設置，最終設置好了頭像。

但奇怪的是， GravatarCache 不工作了！經檢查發現， GravatarCache 緩存的文件是JPG格式的，而我的頭像是PNG格式的……

社交網路連接與SEO

這是每一個站長都必須要做的事。說實話，這一方面還算是比較簡單的。但，手續太繁瑣！

但Discuz的「QQ互聯」插件中，我怎麼也上傳不了logo。

這還是小事，我處理新浪微博的連接時，居然還要審核！在審核上，我失敗了兩次：第一次原因是「沒有看到合作組件上線，請在網站頁面上添加微博合作組件後再提交審核」，因為我當時還沒做主頁，所以我就在默認主頁上進行了一些輕微的修改後再次提交審核，結果仍然未通過，理由是「網站資源過少，請完善網站建設後再提交審核；沒有看到合作組件上線，請在網站頁面上添加微博合作組件後再提交審核」。好吧，我知道為什麼了，但為什麼第一次的時候不說呢？

最後，我不得已做了一個簡單的主頁，再次提交審核。當郵件發過來的時候，我的心臟跳得很厲害（郵件標題是「APP審核友情提示」，並不知道是否審核通過）。我的手顫巍巍地點開了郵件，得到的卻是審核成功的提示！SO GREAT!

然後我趕緊更新了百度分享的代碼。

關於

關於頁面我分成了兩部分：關於煥藍、關於我。「關於煥藍」頁面中有鏈接鏈接到「關於我」。

「關於煥藍」頁面不難做，除了時間軸。我好不容易才在 Helloweba 搜到了比較好的時間軸，然後好不容易才把它調好，使其符合網站的整體風格。想要時間軸的看源碼自己擺弄，記得在後面加一個引用自 Helloweba 的聲明。

「關於我」頁面倒是想了半天。我在網上瘋狂地搜尋橫向視差滾動單頁插件，找了兩天，才找到了一個 pagePiling.js ，和之前的 fullPage.js是一個人寫的——我偶然間發現那個人是劍橋的！和 fullPage.js 相似，我也差點拋棄它，但原因不一樣：這次我把源碼下載到本地，將使用谷歌CDN的地方換成了BootCSS CDN，但在手機上測試時，不知何故（可能是網路問題），顯示不正常。

Bootstrap、pagePiling 來相配，天生是一對……不過，其實，Bootstrap應該是百搭的。

但是，我實在無法解決同一行寬度不同的列中，較短的列如何垂直居中的問題，索性放棄。我原本想加一些圖片，但最終放棄了。

就這樣，「關於我」頁面草草完成。

注意：如果在手機上瀏覽，最好在豎屏狀態上瀏覽（UC瀏覽器中如果打開「適應屏幕」選項，最好在橫屏狀態下瀏覽），對於其他狀態的顯示問題，應該是Bootstrap自身的問題，除非重新編譯，沒有好的解決方法，但我懶得改，怕改錯、改混亂。

導航點是在左下角的，我無法將它們放在中間，我已經儘力了，如果你有解決方案，趕快告訴我，我將不勝感激。（官方版本未提供橫版導航點，我也是問了作者，作者才給出替代方案的，詳見 https://github.com/alvarotrigo/pagePiling.js/issues/70 。）

以上就是我的網站的大致準備過程。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！