閱讀80 返回首頁    go 阿裏雲 go 技術社區[雲棲]

為什麼我們的微信文章版式比較好看？

先說一個前提，Linux 中國的文章都是通過自身網站的 CMS 進行編輯的，並沒有使用外部的那些第三方的微信編輯器。因此，如果你有一個可以編輯內容並形成網頁的 CMS，那麼以下技巧可能就比較適合你使用；如果你沒有 CMS ，理論上說你手工編輯 HTML 頁麵也是可以的；或者，其實你可以複製我們的文章的格式到一個可視化  HTML 編輯器中，修改內容也可以。

1、代碼高亮

作為技術網站，刊載的文章中出現代碼是必不可少的，之前我們也用過一些代碼高亮插件，但是因一些不足後來就放棄了。

目前我們使用的代碼高亮插件是 Google 的 code-prettify，最初它是放在 Google Code 上的，現在也托管到了 GitHub： https://github.com/google/code-prettify 。

code-prettify 的優點是體積小，使用簡單，而且自動識別所高亮的語言（雖然有時候識別的不對，但是其實沒幾個人真的在意對不對，大致能區分不同的語言成分就好了）。目前這個軟件已經有比較長的時間不更新了，雖然還有 bug，不過大致上的功能沒有什麼問題。

使用方法很簡單，首先你得在頁麵中引入 code-prettify 的 js  文件，然後在你要高亮代碼外使用 <pre >...</pre> 或 <code >...</code> 標簽即可。比如：



    

  1. <script src="run_prettify.js"></script>
    2. 

  2. <pre class="prettyprint">class Voila {
    3. 

  3. public:
    4. 

  4.  // Voila
    5. 

  5.  static const string VOILA = "Voila";
    6. 

  6. }</pre>
    7. 



然後看起來效果就是：




    

  1. class Voila {
    2. 

  2. public:
    3. 

  3.  // Voila
    4. 

  4.  static const string VOILA = "Voila";
    5. 

  5. }
    6. 



可能你使用了 code-prettify 之後也發現和我們的代碼樣式不同，其實，這隻是我們使用了自己定製的一個 CSS 樣式罷了，稍微研究下我們的頁麵代碼，你就能找到這個 CSS 的，你可以根據你的喜好進行修改。


當你做好了一個可以在瀏覽器中滿意呈現的頁麵之後，你隻需要複製該頁麵內容，貼到你的微信後台的編輯器中即可。



2、英文注釋標簽


我們經常會發布各種英文文章的譯文，但是有時候，一些詞匯需要附上英文才能比較好的避免歧義。通常大家的做法都是在中文後麵用括號圈上對應的英文，但是隨著 HTML5 規範的普遍支持，其實還有另外一種新的標簽可以更好的用於這種情況。那就是 RUBY 標簽。


RUBY 是振假名的意思，用於在 HTML 中標注注音。各個瀏覽器對 RUBY 標簽的支持程度不同，不過最基本的用法都是支持的，包括微信內的瀏覽器。


簡單的來說，RUBY 標簽的基本格式如下：<ruby>這裏寫中文<rt>English here<rt><ruby>，這個標簽用瀏覽器看的效果是這樣的：這裏寫中文English here。


當然，實際上 RUBY 標簽還許多子標簽和不同的格式變體，但是一方麵各個瀏覽器支持效果不同，另外一方麵對微信瀏覽器而言僅支持這種基本格式。需要深入研究的同學可以自行搜索。


目前應該還沒有支持 RUBY 的 CMS，所以，一般情況下你需要手工編輯你的頁麵的 HTML 來插入這種標簽——當然，我是自己開發了一個我的 CMS 的插件。


此外， RUBY 標簽也是可以嵌入鏈接的，這種情況也比較常見。你可以自行摸索下。


最後，RUBY 標簽自然有默認的顯示樣式，顯然，作為在意用戶體驗的你，肯定會給它單獨調整下 CSS 的，是吧？



3、其它


實際上，除了以上兩點，我們並沒有特別不同的地方，不過用戶體驗的細節還是有所調整的，但是這些就是見仁見智的地方了，大家可以根據需要參考我們或其它一些在頁麵體驗方麵有所特長的頁麵進行學習。


除此以外，做了幾年的微信文章發布，我還有一點點小經驗可以分享給大家：


    

  • 不建議調整正文字號，就用默認的 16px 即可，雖然看起來比較大——但是現在移動設備分辨率越來越高了，所以較小的字號可能會讓部分用戶看起來比較累。當然，也可以考慮使用 14px，如果你的文章不全是密密麻麻的字的話。
    • 

  • 正文文字的顏色不要出現太多，除了黑色以外，最多有兩種為宜。此外，在特殊情況下，你還可以考慮使用加粗，甚至斜體效果。
    • 

  • 中英文混排時，以及摻雜數字時，盡量在英文單詞與漢字之間加個空格，關於這方麵，網上有篇《中文排版指北》，會有更詳細的建議，不過我認為最重要、最基本的就是這條了。
    • 

  • 文內配圖，如果有可能盡量尺寸一致，最少要考慮保證圖片寬度一致比較好。配圖下方，必要時可以用另外一種文字樣式來做圖片說明。比如我們就是用斜體、灰色、下劃線樣式的字體作為圖片說明。模煳的配圖不要也罷，除非必要，用動圖會顯得很 low——有些老網友或許還記得 20 年前的網頁上的那種 GIF 動畫展覽吧？
    • 

  • 題圖，如果你的標題不夠好，那就選張好的題圖吧，如果你能有一張切題的壁紙級題圖，那顯然會讓你的公眾號訂閱者更高興一些——如果細心的話，或許你可以放上這張壁紙級題圖的高分辨率原圖的 URL 地址？
    • 

  • 微信後台的文章編輯器對很多 HTML 標簽是不支持的，比如 DIV。所以，大家如果采用 div 布局的話，會發現桌麵瀏覽器上看的好好的樣式，複製到微信後台的編輯器中會變得慘不忍睹。這種情況下，你可以考慮用一些新的塊級元素，比如 SECTION。
    • 

  • 鏈接，微信文章僅在一些特定的情況下支持文內鏈接，所以，對於大部分公眾號的微信文章來說，都是沒辦法在文內加上鏈接的。但是作為 Web 世界，有時候明明有鏈接的地方你不提供鏈接，你可以想象讀者的怒火。這時候，我們有兩種方式可以稍微補救。

      

    1. 對鏈接的文字加上特定樣式（如加上下劃線），以暗示此處有鏈接，然後在後麵加個上標，比如[1]，並在文末單獨對這個上標提供鏈接，這樣需要的讀者可以複製該鏈接訪問。不過要注意的是，微信文章不支持 SUP 標簽，你可以用 SPAN 標簽來達成類似效果。
      2. 

    2. 如果文內鏈接不多，鏈接本身也不算長，你可以用括號圈起來寫上鏈接，不過如果鏈接太多，也太長時，這會影響正文閱讀效果的。
      3. 

    
其實這兩種方式都是仿照紙質書籍這種無法做到超鏈接的出版物的。
    • 

  • 對於長文章，你應該考慮在文內提供不同層次的大小標題。如果有可能，你還應該在頁首提供一個目錄、摘要等信息。當然，我們使用了 CMS，這種信息是自動提取生成的，可能要方便一些。
    • 



 


原文發布時間為：2017-12-14


本文來自雲棲社區合作夥伴“Linux中國”


最後更新：2017-06-01 12:02:41
  上一篇：go  不常見但是很有用的 GCC 命令行選項（二） 
  下一篇：go  Jupyter Notebook的27個竅門，技巧和快捷鍵