作者laechan (揮淚斬馬雲)
看板Web_Design
標題Re: [心得] 遊記文草稿.htm
時間Tue Dec 1 12:32:03 2020
將上次的東西做了修改後，實現了我以前想做的"網頁模板"
展示網頁
https://sites.google.com/view/myjapantravel
原始碼很長就不貼了。
上面的網頁分為 top 層，以及下方的 left、right 兩個區塊，使用
的基本 div 規劃如下
<head>
<div style='position:fixed;top:0;height:100;font-size:40px'>
2014-2019<BR>日本自助旅行
</div>
</head>
<body bgcolor="#93FF93">
<div>
<div style='position:fixed;top:110;float:left;width:260px' valign=top
id=left_menu>
</div>
<div style='position:relative;top:110;left:270;float:left' id=show_zone>
</div>
</div>
head 區，position:fixed 時，固定在 top=0 的位置，整個 div 高度則設為 100。
body 區，第一個子 div float=left 即顯示在最左邊，第二個子 div float=left
代表顯示在第二個左邊區。(如果給 right，它會變成對半，我只是要它緊鄰)
第一個子 div position 給 fixed 代表我要它不受捲軸滾動影響，固定顯示在
left 的 top=110 位置，寬度 260px，也就是左側選單的寬度。
第二個子 div position 給 relative，初始顯示位置為 top=110、left=270 的
位置，也就是右側內容的初始顯示位置。
一般都會用 css 去 config 這些參數，我這是老派作風。
左側選單的程式碼如下:
function left_menu()
{
str="<a onclick='ext_or_not(this,\"table1\")'>＋自助行遊記</a><BR>"+
"<table id=table1 style='display:none'>";
for(i=0;i<travels.length;i++)
str+="<tr><td> <a onclick='show_zone(\""+travels[i]+"\")'>"+
"<u><font color=blue>"+travels[i]+"</font></u></a></td></tr>";
str+="</table><p>";
.
.
document.getElementById("left_menu").innerHTML=str;
}
document.getElementById("left_menu").innerHTML=str 即是將產生的左側
選單字串(str) 透過 innerHTML 方法顯示在左側。
點擊每一個左側選單的母項目(如自助行遊記)時，它會呼叫 ext_or_not 函數
function ext_or_not(aa,tid)
{
v=aa.innerHTML;
if(v.indexOf("＋")!=-1)
v=v.replace(/＋/gi,"－");
else
v=v.replace(/－/gi,"＋");
aa.innerHTML=v;
if(document.getElementById(tid).style.display=="none")
document.getElementById(tid).style.display="block";
else
document.getElementById(tid).style.display="none";
}
把母項目前面的 ＋ 號變 － 號(再按一次則還原)，同時將以下原本設定
"display:none" 的子項目(即預設隱藏)，變更為 "display:block" 即更
改為顯示(再按一次則又變回隱藏)。
點擊每一個子項目時，它會呼叫 show_zone 函數，這個函數的內容大部份
與前篇的內容是類似的，也就是以這個內容為基礎去擴張後，即得到我真正
想呈現的樣貌:
function show_zone(pid)
{
// 一樣去讀 <pre> ... </pre> 内的內容
content=document.getElementById(pid).innerHTML;
// 然後對每一行做解析
tmps=content.split("\n");
for(i=0;i<tmps.length;i++)
{
tmp=tmps[i];
if(tmp=="") continue;
if(tmp.indexOf("http")!=-1)
{
s=tmp.indexOf("http");
e=s;
while(e++<tmp.length)
if(tmp.substr(e,1)==" ")
break;
if(e==s)
e=tmp.length-1;
url=tmp.substr(s,e-s);
tmp=tmp.substr(0,s)+"<a href='"+url+"' target=_blank>"+url+"</a>";
if(url.indexOf("imgur.com")!=-1 || url.substr(-4,1)==".")
{
if(url.substr(-4,1)!=".") url+=".jpg";
tmp+="<BR><a href='"+url+"' target=_blank>"+
"<img width="+MEDIA_WIDTH+" src='"+url+"'></a><BR>";
}
else if(url.indexOf("youtu")!=-1)
{
urls=url.split("watch?v=");
url=urls[0]+"embed/"+urls[1]+"?rel=0";
tmp+="<BR><iframe width="+MEDIA_WIDTH+" height="+
MEDIA_HEIGHT+" src='"+url+"' frameborder=0 allow='"+
"accelerometer; clipboard-write; encrypted-media; "+
"gyroscope; picture-in-picture' allowfullscreen></iframe><BR>";
}
tmps[i]=tmp;
}
else
tmps[i]=tmp.replace(/ /gi," "); // 把大部份行的空白以   替代
}
content="<font size="+FONT_SIZE+">"+tmps.join("<BR>")+"</font>";
document.getElementById("show_zone").innerHTML=content;
window.scrollTo(0, 0);
}
window.scrollTo(0, 0); 的意思就是，我希望使用者每點擊一次子項目，
就自動回捲到最上面。早前我用 href 的做法，它在協作網頁上會出現不
符預期的錯誤(不管是 a href 或 window.location.href 都一樣)，但是
用 window.scrollTo(0, 0); 就不會。
如果沒有使用 window.scrollTo(0, 0)，在觀看某個文章到一半，點擊其
它文章時，它不會從最上面開始。
這是 google 到的，我事前也不知道有這東西，而且我是先找到 jQuery
的做法，然後才推敲應該 JS 本身就有支援的語法。
那所以透過 document.getElementById("show_zone").innerHTML 顯示出
右側內容後，再用 window.scrollTo(0, 0) 就可以把捲軸回捲到最上面，
這樣每點擊一篇文章，就都會從最上面開始。
從上面可看出它的 frame 結構其實是透過 <div> 虛擬而成的，我很早就
想寫這個，因為協作網頁要以內嵌程式碼的方式去弄 frame 我覺得挺困難
的，但是用虛擬的就沒問題了，所有的資料(連同遊記文)全都放在同一個
.htm 檔內，並能依我自訂的「網頁模板」去顯示我的網站內容。
而以下就可視為我自己簡單架設的網站(它其實只是一個網頁)
https://sites.google.com/view/myjapantravel
而且頁面呈現大多可由我自訂，如同其它部落客的網站一樣。
目前它的缺點是還沒有辦法透過在網址後給定參數的方式，去顯示特定的
文章，下午再來研究。
不過它不是我的重點，確定能以這個來虛擬 frame/網站分頁 才是我的主
要目的。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.33.66.104 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1606797127.A.DB0.html
※ 編輯: laechan (114.33.66.104 臺灣), 12/01/2020 14:06:50
1F：→ laechan: url後面抓參數挺麻煩的..大概用其它變通的做法 12/02 10:48
2F：推 cocoasheep: 最大的問題應該是檔案大小吧，光載入一頁就36MB 01/10 18:45
3F：→ laechan: 其實這東西我選擇用javascript寫是有點想在自己本機跑的 01/14 08:03
4F：→ laechan: 用意，只是因為剛好也是htm檔所以也能丟到協作平台 01/14 08:03
5F：→ laechan: 隨身碟我是隨身攜帶的,主要就是想要找遊記資料時隨時可叫 01/14 08:04
6F：→ laechan: 出來,它若不載入圖片或圖片有經打薄其實消耗流量不會很高 01/14 08:05
7F：推 cocoasheep: 原來如此 蠻方便的 01/16 20:53