呼！終於大致完成UDN部落格改版後，版面編排的因應措施。幸虧全部搞定之後，UDN恐怖的問號事件才發生，只有最後一篇修改存檔時，標題內文通通變成問號
。本文也因此硬是拖了兩天，塵埃落定後再貼。一、放大圖片。
新版改用寬欄，寬度約增加20%，圖片面積增加44%，在螢幕解析度稍高的機種，如iPad之類，看起來比以前精彩漂亮；解析度較低的螢幕或筆電，恐怕會覺得太大。然而維持舊版相容有點困難，不如放手徹底改觀。雖說充其量回溯到三、四年前左右，更早的圖片大都小於600px，放大也不會更好，改善需要重新上傳，工程更加浩大，暫時就算了。
二、放大舊版縮小的文字
從前照片說明常用小一號字，感覺比較美觀，然而解析度提高後，變得有如螞蟻，於是全數恢復正常大小。好在與圖片一併放大，看起來效果也不差
。三、修正亂掉的圖片編排
習慣以靠左靠右居中或表格方式，編排圖片在文章中的位置，然而因欄幅變寬，新版的圖片位置變得凌亂。主要是過去滿欄寬的圖片，如果忘記設為居中，現在就會偏左，顯得參差不齊。表格更是奇妙，有時整個表格偏左，有時表格本身依舊滿欄，個別圖片則隨當初設定漂移。
四、指定文章用圖
為文章［上傳照片］，除了在文章列表和「你可能會有興趣的文章」展示之外，剛發現另一項妙處：這張照片會成為臉書上代表本文的圖像。那是因為指定了Open Graph的 og:image 標籤，FB就不會亂抓一些不相干圖片。然而這也是最花時間的步驟，因為即使照片早已存入相簿，卻不能直接指定，必須重新上傳。（歡迎觀賞新的文章列表。除了圖太大了點之外，基本上我還蠻喜歡）
困難的是，無論圖形、文字或表格，都未必能順利在HTML編輯器中調整。問題出在這個將近十歲的部落格平台，程式歷經多次演變，運用的HTML語法也不盡相同，有時會無法修改，有時會被新版HTML編輯器忽略，但瀏覽器依然做出解讀，造成編輯、預覽和最終成果不一致的現象。
譬如過去字體大小以＜font size=”x”＞表示，新版改用其他語法，但那個size=”x”依然故我，怎麼也改不掉，只能以純文字編輯模式刪除。有時表格會被自動加上 width=”100%” 之類標籤，撐滿欄寬；當你不想要這效果的時候，改起來也頗費手腳。更奇怪的是，有段時期又會自動加上不知什麼作用的空段落（＜p＞＜/p＞），雖然最終輸出沒有影響，卻會在預覽時造成一片空白。還有一個隨處可見的 style=”@#$%” 標籤，倘若沒去修改，後果不可預料。一般來說以HTML模式編輯不致於會有問題，用純文字模式則可能遺漏。糟糕的是如前所述，有時候又非用純文字模式不可，只能多加小心。
最詭異而可怕的是，有幾篇文章不知何故，頭尾被夾上一個＜div class=”xxxxx”＞標籤，看起來無害，但當你使用［上傳照片］功能，整篇文章會有一大半甚至全部被蓋掉。若不將這個標籤刪除，上傳任何照片都會遭殃。更慘的是，新版文章編輯器好像真的有定時存檔功能，雖說期待已久，但在出錯的時候存檔，可就大大不妙啦！我在修訂一篇舊文時遭禍，文章硬是被砍掉半截，還被存檔覆蓋。幸虧想到曾經試用新版的部落格匯出功能，從匯出檔中撈出完整舊文回存，才免於遺憾。（P.S. 恐怖問號事件發生後，系統將近一天才恢復正常，修訂中的舊文則全毀，也靠這招救回。 ）
藉此機會回顧過去七年半以來，在UDN留下的足跡。早期受限於相簿容量，上傳的圖片都很小，數量也有限。後來限制慢慢放寬，大約以2009年為界，之前少有全幅（當時約600px）照片，之後則多半上傳較大圖檔（800px~1024px），再縮圖呈現。曾經想過，是不是重新上傳舊文中的照片。除了費工之外，主要是早期數位相機畫素不高，譬如拉斯維加斯系列，當時用的是一百萬畫素相機，以今日眼光看，實在難登大雅、神仙難救，唯縮圖差可一觀。反而是更早的洛磯山、夏威夷等底片時代產物，還有機會變出大圖。倘使今年度果然沒什麼機會出遊，就整理整理舊照片吧！
原發表於Jeff & Jill的窩，2013/07/25 00:18:41
《以下留言與回覆，來自 聯網》
01. 需仁 2013/07/25 09:24
這個時候我就很喜歡chrome的檢查元素，改版當時幾乎都是靠檢查元素一步步更改成接近自己需求的版面。
格主於 2013/07/25 19:04回覆
我也偶而會用chrome的工具，不過通常用來搞script。修版面是細工夫，就不大有耐心了。
02. 火星情報總長 2013/07/25 11:39
豁然開朗。
格主於 2013/07/25 19:04回覆
謝！
03. Den 2013/07/26 06:52
您文中提到『新版改用寬欄，寬度約增加20%』。請問有無可能使用者自行縮小行的寬度﹝欄寬不一定需要改﹞？比如假設現在新版每行容納35個中文字，可否改成每行30字左右就換行。比如在『模板設定-完全自訂』或是新增文章時在HTML裡加入指令。
格主於 2013/07/26 08:50回覆
如果像我一樣懶，［直接套用模板］裡面有幾個標註「窄版」的模板可用。
想自己調整的話，可以先參考這篇「玩模版／我是文字型創作者，文章內容想改窄版？」。還有幾位格友寫過深入的教學文，一時找不到；記得在電小二這一系列「玩模板」當中某篇有連結，當初我是這麼找到的。
04. Den 2013/07/26 23:37
沒注意到『直接套用模板』裡增加了一些窄版選擇。感謝版主指點迷津。
格主於 2013/07/27 01:42回覆
不客氣。從這點看，電家族實在蠻貼心的。
05. 胡說八道 2013/07/26 23:42
連回應也會變成一串串問號
真是奇哉怪也
感覺上用新版速度也卡卡的
所以我最近用得最多的按鈕是回到舊版
格主於 2013/07/27 01:41回覆
系統還在熱身哪，無奈
。
。
06. See iris 2013/07/26 23:56
恭喜您完成格子重整！
請教新版的匯出功能如何開啟檔案？謝謝。
格主於 2013/07/27 01:39回覆
謝謝！
下載的匯出檔是ZIP壓縮格式，用任何ZIP解壓縮程式都可以，我用的是7-zip，免費，可用Google搜尋下載。解出後的格式是XML，內容有點複雜；最好用瀏覽器開啟這個XML檔，你會看到內文標題以HTML格式（嚴格來講應該說XML，且不管它）呈現。然後就是剪貼工夫了。
沒有留言:
張貼留言