Thursday, March 30, 2006
Archives를 드롭다운리스트에 넣고, 해당 월(月)이 나오게
시작:
2006.03
2006.02
2006.01
2005.12
많은 분들이 Archive 목록을 드롭다운리스트(Drop-down List)에 넣는데, 이것에 약간 불편한 점이 있었다. 가령, 현재 1월달 Archive를 보고 있는데도, 목록에 기본값으로 나타나 있는 Archive는 항상 최신 Archive이거나, 그냥 ARCHIVES 라는 문자열이었다.
필자가 며칠 전에 어떤 외국인의 블로그에서 Archive 목록을 훑어보았는데, 다음달 Archive를 읽기 위해 이동할 때마다, 이 드롭다운리스트가 최신 Archive로 리셋되어 버려서, 다음에 읽어야 할 Archive가 몇월 달의 것인지 잘 알 수 없었다.
2006.03
2006.02
2006.01 <- 만약 현재 이것을 읽고 있다면
2005.12
드롭다운리스트에 2006.01 이라고 표시되어야만, 다음에 읽어야할 Archive인 2005.12 의 것을 쉽게 선택할 수 있다. 그런데 항상 2006.03을 가리키고 있었다.
쉽게 말해서
https://mwultong.blogspot.com/2006_01_01_archive.html
이 주소의 페이지처럼 바꾸고 싶었다.
드롭다운목록은 <select> 와 <option> 태그로 만드는데, <option> 에 selected 라는 것을 넣어주면, 특정 항목을 기본값으로 만들 수 있다. 이번 달의 연월(예: 2006.02)을 기본값으로 지정해 주면 되는 것이다. 이것은 자바스크립트를 필요로 한다. (블로거(blogger.com)는 오래된 Archive 를 가장 위에 배치하기에, 자바스크립트로 순서도 뒤집어 주었다.)
템플릿에 넣어야 할 코드:
코드는 두 부분은 나누었다.
위와 같은 코드를 <head> 안의 적당한 곳에 넣어 둔다. 가장 아래가 적당할 것이다. GetArchiveDate() 라는 함수는, 현재 읽고 있는 Archive페이지의 월(月)을 리턴한다.
2006-04-08 업데이트: <ArchivePage></ArchivePage> 로 자바스크립트 함수를 감싸주었음. 다른 종류의 페이지에서 이 함수가 로딩되면, 브라우저 하단의 상태 바에 노란 삼각형 아이콘이 생기며 자바스크립트 경고가 나왔기 때문. 가령 아이템 페이지에서 로딩되면, 아이템 페이지의 포스트 제목이 이 함수 안에 들어가며, 이때 포스트 제목에 따옴표나 괄호가 있으면 자바스크립트와 충돌했음.
<ArchivePage></ArchivePage> 태그를 만들어, 위의 코드를 안에 넣어주면 된다. (단, ' 월호' 라는 문자열은 붙여주지 않아도 된다.)
2006-04-03 업데이트: 코드를 약간 최적화. 그 외에는 달라진 것 없음. 버전 1.05
참고 사항:
위의 드롭다운메뉴는 자바스크립트로 만들어져 있기에, 구글 같은 검색엔진이 읽을 수 없을 가능성이 높다. 따라서, 원래 Archive목록을 지우고, 이 드롭다운메뉴만을 사용하면, 검색엔진의 검색결과에 블로그가 나오지 않을 위험이 있다. 원래 Archive목록은 놔두고, 위의 드롭다운메뉴을 화면에 추가하는 방식을 택하는 것이 무난하다. ("블로그가 구글에 잘 인덱스 안되던 이유를 좀 알게 됨" 참조)
현재, 필자의 Archive 페이지 상단의 코드를 모두 공개하자면 다음과 같다.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
2006-04-03 업데이트: 위의 핵심 코드 버전 1.05을 반영했음
2006-04-03 4:49오후 업데이트: Back 버튼을 눌러 아카이브 페이지들을 살펴보는 경우, 드롭다운 리스트가 갱신되지 않고, 직전에 보던 달의 아카이브를 가리키고 있는 버그가 있었다. 그러나 도저히 고칠 수가 없었다. 코드의 문제가 아니라 브라우저 차원의 문제인 듯했다. 심지어 F5키를 눌러도 갱신되지 않았다. Ctrl+F5를 누르면 겨우 갱신되었다. 날짜 문자열에 (예: 2003.01) Ctrl+F5키에 해당되는 링크(javascript:window.location.reload(true);)를 넣어주는 방법밖에는 없었다. 그래서 바로 위의 코드박스가 약간 갱신되었다. 하루종일 이 문제로 고민하다가 시간을 다 보냈다.
노파심: 블로그 기본 페이지(Home)의 아카이브 목록은 이렇게 특정 월(月)을 표시해줄 필요도 없고, 해줄 수도 없다. 이것은 어디까지나 아카이브 페이지 안에서의 아카이브 목록의 경우다.
2006-04-03 6:46오후의 여담: 지금 생각해 보니 버그가 아니라 <select><option>... 태그에서는, 그런 것이 정상인 듯하다. 즉, "뒤로 가기 버튼" 등으로 네비게이션을 할 때는 원래, SELECTED 속성으로 지정해 준 항목으로 리셋되지 않는 것 같다. 괜히 버그로 착각하고 하루종일 고생했다.
2006.03
2006.02
2006.01
2005.12
많은 분들이 Archive 목록을 드롭다운리스트(Drop-down List)에 넣는데, 이것에 약간 불편한 점이 있었다. 가령, 현재 1월달 Archive를 보고 있는데도, 목록에 기본값으로 나타나 있는 Archive는 항상 최신 Archive이거나, 그냥 ARCHIVES 라는 문자열이었다.
필자가 며칠 전에 어떤 외국인의 블로그에서 Archive 목록을 훑어보았는데, 다음달 Archive를 읽기 위해 이동할 때마다, 이 드롭다운리스트가 최신 Archive로 리셋되어 버려서, 다음에 읽어야 할 Archive가 몇월 달의 것인지 잘 알 수 없었다.
2006.03
2006.02
2006.01 <- 만약 현재 이것을 읽고 있다면
2005.12
드롭다운리스트에 2006.01 이라고 표시되어야만, 다음에 읽어야할 Archive인 2005.12 의 것을 쉽게 선택할 수 있다. 그런데 항상 2006.03을 가리키고 있었다.
쉽게 말해서
https://mwultong.blogspot.com/2006_01_01_archive.html
이 주소의 페이지처럼 바꾸고 싶었다.
드롭다운목록은 <select> 와 <option> 태그로 만드는데, <option> 에 selected 라는 것을 넣어주면, 특정 항목을 기본값으로 만들 수 있다. 이번 달의 연월(예: 2006.02)을 기본값으로 지정해 주면 되는 것이다. 이것은 자바스크립트를 필요로 한다. (블로거(blogger.com)는 오래된 Archive 를 가장 위에 배치하기에, 자바스크립트로 순서도 뒤집어 주었다.)
템플릿에 넣어야 할 코드:
코드는 두 부분은 나누었다.
<head>
...중략...
<script type="text/javascript">
<ArchivePage>
function GetArchiveDate() {
var ArchiveTitle = new String("<$BlogPageTitle$>");
var DelStr = "<$BlogTitle$>" + ": ";
var ArchiveDate = ArchiveTitle.replace(DelStr, "");
return ArchiveDate;
}
</ArchivePage>
</script>
...중략...
</head>
...중략...
<script type="text/javascript">
<ArchivePage>
function GetArchiveDate() {
var ArchiveTitle = new String("<$BlogPageTitle$>");
var DelStr = "<$BlogTitle$>" + ": ";
var ArchiveDate = ArchiveTitle.replace(DelStr, "");
return ArchiveDate;
}
</ArchivePage>
</script>
...중략...
</head>
위와 같은 코드를 <head> 안의 적당한 곳에 넣어 둔다. 가장 아래가 적당할 것이다. GetArchiveDate() 라는 함수는, 현재 읽고 있는 Archive페이지의 월(月)을 리턴한다.
2006-04-08 업데이트: <ArchivePage></ArchivePage> 로 자바스크립트 함수를 감싸주었음. 다른 종류의 페이지에서 이 함수가 로딩되면, 브라우저 하단의 상태 바에 노란 삼각형 아이콘이 생기며 자바스크립트 경고가 나왔기 때문. 가령 아이템 페이지에서 로딩되면, 아이템 페이지의 포스트 제목이 이 함수 안에 들어가며, 이때 포스트 제목에 따옴표나 괄호가 있으면 자바스크립트와 충돌했음.
<div style="text-align:right; margin-bottom:30px;">
<script type="text/javascript">
var archives = new Array();
<BloggerArchives>archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');</BloggerArchives>
document.write('<select name=\"ArchiveMenu\" onchange=\"location.href=this.options[this.selectedIndex].value;\" style=\"background-color:#FFFFFF; color:#000000;\">');
for (var i = archives.length - 1; i >= 0; i--) {
document.write('<option value=\"' + archives[i][0] + '\"');
if (GetArchiveDate() == archives[i][1]) document.write(' selected=\"selected\"');
document.write('>' + archives[i][1] + ' 월호' + '</option>');
}
document.write('</select>');
</script>
</div>
<script type="text/javascript">
var archives = new Array();
<BloggerArchives>archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');</BloggerArchives>
document.write('<select name=\"ArchiveMenu\" onchange=\"location.href=this.options[this.selectedIndex].value;\" style=\"background-color:#FFFFFF; color:#000000;\">');
for (var i = archives.length - 1; i >= 0; i--) {
document.write('<option value=\"' + archives[i][0] + '\"');
if (GetArchiveDate() == archives[i][1]) document.write(' selected=\"selected\"');
document.write('>' + archives[i][1] + ' 월호' + '</option>');
}
document.write('</select>');
</script>
</div>
<ArchivePage></ArchivePage> 태그를 만들어, 위의 코드를 안에 넣어주면 된다. (단, ' 월호' 라는 문자열은 붙여주지 않아도 된다.)
2006-04-03 업데이트: 코드를 약간 최적화. 그 외에는 달라진 것 없음. 버전 1.05
참고 사항:
위의 드롭다운메뉴는 자바스크립트로 만들어져 있기에, 구글 같은 검색엔진이 읽을 수 없을 가능성이 높다. 따라서, 원래 Archive목록을 지우고, 이 드롭다운메뉴만을 사용하면, 검색엔진의 검색결과에 블로그가 나오지 않을 위험이 있다. 원래 Archive목록은 놔두고, 위의 드롭다운메뉴을 화면에 추가하는 방식을 택하는 것이 무난하다. ("블로그가 구글에 잘 인덱스 안되던 이유를 좀 알게 됨" 참조)
현재, 필자의 Archive 페이지 상단의 코드를 모두 공개하자면 다음과 같다.
※ 아래 박스 클릭 후, 키보드 화살표 키로 좌우 스크롤 가능함
<ArchivePage>
<div style="font-family:'Arial Black'; font-weight:normal; font-size:24pt; text-align:center; color:#A9E2C5; margin-top:15px;" title="월별 게시물 목록">Monthly Archive</div>
<script type="text/javascript">
document.write('<div style=\"text-align:center; margin-top:10px; margin-bottom:60px;\"><a href=\"javascript:window.location.reload(true);\" class=\"wasabi-no-uline\"><span style=\"font:italic bold 32pt \'Georgia\'; color:#C5C5E6;\">' + GetArchiveDate() + '</span></a></div>');
</script>
<noscript><div style="color:red; text-align:center; margin-top:20px; margin-bottom:60px;">JavaScript Disabled</div></noscript>
<div style="text-align:right; margin-bottom:30px;">
<script type="text/javascript">
var archives = new Array();
<BloggerArchives>archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');</BloggerArchives>
document.write('<select name=\"ArchiveMenu\" onchange=\"location.href=this.options[this.selectedIndex].value;\" style=\"background-color:#FFFFFF; color:#000000;\">');
for (var i = archives.length - 1; i >= 0; i--) {
document.write('<option value=\"' + archives[i][0] + '\"');
if (GetArchiveDate() == archives[i][1]) document.write(' selected=\"selected\"');
document.write('>' + archives[i][1] + ' 월호' + '</option>');
}
document.write('</select>');
</script>
</div>
<Blogger>
<BlogItemTitle>
<div style="font-family:'Arial'; font-size:10pt; font-weight:bold;" class="wasabi-fc-gray-cool"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div style="margin-bottom:3px;"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></div>
</BlogItemTitle>
</Blogger>
<p style="margin-bottom:50px;"></p>
</ArchivePage>
<div style="font-family:'Arial Black'; font-weight:normal; font-size:24pt; text-align:center; color:#A9E2C5; margin-top:15px;" title="월별 게시물 목록">Monthly Archive</div>
<script type="text/javascript">
document.write('<div style=\"text-align:center; margin-top:10px; margin-bottom:60px;\"><a href=\"javascript:window.location.reload(true);\" class=\"wasabi-no-uline\"><span style=\"font:italic bold 32pt \'Georgia\'; color:#C5C5E6;\">' + GetArchiveDate() + '</span></a></div>');
</script>
<noscript><div style="color:red; text-align:center; margin-top:20px; margin-bottom:60px;">JavaScript Disabled</div></noscript>
<div style="text-align:right; margin-bottom:30px;">
<script type="text/javascript">
var archives = new Array();
<BloggerArchives>archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');</BloggerArchives>
document.write('<select name=\"ArchiveMenu\" onchange=\"location.href=this.options[this.selectedIndex].value;\" style=\"background-color:#FFFFFF; color:#000000;\">');
for (var i = archives.length - 1; i >= 0; i--) {
document.write('<option value=\"' + archives[i][0] + '\"');
if (GetArchiveDate() == archives[i][1]) document.write(' selected=\"selected\"');
document.write('>' + archives[i][1] + ' 월호' + '</option>');
}
document.write('</select>');
</script>
</div>
<Blogger>
<BlogItemTitle>
<div style="font-family:'Arial'; font-size:10pt; font-weight:bold;" class="wasabi-fc-gray-cool"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
<div style="margin-bottom:3px;"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></div>
</BlogItemTitle>
</Blogger>
<p style="margin-bottom:50px;"></p>
</ArchivePage>
2006-04-03 업데이트: 위의 핵심 코드 버전 1.05을 반영했음
2006-04-03 4:49오후 업데이트: Back 버튼을 눌러 아카이브 페이지들을 살펴보는 경우, 드롭다운 리스트가 갱신되지 않고, 직전에 보던 달의 아카이브를 가리키고 있는 버그가 있었다. 그러나 도저히 고칠 수가 없었다. 코드의 문제가 아니라 브라우저 차원의 문제인 듯했다. 심지어 F5키를 눌러도 갱신되지 않았다. Ctrl+F5를 누르면 겨우 갱신되었다. 날짜 문자열에 (예: 2003.01) Ctrl+F5키에 해당되는 링크(javascript:window.location.reload(true);)를 넣어주는 방법밖에는 없었다. 그래서 바로 위의 코드박스가 약간 갱신되었다. 하루종일 이 문제로 고민하다가 시간을 다 보냈다.
노파심: 블로그 기본 페이지(Home)의 아카이브 목록은 이렇게 특정 월(月)을 표시해줄 필요도 없고, 해줄 수도 없다. 이것은 어디까지나 아카이브 페이지 안에서의 아카이브 목록의 경우다.
2006-04-03 6:46오후의 여담: 지금 생각해 보니 버그가 아니라 <select><option>... 태그에서는, 그런 것이 정상인 듯하다. 즉, "뒤로 가기 버튼" 등으로 네비게이션을 할 때는 원래, SELECTED 속성으로 지정해 준 항목으로 리셋되지 않는 것 같다. 괜히 버그로 착각하고 하루종일 고생했다.
tag: blogger
블로거 | 구글블로그 | Blogger.com + blogspot.com
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home