深藏若虛

更改噗浪被標記噗文的樣式

Change style of marked plurk

噗浪（Plurk）以橫向時間軸（timeline）為主，顯示一則則訊息與其討論的社交平台。通常使用者會稱時間軸為河道，訊息為噗、或噗文（plurk），噗浪上的朋友則為噗友。是一個相對臉書、推特來說，較有小圈圈和隱私性的微網誌社交平台。

前言

雖然一度潛水一陣子，但我一直都是噗浪（Plurk）的使用者。噗浪官方在近幾年很努力的在營運，其開發團隊也陸續實作了不少新功能，其中令我感到方便的莫過於「最愛」、「消音」和「書籤」功能。

  • 「最愛」我通常會用於值得紀念的噗，除此之外，我想特別持續追蹤的噗，或是回覆中有些有趣的討論會讓我想關注的，我也會套用「最愛」標記。
  • 「書籤」則用在我覺得這噗提供的資訊不錯，日後可能會遇到，或是我還算有興趣，但我現在沒時間看，那我會先收進標籤，等待日後再一一觀看，並幫該噗標上比較精確的 #hashtah。就如其名一樣，像是書籤一般，或是作為稍後閱讀的標記。
  • 「消音」就簡單得多，我已經沒興趣的噗、或是我覺得不錯但是我不想一直被洗回覆讓噗不斷浮上來的噗，我都會點消音，讓河道比較乾淨，能專注在我有興趣的話題或是新的噗文。

但隨著這些功能的使用，的確有讓我覺得河道舒適多，但又有種還可以更好的念頭。像是有些消音的噗，我可能就連其噗文都不想看到，但是他的顯示權重不會因為其被消音就會被改善，在滑河道時還是會不斷看到，成為躁噗（noisy plurk）。可是如果消音的噗都看不到，或不明顯，又會讓一些雖然消音，但有加最愛或標記的噗跟著消失，怎麼想都有點尷尬。更別提官方怎麼可能因為我的一些小執著改變整個噗的顯示方式呢？

所幸雖然雖然不想當噗浪的奧客，但噗浪卻提供了能夠自由客製化河道樣式的功能，讓我們能夠透過 CSS 去自訂我們河道的顯示細節。本篇文章就講述根據這個功能去解決上述的需求。

結構與規則

在動工之前，首先要了解噗浪的 HTML 結構，下面的原始碼過濾掉了無需關注的部分，只針對會動到的標籤與其周邊結構去顯示：

<body>
  <div id="layout_body">
    <div id="layout_content_html">
      <div id="layout_content">
        <!-- 河道 -->
        <div id="timeline_holder">
          <div id="timeline_cnt">
            <!-- 噗文放置區 -->
            <div class="block_cnt">
              <!-- 一則噗文；待會會針對這個標籤做說明 -->
              <div class="plurk cboxAnchor" ......>
                <table>
                  <tbody>
                    <tr>                      
                      <td class="td_img">
                        <!-- 放置發噗者的大頭貼 -->
                        <div class="p_img">......</div>
                      </td>
                      <td>
                        <!-- 噗文本身；待會會針對這個標籤做說明 -->
                        <div id="xxxxxx" class="plurk_cnt">
                          <table>.......</table>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="plurk cboxAnchor">......</div>
              <div class="plurk cboxAnchor">......</div>
            </div>
            <!-- 不確定用途，可忽略 -->
            <div class="block_cnt" style="display: none;">
            </div>
          </div>
        </div>
        <!-- 噗文的回覆區；待會會針對這個標籤做說明 -->
        <div id="form_holder" class="plurk_box">
        </div>
      </div>
    </div>
  </div>
<body>

透過上面的結構可知每一組 <div class="plurk cboxAnchor">......</div> 就是一則噗文，而噗浪針對置頂、書籤、最愛等等類型的噗，都會在這個標籤附上 CSS class，其對應分別如下

噗浪各標記樣式類別

  • 置頂： pinned
  • 書籤： mark
  • 最愛： favorite
  • 消音：muted
  • 轉噗：replurk
  • 十八禁： porn
  • 有新回覆：new
  • 當前顯示：display 
<!-- 示例：一則有書籤、消音標記的噗文-->
<div class="plurk cboxAnchor mark muted ">......</div>

消音標記的注意事項

關於消音標記比較需要注意的是，如果你點擊展開的那則噗是被消音的，那麼回覆區的 <div class="plurk_box">......</div> 也會有 muted class。

<!-- 示例：點擊被消音的噗文時的連貫作用
<div id="timeline_holder">
  <div id="timeline_cnt">
    <div class="block_cnt">
      <!-- 點擊這則被消音的噗文 -->
      <div class="plurk cboxAncho muted display">......</div>
    </div>
  </div>
</div>

<!-- 噗文的回覆區；當點被消音的噗文時，這邊也會加上 muted class -->
<div id="form_holder" class="plurk_box muted">......</div>

實作樣式

在本章列出幾種情境、需求，並且附上示例給讀者參考。記得每次更改要看效果時，都要重新整理噗浪的網站哦。

讓被消音的噗文變得不明顯

回顧需求，如果想要讓被消音的噗文變得不明顯，最直白的作法就是增加該噗元素的透明度。

.muted {
  opacity: 0.2;
}

但是由於上節說的連貫作用，會導致展開被消音噗文的留言時，留言區也會變成不明顯的。如果本來就沒打算看已消音噗的留言時，倒是不需要再作修改。但如果有要回顧留言的需求，那建議還是將被透明化的元素定義的精準一點：

.plurk.muted {
  opacity: 0.2;
}

讓鼠標移到消音的噗文時，弱化透明化的效果

雖然把消音的噗給淡化了，但有時候可能還是會想知道上面寫什麼，比較折衷的方式，就是讓鼠標移上去時，減弱透明化的效果，所以我們再透過 :hover 修飾目標：

.plurk.muted:hover {
  opacity: 0.95; 
}

改變噗文背景顏色

針對消音的部分做改善後，接下來針對想要將被標籤、被加到最愛的噗文加入比較不一樣的特徵，讓我可以一眼看出該噗就是被標記或是被加最愛。這裏實作的方式是改變噗文的背景顏色，不過修飾的目標不再是 <div class="plurk"></div>，而是該元素內只有包括內文的 <div class="plurk_cnt"></div> 元素，實際差異可以透過瀏覽器的開發者工具查看，這裡就不多贅述。

將被加入書籤的噗文背景色改成瓶覗綠：

.plurk.mark .plurk_cnt{
    background: rgb(225, 254, 223)
}

將被加到最愛的噗文背景色改成桜色粉，並考慮如果一篇噗文同時被加入書籤和最愛時，已加入最愛的顏色為主：

.plurk.favorite .plurk_cnt, 
.mark.favorite .plurk_cnt {
  background: rgb(254, 223, 225)
}

多重標記處理

如上小節有提到可能會有一篇噗文會有多重標記的情況，也要一一作處理。同是更改背景色為效果的標記，若同時都有時該以哪個標記為主、如果被加最愛的標記也被消音時，是不是讓透明度效果不要那麼強、等等。

這邊以減弱被消音的書籤、最愛噗文的透明度效果為例：

.plurk.muted.mark {
  opacity: 0.7;
}

.plurk.muted.favorite {
  opacity: 0.9;
}

成果

效果截圖

沒有任何標記的噗文

消音後的噗文

消音後，鼠標移到上面的噗文

加入最愛的噗文

加入最愛與書籤的噗文（優先權）

加入書籤的噗文

加入書籤且被消音的噗文（略淡）

樣式表

除了上一章的修改外，這底的樣式表多了一個針對最近推出的 R18 標記功能做處理，讓該噗內容在鼠標移上去前是有模糊化效果的，避免在滑河道時被後面路過的親友、同事看到神奇的噗而產生什麼誤會，實際效果就請讀者自己嘗試看看囉！

/* Mark */
.plurk.mark .plurk_cnt {
    background: rgb(213, 251, 255)
}

/* Favorite */
.plurk.favorite .plurk_cnt, 
.plurk.mark.favorite .plurk_cnt {
  background: rgb(254, 223, 225); 
}

/* R18 ; Behind the attention */
.plurk.porn .td_cnt .text_holder{
  filter: blur(3px);
}

.plurk.porn .td_cnt .text_holder:hover{
  filter: none;
}

/* Muted */
.plurk.muted {
  opacity: 0.2;
}

.plurk.muted.mark {
  opacity: 0.7;
}

.plurk.muted.favorite {
  opacity: 0.9;
}

.plurk.muted:hover {
  opacity: 0.95; 
}

結語

這篇文章算是自己針對需求進行修改後，順帶產生的一篇教學文。其中更改的元素並不多，只專注在噗文的背景色和透明度上，但其實噗浪自訂 CSS 的功能是還可以做出更多變化的，這部分網路上應該也有文章在講了，有興趣進一步的朋友可以找找看資料。

本文章所示範的顏色是以預設的河道樣式為底去套用的，不一定適用於各位的河道上，所以要套用什麼顏色、多少透明度就煩請各位依照自己的河道樣式慢慢測試囉。懂網頁開發的朋友也可以針對文字顏色去做改變，或是進一步做點配套設計。等哪天我有空，或許就會在整理一篇文章專門在講修改哪些類別可以改變河道上什麼元素的樣式吧。嗯，有空的話。 XDD

Information Technology