Re: [心得] 遊記文草稿.htm

作者: laechan (揮淚斬馬雲)   2020-12-01 12:32:03
將上次的東西做了修改後,實現了我以前想做的"網頁模板"
展示網頁
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,"&ensp;"); // 把大部份行的空白以 &ensp; 替代
}
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/網站分頁 才是我的主
要目的。
作者: laechan (揮淚斬馬雲)   2020-12-02 10:48:00
url後面抓參數挺麻煩的..大概用其它變通的做法
作者: cocoasheep (可樂綿羊OPEN啦!)   2019-01-10 18:45:00
最大的問題應該是檔案大小吧,光載入一頁就36MB
作者: laechan (揮淚斬馬雲)   2019-01-14 08:03:00
其實這東西我選擇用javascript寫是有點想在自己本機跑的用意,只是因為剛好也是htm檔所以也能丟到協作平台隨身碟我是隨身攜帶的,主要就是想要找遊記資料時隨時可叫出來,它若不載入圖片或圖片有經打薄其實消耗流量不會很高
作者: cocoasheep (可樂綿羊OPEN啦!)   2019-01-16 20:53:00
原來如此 蠻方便的

Links booklink

Contact Us: admin [ a t ] ucptt.com