想在論壇發一篇字體與排版看起來都很舒服的文章需要做些什麼？

01-25

我有做過這方面的嘗試，分享一些經驗。
首先，國內環境常見的是BBS基本都是Discuz和phpwind，而開放給用戶的許可權很小，我們一般可以用到的功能有：

貼圖

文字顏色

字體大小

列表

引用

加粗/斜體/下劃線

縮進

基本上，我們需要根據這些東西來做文章。而一些我們想要的設置，比如段前縮進、段間距、行距都是無法改動的，就不要多想。

比如說，我需要發布的內容有如下特點：
分為多個重複的文章塊、每個塊有獨立的標題、有標識圖片（大），內容以項目列表為主，還有一段文字。
我的設想是，每個塊必須儘可能分開，讓讀者可以清楚判斷。作為內容的項目列表要清晰，讓讀者可以快速識別和定位。長文字需要劃分出段落，降低閱讀壓力，我最終調整出來樣式是這樣：
要點有幾個。

塊的標題加大加粗，方便視線定位，加上書名號作為識別標識。

項目標題突出，項目內容後縮，形成層次感，後縮產生的空白也方便視野定位。

項目的項加粗，和冒號後的值做出區分。

項目標題加上一個色塊作為裝飾，增強識別性的同時，也讓頁面不會太單調。同時，鮮艷的藍色也方便讀者視線從圖片轉移。

長文字以首行縮進作為分段標識，而不是採用段間空行，因為整個內容塊本身留白已經挺多，再用空行分段會覺得太疏離。

不足和要改進的地方。

行首的縮進要改用全形空格，這樣才不會被壓縮。

對長的內容進行主動換行，這個論壇文章區不限制寬度，讓一行文字太長了。

我用到的bbcode，相當簡單：

[size=5]《標題內容》[/size]
[img]image url[/img] [size=3][color=blue][/color]項目1[/size] [b]項1[/b]：值1 [b]項2[/b]：值2 [b]項3[/b]：值3 [b]項4[/b]：值4 [size=3][color=blue][/color]項目2[/size] [b]項1[/b]：值1 [b]項2[/b]：值2 [b]項3[/b]：值3 [b]項4[/b]：值4 [size=3][color=blue][/color]項目3[/size] [b]項1[/b]：值1 [b]項2[/b]：值2 [b]項3[/b]：值3 [b]項4[/b]：值4
[size=3][color=blue][/color]長內容[/size]

如何排版要視乎帖子的內容，以及發帖人對發帖編輯器的熟悉程度。

編輯器模式
　　通常的編輯器有兩種編輯模式：編輯器代碼模式（如BBCode，Discuz!代碼等），以及所見即所得模式（如知乎的編輯器）。某些論壇也支持HTML編輯，這在本帖中就不予考慮了。
　　所見即所得的編輯模式非常直觀，也有一些支持直接含格式複製（如直接複製Word，HTML網頁）。這種模式比較簡單，節省時間，但對一些較複雜的格式（如表格）往往難以調整。在我撰寫此答案的時候我就感受到了所見即所得的一些缺陷，例如本答案的小標題使用的是「有序列表」功能，但編輯時發現很難在列表中插入空行，如有知道除複製換行之外其他方法的朋友煩請告知。
　　而代碼編輯模式上手容易精通難。通過交互按鈕，編輯者很容易知道加粗就是在文字兩端加[b]與[/b]，顏色就是加[color=]與[/color]這些簡單的功能，但代碼編輯模式相比所見即所得模式優勢在於能較好地處理複雜格式的編輯，例如複雜的表格功能。但既然是複雜格式，其代碼也是非常複雜的，並且與HTML一樣有格式順序的概念。例如下圖是在下在某論壇發的帖子中的表格，模仿vgmdb.net 的專輯主頁的風格。
其代碼如下：
[size=5][url=http://vgmdb.net/album/35200]Gaming Fantasy[/url][/size] [table=98%] [tr][td=1,7,1][img]http://vgmdb.net/db/assets/covers-medium/35200-1355806516.jpg[/img][/td][td=110][size=2][font=Times New Roman][b]Release Date[/b][/font][/size][/td][td=400][size=2]May 20, 2012[/size][/td][/tr] [tr][td=110][size=2][font=Times New Roman][b]Classification[/b][/font][/size][/td][td=400][size=2]Digital Fan Arrange[/size][/td][/tr] [tr][td=110][size=2][font=Times New Roman][b]Release Price[/b][/font][/size][/td][td=400][size=2]10.00 USD[/size][/td][/tr] [tr][td=110][size=2][font=Times New Roman][b]Published by[/b][/font][/size][/td][td=400][size=2][url=http://vgmdb.net/redirect/51718/www.taylordavisviolin.com/store/albums/taylor-davis-gaming-fantasy-album/]Taylor Davis [/url][/size][/td][/tr] [tr][td=110][size=2][font=Times New Roman][b]Composed by[/b][/font][/size][/td][td=400][size=2][url=http://vgmdb.net/artist/431][color=#00BFFF]Jeremy Soule[/color][/url], [url=http://vgmdb.net/artist/300][color=#00BFFF]大島ミチル[/color][/url], [url=http://vgmdb.net/artist/1791][color=#00BFFF]Harry Gregson-Williams[/color][/url], [url=http://vgmdb.net/artist/139][color=#00BFFF]下村陽子[/color][/url], [url=http://vgmdb.net/artist/77][color=#00BFFF]植松伸夫[/color][/url], [url=http://vgmdb.net/artist/146][color=#00BFFF]光田康典[/color][/url], [url=http://vgmdb.net/artist/10151][color=#00BFFF]Musashi Project[/color][/url], [url=http://vgmdb.net/artist/1811][color=#00BFFF]Jesper Kyd[/color][/url], [url=http://vgmdb.net/artist/190][color=#00BFFF]近藤浩治[/color][/url], [url=http://vgmdb.net/artist/1742][color=#00BFFF]宇多田ヒカル[/color][/url][/size][/td][/tr] [tr][td=110][size=2][font=Times New Roman][b]Arranged by[/b][/font][/size][/td][td=400][size=2]Taylor Davis[/size][/td][/tr] [tr][td=110][size=2][font=Times New Roman][b]Performed by[/b][/font][/size][/td][td=400][size=2]Taylor Davis[/size][/td][/tr] [/table]
可以看到代碼中有許多重複格式的嵌套，粗看一團亂麻。發布新帖子時單純替換信息的工作量相比所見即所得模式也大一些。其實只要願意搗騰（敲代碼，切圖片等等），完全可以用代碼編輯器發一個扁平化風格的帖子。
因此，在排版之前首先要知道自己能駕馭什麼程度的排版（代碼熟悉程度，容許排版時間長度），以及文章的內容適合什麼樣的格式。

梳理內容
　　在排版之前先要梳理內容。首先，要對帖子的內容分類，是否以圖為主，文章長度等。
　　對於長文章（例如知乎上的許多長回答），比排版更重要的是文章的條理層次。設小標題有助於閱讀，但過量的小標題又會起到反作用。只要文章內容被適量的小標題分割，段落之間增加空行以示分隔，段落開頭增加縮進，就能在一定層度上避免因為文字堆疊產生的定位困難而影響閱讀興趣。此外在長文中穿插圖片表格，也能緩解因為閱讀長文字產生的疲勞。而這些都屬於在排版之前就要完成的工作。
　　對於多圖的文章，一般的帖子都會選擇簡單的豎直排列，這樣做較為方便。但其實如有需要（例如一些實驗對比結果），也可以使用小圖並排，甚至給原圖增加一個超鏈接實現點開小圖看大圖的效果（雖然現在的很多論壇框架已經能自動實現此功能了）。

技巧與小技巧
　　如果您已經對內容有了充分的準備，只是希望能用簡單的發帖編輯器表現出更豐富的效果，那麼您就需要一些排版的技巧了。由於在下並非專
業修習排版這門學問，所以在此只分享一些我認為有用的技巧。在下習慣使用代碼編輯了，對於所見即所得模式心得不足，因此以下的幾點基本都針對代碼編輯。
　　3.1 發帖工房
　
　我在我常發帖的論壇里都會有這麼一個地方稱之為發帖工房，其實就是一個平常人不可能看到的自己的帖子，例如埋沒於萬千層水樓中的某一回帖。這個帖子專門
用於編輯排版，特別是當自己需要實現某種排版想法的時候，方便不斷地嘗試與修改。為了能快速找到這個發帖工房，我會把這個帖子的鏈接保存在書籤中。
　　此外，如果您長期發布同類的帖子，例如賞評、資源、創作等時候，這個發帖工房也是一個模版的存在，您可以方便地將相同的格式套用在不同的內容上，尤其是當您使用代碼編輯的時候。
　　3.2 全形空格

　　特　　它　　在　　全　　在
　　別　　幫　　多　　角　　中
　　是　　助　　數　　空　　文
　　當　　我　　字　　格　　編
　　您　　們　　體　　是　　輯
　　需　　實　　下　　個　　環
　　要　　現　　全　　神　　境
　　豎　　段　　角　　奇　　下
　　排　　落　　空　　的
　　文　　縮　　格　　存

　　字　　進　　與　　在
　　的　　　　　漢
　　時　　　　　字
　　候　　　　　等
　　　　　　　　寬
　　3.3 表格
　　表格排版在我的經驗中是較難很好掌握的一個技術。大多數的代碼不同的編輯器都能通用，如之前提到的顏色和粗斜體，但表格代碼在細節上會有不同。雖然大抵都是[table][tr][td]，但當您要自定義表格寬度，或者如我之前的例子一樣需要合併不同的單元格時，不同的編輯器[td]後面跟的參數就會有不同。具體各種編輯器的參數究竟是如何的，只有自己一一試過才知道了，所以擁有一個「發帖工房」十分重要。
　　最花時間的，是論壇表格的瀏覽器兼容性及解析度兼容性非常差，即便在Chrome下做出了滿意的效果，放火狐上就會有問題。通常這個問題出在默認表格寬度上，
您可以嘗試在[table]標籤中添加不同的表格參數逐一試驗以避免不同瀏覽器下會出現的bug。如本文開頭的例子中參數為98%，在
IE/Firefox/Chrome下都看過沒有出現問題。而這個參數對不同的論壇模版也會有差異，所以無論如何，當你需要用代碼編輯一個帖子表格的時
候，盡量現在「發帖工房」中試驗過。
　　另外，表格代碼在編輯的時候，就如同xml一樣，一條一行容易編輯和識別，但在編輯完成後請去除這些換行，因為有些論壇會把這些換行符放在表格後，產生一大片的空白。
　　順便說一下，正因為表格代碼寫起來替換起來很煩，所以我後來寫了一個腳本，專門從來源網站（http://vgmdb.net）獲取信息後自動生成一個第一個例子中那樣的帖子代碼。

　　3.4 超鏈接
　　這裡主要說一下在帖子中使用超鏈接可能出現的異常狀況，包括普通的文字超鏈接以及多媒體插件中使用的超鏈接。前者的異常主要是指添加超鏈接的文字無法繼承超鏈接外文字的格式（顏色），因此需要在url標籤內重新添加一次超鏈接外部文字的格式。而後者則是許多多媒體插件會識別鏈接格式，請記得在鏈接頭部添加http://。而一些多媒體插件無法識別符，請使用簡單的外鏈地址（指不含參數使用/分割），或者對原路徑寫一個URL Rewrite將參數地址轉變為用/分隔的地址。
　　3.5 小技巧
　　除開以上這些，編輯帖子還有一些有趣的小技巧，但比較零散，於是羅列於此：
　　(1) 菊花文（請自行搜索）
　　(2) 使用Unicode的零寬度字元分隔敏感詞防屏蔽（空標籤也能達到相同效果）
　　(3) 舊版的Discuz!可以在reply.php後添加message參數實現點擊鏈接後自定義填寫回復標題內容，詳情請閱讀論壇代碼。

總結
在有限的功能支持下展現自己的想像力，這就是我認為的論壇排版的樂趣

字體，要用微軟雅黑。行間距一般1.5行。

推薦閱讀：

※文章里電影、書籍的外鏈應否包含書名號（《》）較好？為何？
※在西文中使用斜杠和括弧的時候應該如何添加空格？
※行和段的區別是什麼？在排版軟體中如何分段？

TAG:排版 |