關於痞客邦的手機版廣告－傑克! 真是太神奇了!

提醒

本篇套用的是分享給大家的 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 檔的內容, 加上一點點頭尾, 然後直接貼在你的文章的後面.

2024/10/14 更新 (Part 3-2)

<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/11~~Google 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/04~~2024/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; }'

痞客邦廣告不要廣告手機版模式電腦版模式移除 MIB 廣告移除 pixnet 廣告

MagicJackTing

傑克! 真是太神奇了!

MagicJackTing 發表在痞客邦留言(44) 人氣()

E-mail轉寄

傑克! 真是太神奇了!

記性不好, 寫程式, 架主機...都需要看小抄!
歡迎光臨 MagicJack 在痞客邦的 '小抄' 天地

公告版位