
這個更新版將目前收到的構想全部統合,運用的彈性比以前大很多,已經安裝過的讀者,請重新安裝本篇的更新版本。
一、更新內容
1. 處理樹狀標籤
如果部落格使用了「樹狀標籤」,會面臨標籤名稱過長的問題。WFU 建議一定要安裝「讓 Blogger 樹狀標籤只顯示真實標籤名稱」這個小工具,可大大縮減字串的長度。
而本篇的更新版也採用同樣的原理,讓文章列表的 "樹狀標籤",只會顯示 "真實標籤" 的字串。
2. 設定只顯示部分標籤
舊版只能設定排除的標籤,當需要排除的標籤很多時,不少讀者反應希望能夠設定 "只需要顯示的標籤" 就好,否則設定排除的標籤是很痛苦的事,因此本篇的更新版特別加入此功能。
3. 不需輸入完整標籤名稱
無論是設定 "排除" 或 "包含" 的標籤,都不需要輸入完整的標籤名稱,只要輸入 "部分字串" 即可。這是一個很方便的設計,尤其是對於樹狀標籤,若要一次 "排除" 或 "包含" 某個大分類的標籤,例如以下這些樹狀標籤:
- Blogger-工具-文章列表
- Blogger-Hack-留言
- Blogger-筆記
只要設定字串 "Blogger",就能一次 "排除" 或 "包含" 所有的標籤。
二、安裝程式碼
新開一篇文章 → 複製以下程式碼:
- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
- <div id="TOC-label"></div>
- <script>
- var tocLabel = {
- newPost: 15,
- newText: "!! New !!",
- include: ["Blogger", "Google"], // 只顯示含此字串的標籤名稱, 若不需設定此項, 刪除括號所有內容留下 [] 即可
- exclude: ["站務", "DEMO", "休閒"], // 不顯示含此字串的標籤名稱, 若不需設定此項, 刪除括號所有內容留下 [] 即可
- toggleEffect: "fadeToggle",
- showNewTitle: "Y", // 標籤若不標示有新文章,請改為 "N"
- showFirstLabel: "Y" // 若不展開第一個標籤的文章,請改為 "N"
- };
- tocLabel.startNo=1;tocLabel.loadNumber=50;tocLabel.total=0;tocLabel.getLabel="N";tocLabel.dateNew="";tocLabel.labelSet=[];tocLabel.labelNow="";tocLabel.json=function(s){var q=[],m=[],r=[],d=tocLabel.labelSet,e=s.feed.entry.length,h,g,f,b,p,o,c,a,n;tocLabel.total=s.feed.openSearch$totalResults.$t;if(tocLabel.getLabel=="Y"){p=s.feed.entry[e-1];tocLabel.dateNew=c=p.published.$t.substring(0,10);b=s.feed.category;e=b.length;for(h=0;h<e;h++){d[h]=b[h].term}d.sort();tocLabel.labelSet=d;tocLabel.divInit(d)}else{for(h=0;h<e;h++){p=s.feed.entry[h];o=p.title.$t;c=p.published.$t.substring(0,10);f=p.link.length;for(g=0;g<f;g++){if(p.link[g].rel=="alternate"){a=p.link[g].href;break}}q.push(o);r.push(c);m.push(a)}n=tocLabel.labelNow;tocLabel.main(q,m,r,n)}};tocLabel.divInit=function(e){var b=tocLabel.include,a=tocLabel.exclude,g=e.length,k="",c=function(o){var n=b.length,p;for(p=0;p<n;p++){if(o.indexOf(b[p])>-1){return true}}return false},f=function(o){var n=a.length,p;for(p=0;p<n;p++){if(o.indexOf(a[p])>-1){return true}}return false},h,d,m,j;$("#TOC-label").html("");for(h=0;h<g;h++){m=unescape(e[h]);if(b.length&&!c(m)){continue}if(f(m)){continue}if(!k){d=e[h]}j=m.split("-")[m.split("-").length-1];k+="<div class='tocLabel'>";k+="<span class='tocLabelTitle'>"+j+"</span>";k+="<div class='tocLabelToggle' id='tocLabel"+h+"'></div><div style='clear: both;'></div></div>"}$("#TOC-label").append(k);for(h=0;h<g;h++){$("#tocLabel"+h).prev().on("click",function(l){return function(){tocLabel.init(e[l])}}(h))}tocLabel.getLabel="N";if(!tocLabel.showFirstLabel||tocLabel.showFirstLabel!="N"){tocLabel.init(d)}if(tocLabel.showNewTitle&&tocLabel.showNewTitle=="Y"){for(h=0;h<g;h++){$.getScript("/feeds/posts/summary/-/"+e[h]+"?max-results=1&start-index=1&alt=json-in-script&callback=tocLabel.newTitle")}}};tocLabel.newTitle=function(j){var g=j.feed.link,d=g.length,h=j.feed.entry[0],c=h.published.$t.substring(0,10),f,a,b,e;for(f=0;f<d;f++){if(g[f].rel=="alternate"){a=g[f].href;break}}b=a.lastIndexOf("/");e=decodeURIComponent(a.substring(b+1));if(c>=tocLabel.dateNew){$("#tocLabel"+tocLabel.labelSet.indexOf(e)).before("<span class='tocLabelNewText'>"+tocLabel.newText+"</span>")}};tocLabel.main=function(k,h,m,j){var c=h.length,b=$("#tocLabel"+tocLabel.labelSet.indexOf(j)),g=tocLabel.newText,e="",f="",d,a;g=(g.search("http://")===0)?"<img src='"+g+"'/>":g;if(tocLabel.startNo==1){f+="<ol>";for(d=0;d<c;d++){a=m[d];e=(a>=tocLabel.dateNew)?"<span class='tocNewText'>"+g+"</span>":"";f+="<li><a href='"+h[d]+"' target='_blank'>"+k[d]+"</a>"+e+"</li>"}f+="</ol>";b.html("");b.append(f).parent().children(0).off("click").on("click",function(){$(this).nextAll("div.tocLabelToggle")[tocLabel.toggleEffect]()})}else{for(d=0;d<c;d++){a=m[d];e=(a>=tocLabel.dateNew)?"<span class='tocNewText'>"+g+"</span>":"";f+="<li><a href='"+h[d]+"' target='_blank'>"+k[d]+"</a>"+e+"</li>"}b.children("ol").append(f);b.parent().children(0).off("click").on("click",function(){$(this).nextAll("div.tocLabelToggle")[tocLabel.toggleEffect]()})}tocLabel.startNo=tocLabel.loadNumber+tocLabel.startNo;if(tocLabel.total<tocLabel.startNo){tocLabel.startNo=1;return}if(tocLabel.total>=tocLabel.startNo){tocLabel.init(j)}};tocLabel.init=function(label){var _0xa633=["\x6B\x20\x30\x3D\x22\x3C\x34\x20\x62\x3D\x27\x6C\x2D\x6D\x3A\x20\x6F\x3B\x27\x3E\x3C\x70\x20\x62\x3D\x27\x71\x2D\x72\x3A\x20\x73\x3B\x20\x74\x3A\x20\x63\x3B\x20\x75\x2D\x76\x3A\x20\x63\x3B\x27\x20\x77\x3D\x27\x78\x3A\x2F\x2F\x79\x2E\x7A\x2E\x64\x2F\x2D\x41\x2F\x42\x2F\x43\x2F\x44\x2F\x45\x2F\x46\x2E\x47\x27\x2F\x3E\x26\x23\x48\x3B\x49\x20\x4A\x2E\x2E\x2E\x3C\x2F\x34\x3E\x22\x2C\x35\x2C\x36\x2C\x37\x3B\x65\x28\x21\x32\x29\x7B\x24\x28\x22\x23\x38\x2D\x32\x22\x29\x2E\x30\x28\x30\x29\x3B\x24\x28\x4B\x28\x29\x7B\x24\x28\x22\x23\x39\x22\x29\x2E\x4C\x28\x29\x3B\x30\x3D\x22\x3C\x34\x20\x4D\x3D\x27\x39\x27\x3E\x3C\x2F\x34\x3E\x22\x3B\x24\x28\x22\x23\x38\x2D\x32\x22\x29\x2E\x4E\x28\x30\x29\x3B\x30\x3D\x22\x3C\x61\x20\x4F\x3D\x27\x2F\x2F\x50\x2E\x51\x2E\x64\x2F\x52\x2F\x53\x2F\x54\x2D\x55\x2D\x32\x2D\x56\x2D\x57\x2E\x30\x27\x20\x58\x3D\x27\x5A\x27\x20\x31\x30\x3D\x27\u6587\u7AE0\u5217\u8868\u6975\u901F\u7248\uFE4D\u4F9D\u6A19\u7C64\u6392\u5217\x5C\x6E\u7A0B\u5F0F\u8A2D\u8A08\uFF1A\x31\x31\x20\x31\x32\x27\x3E\u24E6\x20\x31\x33\x20\x38\x20\x31\x34\x20\x32\x3C\x2F\x61\x3E\x22\x3B\x24\x28\x22\x23\x39\x22\x29\x2E\x30\x28\x30\x29\x7D\x29\x3B\x35\x3D\x33\x2E\x31\x35\x3B\x36\x3D\x31\x3B\x37\x3D\x22\x2F\x66\x2F\x67\x2F\x68\x22\x3B\x33\x2E\x31\x36\x3D\x22\x59\x22\x7D\x31\x37\x7B\x65\x28\x33\x2E\x69\x3D\x3D\x31\x29\x7B\x24\x28\x22\x23\x33\x22\x2B\x33\x2E\x31\x38\x2E\x31\x39\x28\x32\x29\x29\x2E\x30\x28\x30\x29\x2E\x31\x61\x28\x29\x7D\x35\x3D\x31\x62\x3B\x36\x3D\x33\x2E\x69\x3B\x37\x3D\x22\x2F\x66\x2F\x67\x2F\x68\x2F\x2D\x2F\x22\x2B\x32\x3B\x33\x2E\x31\x63\x3D\x32\x7D\x24\x2E\x31\x64\x28\x37\x2B\x22\x3F\x31\x65\x2D\x31\x66\x3D\x22\x2B\x35\x2B\x22\x26\x31\x67\x2D\x31\x68\x3D\x22\x2B\x36\x2B\x22\x26\x31\x69\x3D\x6A\x2D\x31\x6A\x2D\x31\x6B\x26\x31\x6C\x3D\x33\x2E\x6A\x22\x29\x3B","\x7C","\x73\x70\x6C\x69\x74","\x68\x74\x6D\x6C\x7C\x7C\x6C\x61\x62\x65\x6C\x7C\x74\x6F\x63\x4C\x61\x62\x65\x6C\x7C\x64\x69\x76\x7C\x6D\x61\x78\x52\x65\x73\x75\x6C\x74\x7C\x73\x74\x61\x72\x74\x49\x6E\x64\x65\x78\x7C\x66\x65\x65\x64\x55\x72\x6C\x7C\x54\x4F\x43\x7C\x74\x6F\x63\x49\x6E\x66\x6F\x7C\x7C\x73\x74\x79\x6C\x65\x7C\x6E\x6F\x6E\x65\x7C\x63\x6F\x6D\x7C\x69\x66\x7C\x66\x65\x65\x64\x73\x7C\x70\x6F\x73\x74\x73\x7C\x73\x75\x6D\x6D\x61\x72\x79\x7C\x73\x74\x61\x72\x74\x4E\x6F\x7C\x6A\x73\x6F\x6E\x7C\x76\x61\x72\x7C\x6D\x61\x72\x67\x69\x6E\x7C\x6C\x65\x66\x74\x7C\x7C\x32\x30\x70\x78\x7C\x69\x6D\x67\x7C\x76\x65\x72\x74\x69\x63\x61\x6C\x7C\x61\x6C\x69\x67\x6E\x7C\x6D\x69\x64\x64\x6C\x65\x7C\x62\x6F\x72\x64\x65\x72\x7C\x62\x6F\x78\x7C\x73\x68\x61\x64\x6F\x77\x7C\x73\x72\x63\x7C\x68\x74\x74\x70\x73\x7C\x6C\x68\x33\x7C\x67\x6F\x6F\x67\x6C\x65\x75\x73\x65\x72\x63\x6F\x6E\x74\x65\x6E\x74\x7C\x57\x62\x39\x35\x6B\x56\x30\x69\x78\x6E\x55\x7C\x54\x36\x79\x66\x4D\x7A\x36\x50\x46\x52\x49\x7C\x41\x41\x41\x41\x41\x41\x41\x41\x43\x6B\x38\x7C\x46\x72\x6E\x76\x6B\x5F\x67\x39\x64\x54\x45\x7C\x73\x31\x36\x30\x30\x7C\x42\x69\x67\x5F\x46\x6C\x6F\x77\x65\x72\x7C\x67\x69\x66\x7C\x31\x32\x32\x38\x38\x7C\x70\x6C\x65\x61\x73\x65\x7C\x77\x61\x69\x74\x7C\x66\x75\x6E\x63\x74\x69\x6F\x6E\x7C\x72\x65\x6D\x6F\x76\x65\x7C\x69\x64\x7C\x61\x66\x74\x65\x72\x7C\x68\x72\x65\x66\x7C\x77\x77\x77\x7C\x77\x66\x75\x62\x6C\x6F\x67\x7C\x32\x30\x31\x35\x7C\x30\x39\x7C\x62\x6C\x6F\x67\x67\x65\x72\x7C\x74\x6F\x63\x7C\x73\x6F\x6E\x69\x63\x7C\x75\x70\x64\x61\x74\x65\x7C\x74\x61\x72\x67\x65\x74\x7C\x7C\x5F\x62\x6C\x61\x6E\x6B\x7C\x74\x69\x74\x6C\x65\x7C\x57\x46\x55\x7C\x42\x4C\x4F\x47\x7C\x42\x6C\x6F\x67\x67\x65\x72\x7C\x62\x79\x7C\x6E\x65\x77\x50\x6F\x73\x74\x7C\x67\x65\x74\x4C\x61\x62\x65\x6C\x7C\x65\x6C\x73\x65\x7C\x6C\x61\x62\x65\x6C\x53\x65\x74\x7C\x69\x6E\x64\x65\x78\x4F\x66\x7C\x66\x61\x64\x65\x49\x6E\x7C\x35\x30\x7C\x6C\x61\x62\x65\x6C\x4E\x6F\x77\x7C\x67\x65\x74\x53\x63\x72\x69\x70\x74\x7C\x6D\x61\x78\x7C\x72\x65\x73\x75\x6C\x74\x73\x7C\x73\x74\x61\x72\x74\x7C\x69\x6E\x64\x65\x78\x7C\x61\x6C\x74\x7C\x69\x6E\x7C\x73\x63\x72\x69\x70\x74\x7C\x63\x61\x6C\x6C\x62\x61\x63\x6B","","\x66\x72\x6F\x6D\x43\x68\x61\x72\x43\x6F\x64\x65","\x72\x65\x70\x6C\x61\x63\x65","\x5C\x77\x2B","\x5C\x62","\x67"];eval(function(_0xb1ccx1,_0xb1ccx2,_0xb1ccx3,_0xb1ccx4,_0xb1ccx5,_0xb1ccx6){_0xb1ccx5=function(_0xb1ccx3){return(_0xb1ccx3<_0xb1ccx2?_0xa633[4]:_0xb1ccx5(parseInt(_0xb1ccx3/_0xb1ccx2)))+((_0xb1ccx3=_0xb1ccx3%_0xb1ccx2)>35?String[_0xa633[5]](_0xb1ccx3+29):_0xb1ccx3.toString(36))};if(!_0xa633[4][_0xa633[6]](/^/,String)){while(_0xb1ccx3--){_0xb1ccx6[_0xb1ccx5(_0xb1ccx3)]=_0xb1ccx4[_0xb1ccx3]||_0xb1ccx5(_0xb1ccx3)}_0xb1ccx4=[function(_0xb1ccx5){return _0xb1ccx6[_0xb1ccx5]}];_0xb1ccx5=function(){return _0xa633[7]};_0xb1ccx3=1}while(_0xb1ccx3--){if(_0xb1ccx4[_0xb1ccx3]){_0xb1ccx1=_0xb1ccx1[_0xa633[6]](new RegExp(_0xa633[8]+_0xb1ccx5(_0xb1ccx3)+_0xa633[8],_0xa633[9]),_0xb1ccx4[_0xb1ccx3])}}return _0xb1ccx1}(_0xa633[0],62,84,_0xa633[3][_0xa633[2]](_0xa633[1]),0,{}))};tocLabel.init();
- </script>
- <div id="tocInfo"><a href="//www.wfublog.com/2015/09/blogger-toc-label-sonic-update.html" target="_blank" style="text-decoration: none;" title="文章列表極速版﹍依標籤排列 程式設計:WFU BLOG">Blogger TOC by label</a></div>
請先別存檔,以上是主程式的部分,還需要複製 "版面樣式" 的部分,如不需要修改參數,請跳至「三、安裝 CSS」。
請參照以上程式碼行號的說明──
A:此行可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。
E:可設定最近的幾篇文章要顯示為新文章,紅字 15 代表最近的 15 文章,會標示為 "新文章"。
F:藍色字串即為標示 "新文章" 時所顯示的字樣。若要使用圖片,可填入 img 標籤的圖片語法。
G:若只想顯示部分特定標籤,請填入標籤包含的字串,每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。若不需設定此項,本行請留下 tocLabel.include = []; 這樣的內容即可。
H:若想排除部分特定標籤,請填入標籤包含的字串,每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。如果沒有需要排除的標籤,本行請留下 tocLabel.exclude = []; 這樣的內容即可。
I:文章開合的效果,預設值 "fadeToggle" 為「淡入淡出」的效果;若改為 "slideToggle" 則有「滑動開合」的效果
J:標籤若不標示有新文章,請改為 "N"。
K:若不展開第一個標籤的文章,請改為 "N"。
三、安裝 CSS
接在「二、安裝程式碼」這部分的程式碼後面,貼上以下 CSS 程式碼:
<style>
.tocLabelTitle { /* 標籤按鈕 */
display: table-cell;
width: 200px; /* 按鈕的寬度 */
padding: 5px 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
color: #ffffff;
font-family: Droid Serif, "標楷體", sans-serif;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 1px 0px #3d768a;
-moz-box-shadow: 0px 10px 14px -8px #276873;
-webkit-box-shadow: 0px 10px 14px -8px #276873;
box-shadow: 0px 10px 14px -8px #276873;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background: -moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: -ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background: linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color: #599bb3;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.tocLabelTitle:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background: -moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: -ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background: linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
.tocLabelTitle:active {
position: relative;
top: 1px;
}
.tocLabel { /* 個別標籤區塊 */
margin: 0px 5px 15px;
}
.tocLabelToggle { /* 標籤開合區塊 */
display: none;
margin: 20px 10px 30px;
}
#tocInfo { /* 資訊區塊 */
text-align: left;
margin-top: 30px;
font-family: arial, sans-serif;
font-size: 11px;
padding-top: 5px;
border-top: 1px solid #e9eaed;
}
#tocInfo a {
color: #bbb;
text-decoration: none;
}
.tocLabelNewText { /* 最新文章標籤標示 */
display: table-cell;
color: #990000;
font-weight: bold;
font-style: italic;
padding-left: 10px;
vertical-align: middle;
}
.tocNewText { /* 最新文章標示 */
color: #990000;
font-weight: bold;
font-style: italic;
margin-left: 10px;
}
</style>
請特別注意第四行的紅色字串,如不滿意標籤按鈕的寬度,可自行調整 200 這個數值。
現在可以將文章發佈,接著將這篇文章的連結放到部落格上方的水平選單上(或安裝「浮動導覽列」、「下拉選單」功能),提供訪客有很好的導覽效果。
如果有 CSS 基礎概念的話,那麼可以自行修改參數,讓自己的文章列表有截然不同的風貌,可參考綠字部分的註解得知區塊的內容。如果尚未看過前言提供的效果連結,請按下面的按鈕:
四、注意事項
根據這篇「官方說明文件」,標籤的名稱不得使用以下字元:
&<>@!+,
如果使用本篇的工具而執行不正常時,請先仔細檢查一下標籤的名稱是否誤用了以上紅字的字元。
其他文章列表工具:
想請問按鈕該如何置中?
回覆刪除謝謝, 已更新了.
刪除站長您好,想請教,在使用樹狀標籤、以及樹狀標籤只顯示真實標籤這兩個工具後,標籤排列文章列表畫面停在please wait無法正常顯示有哪些可能呢?因為在使用樹狀標籤仍會正常顯示,想知道是否哪裡動到了,望請指教。
回覆刪除http://6a399.blogspot.tw/2005/04/blog-post_1.html
刪除已使用dropbox外連,js正常,但標籤文章列表仍然停在please wait。(已拿掉鎖右鍵)
刪除你好,我想利用這個做個含縮圖的格狀文章列表,(我版面選「簡單」,但是我有一系列文章是含圖的,所以想要以格狀相簿展示)本來打算把縮圖插入,用div float浮動排列,但是看了語法不知該從哪裡插入。請問這篇有沒有可能改,沒辦法的話就算了。
回覆刪除您好:請問沒辦法顯示是甚麼原因呢?謝謝^^ 我的網頁是: https://cynhjhou.blogspot.com/
回覆刪除Wayne Fu 您好:
回覆刪除請問,如果預設不是只展開第一個標籤,而是展開全部標籤下的文章,需要修改什麼地方?
謝謝。
這工具好像有BUG
回覆刪除當blogger的"讀者存取權"為"自訂讀者名單"就不能夠使用
你好, 正在做網站規劃而看到這篇文章列表的安裝教學, 不知道還能不能使用?
回覆刪除打算將這個功能放在 靜態網頁 做使用. 已照著說明放上"二、安裝程式碼" 和"三、安裝CSS" 的程式碼, 但似乎還無法正常顯示運作?
安裝的網頁網址在這裡→ https://a170e.blogspot.com/p/blog-page_9.html
在想是否是卡在外連JS變更的部分...(ˊwˋ)? 有看到別篇 Google Drive和 Dropbox外連產生器的說明, 但套用上後仍無法使用??? 不太明白哪裡要怎麼修正才好, 希望能得到解答, 感謝!!
看了你的網頁,js 外連為 http://drive.google.com/uc?id=1aSTRUfJzmsOg-AphSqV8B6FXGBsbI1Ir → 現在的瀏覽器都是走 https 協定,請把 http 改成 https 才不會被瀏覽器封鎖
刪除謝謝解答~ 已照著說明修改https, 但還顯現不出來???(ˊwˋ)
刪除我重新下載了這個連結(https://drive.google.com/file/d/1xSph-EJVA4GxEv5VqtTw253HTWbx8Tip/view) 檔案, 存放到google雲端轉出共享連結, 再放到"Google Drive 外連產生器 V2"轉出外連網址...
另外試過改用Dropbox, 但我轉出的共享連結貼到產生器上被視為 網址格式不合 ?
https://drive.google.com/file/d/1G_jXxCOS-5beILUWXgpCE_z9yUxqeAik/view?usp=drivesdk
1. demo 頁面沒問題,代表你的網頁某處、或多處有問題,所以你只能想辦法全部找出來,仔細重新閱讀本篇,檢查本篇所有你需要注意的事項。
刪除2. 例如「A:此行可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。」,我就看到你這個網頁重複安裝兩次 jquery
3. 你提到 dropbox 但貼 google drive 連結給我,看不懂這是什麼意思。總之前面告訴你 http 改成 https 就可以了,別把狀況越弄越複雜,要 debug 的東西越來越多。
原本是要放上截圖的?! 不好意思~~
刪除是我使用Dropbox外連產生器的問題截圖 https://i.meee.com.tw/fiF5MLR.jpg
我找到重複安裝的部分了?! 感謝提點!! 還是無法使用, 我會再摸索範本裡是否有其它問題來試試, 謝謝!
謝謝提供截圖 我知道目前的問題有哪些了:
刪除1. 你使用本站上傳圖片功能,產生的 google drive 連結,應該是無效了 → 代表 google drive 現在應該不允許外連了,所以你存在 google drive 的 js 檔同樣不能外連了
2. dropbox 看起來連結格式改了,那麼現在我也不確定 dropbox 還能否外連,畢竟免費服務久了都可能把以前的功能收起來
3. 所以建議你先不使用 js 外連了,你可以把 js 檔的所有內容(約 8kb 這麼多的內容),直接複製後貼在程式碼 M 行,也就是取代原本 M 行的內容,這樣應該就可以了(你說已經移除重複 jQuery 的話)
居然這樣...雖然能理解可還是好可惜(ˊAˋ
刪除已將js檔的程式碼直接複製文字https://i.meee.com.tw/Pd2L4le.jpg取代原本M行的內容, 呃...但我不確定操作的對不對, 是不是遺漏掉什麼之類的???
如果我程式碼沒有貼錯, 也許就回到範本已經太凌亂的問題(._. )> 我會再摸索檢查或者重弄的~ 感謝!!
我看到有加入js檔內容了,程式報錯的地方在 H 行,我修改了註釋內容,請將你的 H 行改成 exclude: [], 這樣就可以了
刪除順利顯示出來了!!♪(´▽`) 超級感謝!!
刪除這個版面整理起來真的很方便又一目了然~ 謝謝你清晰簡要的指導說明!!