1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
語法：
https://paste.plurk.com/show/Zlm8PFa3KcPyOwv8qFbQ/
https://paste.plurk.com/show/O9g9MfapsGjLPjIkSr8Q/

這裡說明三個步驟
步驟A：製作噗寶本身
步驟B：釋放噗寶的位置
步驟C：把「輸入區、註冊參與討論」兩者的位置從「整個噗內(#form_holder)」移出

會說明怎麼做到的，和為什麼要調整這些的原因

另外額外說明如何讓每個噗串內都有噗寶

========步驟A========

噗內唯一可以判斷這是哪個噗首的回應的位置在「每則回應(.list .plurk)」上面
「每則回應(.list .plurk)」上有一個屬性叫做「data-pid」，他的值就是這則回應屬於哪個噗首
所以「.list .plurk[data-pid="指定噗的pid"]」用這個可以判斷打開的噗串是哪個噗首的噗串
在這上面設定「偽元素(before、after)」的話就可以做出指定噗的噗串內噗寶

但是個噗首底下的回應(.list .plurk)不會只有一個，直接這樣設定的話會有超多個疊在一起
所以最後使用「只對第一個設定(first-child)」


翻譯:
.list .plurk[data-pid="指定噗的pid"]:first-child:after

.list .plurk：每則回應
[data-pid="指定噗的pid"]：且是指定的噗首的回應
:first-child：且是第一個回應(顯示中的第一個而非第一則回應)
:after：的偽元素

========步驟B========

接下來就是容易造成衝突的部分了
既然這個噗寶是設定在「每則回應(.list .plurk)」上的，但又想要位置是固定在噗串右下不要跟著滾輪跑來跑去(回應很多的時候)
那麼就要把上層會把噗寶抓住的位置屬性都去掉
也就是「position:relative;」的設定，這會讓偽元素噗寶被他抓住

第一層：「每則回應(.list .plurk)」
　　這個本身有一個「position:relative;」

第二層：「回應列表(.plurk_box .list)」
　　這東西就是噗串裡面把所有回應包起來的一個框，上面也有「position:relative;」

第三層：「回應盒子(.response_box)」
　　這就是滾輪軸顯示，包著滾來滾去的東西的那層，上面也有「position:relative;」

翻譯：
.response_box, .plurk_box .list, .list .plurk { position:unset; }
「回應盒子(.response_box)」、「回應列表(.plurk_box .list)」、「每則回應(.list .plurk)」
的「位置屬性(position)」改成「不設定(unset)」

========步驟C========

到這一步噗寶已經跑到外面不會被滾動了，但這時候設定bottom:0的話會發現他是以廣告(或者是輸入框，因為你有噗幣隱藏廣告了)的底下當起始點(bottom:0)
這是因為現在噗寶是以「#form_holder(你點開噗串時會跑出來的所有東西最外層)」為基準點
但「整個噗內(#form_holder)」不只包含「回應盒子(.response_box)」，還包含了「輸入區(.poster_holder)」、「註冊參與討論(.login_to_see)」、「廣告(#resp_banner_ads)」
這裡也不能直接設定「bottom:68px」之類的，因為輸入框會隨著你輸入的內容變高變矮

所以這裡把廣告隱藏，並且把輸入框的位置屬性改成絕對位置(position:absolute;)，讓他的上一層(#form_holder)不再幫他保留位置
現在「整個噗內(#form_holder)」的最底下就是「回應盒子(.response_box)」的最底下了，噗寶的位置在想要的地方了

現在要把輸入區的位置設回原本位置，也就是剛剛好貼在「回應盒子(.response_box)」下面(top:100%;)
還有把輸入區重新拉寬到跟上層一樣寬(width:100%;)

top設為0的時候是剛好在「整個噗內(#form_holder)」的頂部
那麼top設定為100%就是剛好符合「整個噗內(#form_holder)」的高度，那就會貼在底下了
寬度100%就是符合上層的寬度，上層是「整個噗內(#form_holder)」

「輸入區(.poster_holder)」、「註冊參與討論(.login_to_see)」兩者相同所以一起設定

========額外說明========

如何讓每個噗串內都有噗寶

前面設定噗寶的這一句
.list .plurk[data-pid="指定噗的pid"]:first-child:after
只要拿掉指定噗的部分
.list .plurk:first-child:after
這樣就可以設定每個噗內都有噗寶了

並用的話因為「每個噗內噗寶」已經設定好位置跟其他東西了，所以指定噗只需要更換圖片就好
所以想並用可以寫成下面這樣

https://paste.plurk.com/show/3zPWl4ZikKatDtKTPZWI/