抱歉
因應 pixnet 站方的忠告, 本文內容已經刪除.
提醒
本篇套用的是分享給大家的 JS, 它只摭住廣告, 未加上我自己 PC 版本的版面的本文風格. 所以使用手機觀看會與我其他的貼文風格不同.
由於痞客邦 2020/4/27 開始執行外部 JavaScript 語法規範, 各位請記得重做一次手機號碼認證, 否則 JS 會被擋下來的. 2020/4/27 以後有重做手機號碼認證的可以忽略這條訊息.
更新 2024/09/25
Part 3-1 的功能已經修復. 原本是利用 pixnet 已經定義好的 JavaScript 函數 loadCSS(), 後來 pixnet 刪除了這個函數, 故而失效. 現在則改為自己寫的函數. 同時, 也要感謝 pixnet 手機版放寬了由 Javascript 載入 CSS 檔的限制 (已經完成手機號碼認證的帳號), 這個功能才得以回復.
本文
這一篇是 "關於 痞客邦 的廣告" 這篇貼文有關手機版部份的新版本. PC 版的部份要麻煩各位連回去看.
2020/04/03: 由於 pixnet 阻擋了原本 Part 3 所貼的 JS, 在這裡先提供幾個目前可行的修復方式: 利用 pixnet 網頁內含的 JS 來載入我們自己的 CSS.
2020/04/04: 原本 Part 3 所貼的 JS 已經修正, 可以執行了. 各位可以自由運用新的方法 (Part 3-1(註一) 或者 Part 3-2) 或者修正 Part 3 的舊 JS.
註一: 2020/04/23: Part 3-1 已經失效了.
2024/09/25: Part 3-1 已經完成修復.
Part 3-1. 手機版: 修改你的每一篇文章 (更新 2024/10/14)
此法已經失效, 內容刪除.這個方法依然是二段式的: 一個共用的 CSS, 加上一段 JS 用來載入這個共用的 CSS.
- 將以下 CSS 內容放在個人的 MS OneDrive 網路磁碟中, 並取得下載該檔案的 URL.
MS OneDrive, Google Drive, DropBox 均可,(Sorry, 目前只剩下 MS Onedrive 可以通過測試). 還不會的可以參看我的這一篇貼文. (下載點 2024/10/14 更新 (Part 3-1))..adsbyfalcon.pixnet-ad, /* 頁首廣告 */ #trialsquad-post, /* 主文標題下方的橘紅色廣告 */ #main .header-fixed-area, /* 文章前頭影音區 */ .trv-player-container, /* 廣告影片輪播 */ div[id^="div-gpt-ad"], /* 內文廣告 */ .tag-container.global-keyword, /* 全站熱搜 */ div[class^="article-footer article-ad"], .in-read-ad.product-recommend, /* 推薦熱銷商品 */ #recommend-topic, /* 你可能感興趣的話題 */ .pix-nerd-article, /* 乎你看更多 手機版 */ .web_to_app__container, /* 文章末尾廣告 */ div[id^="dablewidget_"], /* 你可能有興趣的文章 dable */ .anchor-ad-container.anchor-ad-container__show, .pix-related-post-2023, /* 大家都在看 */ #article-hot-wrapper, /* 兒少不宜 */ .discover-stream, /* 兒少不宜 */ .AD2M-CrazyWrap, /* 蓋版影音廣告 */ .AD2M-CrazyClose, /* 上項的關閉按鈕 */ #onead-layout0, /* 蓋版影音廣告 */ vmfive-ad-unit, /* 蓋版影音廣告 (回上頁) */ #avividai_you_like_container, /* 蓋版廣告 (回上頁) */ .adsbygoogle { display:none!important; height:0!important; } .article-author { margin-top:50px; padding-top:12px } - 將原本貼文章後面的 JS 換掉, 新的 JS 如下:
<script> function myStyle(o, url) { let s = document.createElement(o) s.rel = 'stylesheet' s.href = url s.async = true document.head.appendChild(s) } myStyle('link', "你要加載的 CSS URL, 也就是前一項提到的 CSS 的 URL") </script>
這裡有一點蠻奇怪的: 就是把函數定義成只使用一次的匿名函數的型式反而不能順利把 CSS 檔下載進來.
Part 3-2. 手機版: 修改你的每一篇文章 (更新 2021/01/26)
這個方法是一段式的: 第一次用比較簡單, 但是以後每次 pixnet 有異動時就得每一篇都再修改一遍. 個人不建議你用這個方法.
作法如下: 直接把以下的 HTML 附加在每一篇文章的最後面 (請用純文字模式修改文章, 並勾選不要系統換行). 它其實就是把原本 Part 3 放在網路磁碟的 JS 檔的內容, 加上一點點頭尾, 然後直接貼在你的文章的後面.
<p id="CSS_NO_AD"></p>
<script><!--
document.getElementById("CSS_NO_AD").outerHTML=[
'<style>'
,'.adsbyfalcon.pixnet-ad,' // 頁首廣告
,'#trialsquad-post,' // 主文標題下方的橘紅色廣告
,'#main .header-fixed-area,' // 文章前頭影音區
,'.trv-player-container,' // 廣告影片輪播
,'div[id^="div-gpt-ad"],' // 內文廣告
,'.tag-container.global-keyword,' // 全站熱搜
,'div[class^="article-footer article-ad"],'
,'.in-read-ad.product-recommend,' // 推薦熱銷商品
,'#recommend-topic,' // 你可能感興趣的話題
,'.pix-nerd-article,' // 乎你看更多 手機版
,'.web_to_app__container,' // 文章末尾廣告
,'div[id^="dablewidget_"],' // 你可能有興趣的文章 dable
,'.anchor-ad-container.anchor-ad-container__show,'
,'.pix-related-post-2023,' // 大家都在看
,'#article-hot-wrapper,' // 兒少不宜
,'.discover-stream,' // 兒少不宜
,'.AD2M-CrazyWrap,' // 蓋版影音廣告
,'.AD2M-CrazyClose,' // 上項的關閉按鈕
,'#onead-layout0,' // 蓋版影音廣告
,'vmfive-ad-unit,' // 蓋版影音廣告 (回上頁)
,'#avividai_you_like_container,' // 蓋版廣告 (回上頁)
,'.adsbygoogle { display:none!important; height:0!important; }'
,'.article-author { margin-top:50px; padding-top:12px }'
,'</style>'].join('');
--></script>
Part 3. 手機版: 修改你的每一篇文章
要擋手機版的廣告會很煩. 主要是因為
- 你自訂的電腦版 CSS 不會被套用在手機版上.
- 文章中的 <style> 或者 <link> 在用手機看時會被洗掉. (隨著 pixnet 的改版, 這二個 tag 在手機版大部份時間會被清掉, 但偶而又可以工作.)
- 文章中的<script>如果不符合特定的撰寫格式, 在用手機看時也會被洗掉. 不用多說, 如果 JS 程式沒寫對, 執行時發生錯誤, 也是直接被洗掉.
- 某些特定的 HTML tag 組合在手機版輸出也會出錯. 例如: 用 <label> tag 包住 <img> + <p> tag. 在手機版會變成一個 <label> tag 包住 <img> + 一個 <p> tag 包住 <label> tag.
手機版有字型縮放 (A-|A|A+) 的 CSS, 也會影響文章部份的 CSS (字體大小變化, 及上下標位置).這個功能已經被取消了.- pixnet 有時候會有些異動, 新增一些廣告段落, 或者改變一些寫法. 如果這些 JS 和 CSS 直接插入在貼文中, 就會又需要一篇又一篇的再修改一遍.
為了解決這些問題, 我寫了二段 JS 程式: 一段是要貼在文章中的 (比較短) 用來載入第二段 JS 程式. 第二段 JS 程式則會處理上述的幾個問題, pixnet 有異動時也可以輕鬆的只改一處所有的貼文就都套用新的修正.
第一次用的人要先找個地方 (網路空間) 放置你自己的第二段 JS 程式. 詳細的作法請你參看我的這一篇貼文.(Google Drive 直接下載的 API 界面於 2021Q1 更動了, 使用 Google Drive 的用戶請小心此一修正.)2021/08/11Google Drive 裡的檔案已經完全無法用於此一功能2024/09/25.
第二段 JS 程式如下: (下載點) 2024/10/14 更新 (Part 3).
document.getElementById("CSS_NO_AD").outerHTML=[
'<style>'
,'.adsbyfalcon.pixnet-ad,' // 頁首廣告
,'#trialsquad-post,' // 主文標題下方的橘紅色廣告
,'#main .header-fixed-area,' // 文章前頭影音區
,'.trv-player-container,' // 廣告影片輪播
,'div[id^="div-gpt-ad"],' // 內文廣告
,'.tag-container.global-keyword,' // 全站熱搜
,'div[class^="article-footer article-ad"],'
,'.in-read-ad.product-recommend,' // 推薦熱銷商品
,'#recommend-topic,' // 你可能感興趣的話題
,'.pix-nerd-article,' // 乎你看更多 手機版
,'.web_to_app__container,' // 文章末尾廣告
,'div[id^="dablewidget_"],' // 你可能有興趣的文章 dable
,'.anchor-ad-container.anchor-ad-container__show,'
,'.pix-related-post-2023,' // 大家都在看
,'#article-hot-wrapper,' // 兒少不宜
,'.discover-stream,' // 兒少不宜
,'.AD2M-CrazyWrap,' // 蓋版影音廣告
,'.AD2M-CrazyClose,' // 上項的關閉按鈕
,'#onead-layout0,' // 蓋版影音廣告
,'vmfive-ad-unit,' // 蓋版影音廣告 (回上頁)
,'#avividai_you_like_container,' // 蓋版廣告 (回上頁)
,'.adsbygoogle { display:none!important; height:0!important; }'
,'.article-author { margin-top:50px; padding-top:12px }'
,'</style>'].join('');
第一段 JS 程式如下, 請附加在每一篇文章的最後面 (放前面會影響你在 google 的 SEO):
這一段 JS 目前無法正常工作, 請暫時改用前面 Part3-1 或 Part3-2 的方法.這一段 JS 已經修正了. (2020/04/042024/09/25 更新)
<p id="CSS_NO_AD"></p>
<script>
(function (o, url) {
let s = document.createElement(o)
s.src = url
s.async = true
document.head.appendChild(s)
})("script", "你要加載的 JS URL, 也就是上面產出的下載 JS URL")
</script>
- 請記得把這一段 "你要加載的 JS URL, 也就是上面產出的下載 JS URL" 改掉. 如果是用 Microsoft OneDrive 的話它的格式 應該長這樣:
"https://onedrive.live.com/download?cid=...&resid=...&authkey=..." - 修改文章時要用 "舊版" 管理介面, 並請用 "純文字模式", 同時修改中不要切換 "編輯器", 貼上上述 JS, 並且記得把 "系統換行" 設定為 "不要系統換行", 然後直接存檔. 詳細請參考下面 圖1. 圖2. 或者參考這一篇貼文的第一段的第二個方法的說明.
- Pixnet 已經把舊版的編輯器整合到新版管理介面中了, 你可以在新版管理介面上的 擴充管理功能 裡安裝 部落格舊編輯模擬器 這個 plugin 就可以繼續使用舊的編輯器. 設定和操作則完全和原本舊版的一樣. 2019/10/18
- 後續如要修改文章也請用 "純文字模式". 如果因為不熟 HTML tag, 切換模式, 修改文章並存檔之後, 記得切回 "純文字模式", 將被更動過的 JS 刪除, 並重新貼上上述的 JS. (或者先刪掉 JS, 修改完文章後再重新加上)
切換為純文字模式
貼上 JS 程式, 並把 "系統換行" 設定為 "不要系統換行"
更新 2020/02/10
應讀者要求增加移除 '全站熱搜' 的 CSS. 手機版新增部份如下:
,'.tag-container-parent .tag-container.global-keyword,'
不需要的人可以不用改, 或者行首加上//加它變成註解.
// ,'.tag-container-parent .tag-container.global-keyword,'
更新 2020/04/03
新增 Part 3-1, 和 Part 3-2 二段作為暫時因應 pixnet 阻擋 JS 載入的解決方案.
更新 2020/04/04
修正載入外部 JS 的小程式. 原本的 JS:
<script><!--
(function (url, callback) {
var script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
if (callback)
script.onload = callback;
document.getElementsByTagName('head')[0].appendChild(script);
})("你要加載的 JS URL, 也就是上面產出的下載 JS URL");
--></script>
修正後的 JS:
<script><!--
(function (tag, url, callback) {
var script = document.createElement(tag);
script.setAttribute('type', 'text/javascript');
script.setAttribute('src', url);
if (callback)
script.onload = callback;
document.getElementsByTagName('head')[0].appendChild(script);
})("script", "你要加載的 JS URL, 也就是上面產出的下載 JS URL");
--></script>
更新 2021/01/26
加入 2 行阻擋行動版螢幕下方的廣告.
,'.pixnet-happix-pilot__sticky-box,'
,'.pixnet-happix-pilot__sticky-box *,'
更新 2022/07/06
和我自己用的 script 內容同步. (實在很抱歉, 有一段時間忘了更新這一篇)
更新 2024/09/03
和我自己用的 script 內容同步.
更新 2024/09/14
重新設定, 刪除已經沒有用到的 CSS selector. 舊版 (2024/09/14) 備份如下:
document.getElementById("CSS_NO_AD").outerHTML=[
'<style>'
,'#idle-pop,'
,'.pop-ad-cover,'
,'.content a.close.hide.left,'
,'.content div.iframe a,'
,'.content div.iframe a img,'
,'.hot-articles,'
,'#scupio_interstitialad,'
// ,'div[class^="article-footer article-ad"],'
,'ins.pixnet-ad,'
,'section.discover-stream,'
,'div[class*="article-ad"],'
,'div[id^="div-gpt-ad"],'
,'div[id^="pixad"],'
,'.tag-container-parent .tag-container.global-keyword,'
,'.pix-related-post-2023,'
,'ul.pix-related-post > div,'
,'.rp-wrapper .related-products,'
,'.innity-apps-overlay-card-ad,'
,'ul.relative-list > div,'
// ,'li.relative-item > div[id],'
// ,'li.relative-item.relative-item--ad,'
// ,'li.relative-item[data-source^="ad_"],'
,'li.relative-item:not([data-article-url$="?pixfrom=related"]),'
,'.header-ad,'
,'.article-inlist-ad,'
,'.in-read-ad.product-recommend,'
,'.innity-in-post,'
,'.pixnet-happix-pilot__sticky-box,'
,'.pixnet-happix-pilot__sticky-box *,'
,'#main .header-fixed-area,'
// ,'#pilot div.pixnet-happix-pilot__launcher-bar,'
,'.in-read-ad-sticky-wrapper:not(.disable-sticky).active-sticky,'
,'div[data-widget_id],'
,'div.related, div.mgbox, div.GoogleActiveViewElement,'
,'#onead-layout0,'
,'#trialsquad-post,'
,'#recommend-topic,'
,'.pix-nerd-article,'
,'.adsbygoogle { display:none!important; height: 0px!important; min-height: 1px!important }'
,'</style>'].join('');
更新 2024/09/23
漏了一個 CSS selector. 更動前 CSS 如下:
,'.AD2M-CrazyWrap,' // 蓋版影音廣告
,'#onead-layout0,' // 蓋版影音廣告
更動後 CSS 如下:
,'.AD2M-CrazyWrap,' // 蓋版影音廣告
,'.AD2M-CrazyClose,' // 上項的關閉按鈕
,'#onead-layout0,' // 蓋版影音廣告
更新 2024/09/25
修復 Part 3-1 的功能, 並同步摭住廣告用的 CSS.
重寫 JS 檔載入程式 (舊版依然可以用於載入置於 MS OneDrive 的 JS 檔). 共有二個版本可供使用選擇. 版本一內容如下:
<p id="CSS_NO_AD"></p>
<script>
(function (o, url) {
let s = document.createElement(o)
s.src = url
s.async = true
document.head.appendChild(s)
})("script", "你要加載的 JS URL, 也就是上面產出的下載 JS URL");
</script>
此版本比較簡短, 用於載入單一 JS 檔.
版本二內容如下:
<p id="CSS_NO_AD"></p>
<script>
function myScript(o, url) {
let s = document.createElement(o)
s.src = url
s.async = true
document.head.appendChild(s)
return new Promise((fa, fj) => { s.onload = ()=>fa(); s.onerror = ()=>fj(); })
}
</script>
版本二的好處是:
- 改為具名函數, 要載入多個 JS 檔時比載方便.
- 回傳值為 Promise 物件, 提高應用時的程式可讀性.
- 因回傳 Promise 物件, 故可以直接後掛 .then() 用於外掛完成載入後的處理動作. 以及後掛 .catch() 用於外掛載入錯誤的處理動作.
- 平時應用只載入一個 JS 時:
myScript("script", "你要加載的 JS URL, 也就是上面產出的下載 JS URL"); - 應用於載入多個 JS 時: (第二個檔案外掛載入後的處理程式)
myScript("script", "你要加載的 JS URL, 也就是上面產出的下載 JS URL"); myScript("script", "highlight.js plugin 檔 mergeHTMLPlugin 的 url") .then( data => { if (typeof(hljs) !== 'undefined') { hljs.addPlugin(mergeHTMLPlugin) hljs.configure({ignoreUnescapedHTML: true}) } } );
更新 2024/10/14
Part 3-1 異動
追加二個摭住廣告的 CSS. 原先 part3-1 CSS 如下:
#onead-layout0, /* 蓋版影音廣告 */
.adsbygoogle { display:none!important; height:0!important; }
追加後 CSS 如下:
#onead-layout0, /* 蓋版影音廣告 */
vmfive-ad-unit, /* 蓋版影音廣告 (回上頁) */
#avividai_you_like_container, /* 蓋版廣告 (回上頁) */
.adsbygoogle { display:none!important; height:0!important; }
Part 3-2 異動
原先 part3-2 JS 如下:
,'#onead-layout0,' // 蓋版影音廣告
,'.adsbygoogle { display:none!important; height:0!important; }'
追加後 JS 如下:
,'#onead-layout0,' // 蓋版影音廣告
,'vmfive-ad-unit,' // 蓋版影音廣告 (回上頁)
,'#avividai_you_like_container,' // 蓋版廣告 (回上頁)
,'.adsbygoogle { display:none!important; height:0!important; }'
Part 3 異動
原先 part3 JS 如下:
,'#onead-layout0,' // 蓋版影音廣告
,'.adsbygoogle { display:none!important; height:0!important; }'
追加後 JS 如下:
,'#onead-layout0,' // 蓋版影音廣告
,'vmfive-ad-unit,' // 蓋版影音廣告 (回上頁)
,'#avividai_you_like_container,' // 蓋版廣告 (回上頁)
,'.adsbygoogle { display:none!important; height:0!important; }'
MagicJackTing 發表在 痞客邦 留言(60) 人氣( 1803 )
請先 登入 以發表留言。