안녕하세요. 제가 스크립트는 문외한이고 질문할 곳도 마땅치 않았는데, 이곳을 우연히 알게 되어 이렇게 염치불구하고 질문 올립니다.
제가 위 링크의 코드를 제 블로그(https://singingdalong.blogspot.com)에 적용하여 본문의 글을 요약문 형식으로 메인 화면에 보여주도록 했습니다. 그런데 이 요약문이라는 것이 무조건 본문의 첫 번째 텍스트부터 계산하는지라 막상 제가 원하는 본문은 빼먹기가 일쑤입니다. 그러니까 이 요약문에 특정 태그, 예를 들어 제가 본문 태그로 사용하는 div.my_text + p.p1 안에 있는 텍스트만 포함하게 할 수 있을까요?
그러니까 이 요약문에 특정 태그, 예를 들어 제가 본문 태그로 사용하는 div.my_text + p.p1 안에 있는 텍스트만 포함하게 할 수 있을까요?
<div class="my_text">
<p class="p1">
MMORPG 같은 온라인 게임은 ...
</p>
<p class="p1">
<mark>
분명히 이 방법은 통하지만 ...
</mark>
</p>
</div>
Yang Gun님 블로그의 본문에는 <p class="p1"> 태그가 여러 개 있습니다. 따라서 어느 <p class="p1"> 태그를 요약문으로 사용할지를 정해야 합니다. Yang Gun님께서 요약문에 넣기 원하는 <p> 태그의 클래스 속성의 이름을, 다른 <p> 태그 클래스 속성의 이름들과 다르게 부여 (예를 들면 요약문에 넣기 원하는 클래스 속성은 class="forsummary", 나머지 클래스 속성은 class="p1"으로 지정) 하는 것이 가능하다면 그 이후부터는 아래 JavaScript 코드를 좀 바꿔주는 것으로 해결할 수 있을 것 같네요.
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
// 아래 1줄은 제가 넣은 코드입니다
var forsummary = div.getElementByClassName("forsummary")[0];
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
// 아래 2줄의 코드 중, 윗 줄은 원 코드이고, 아래 줄은 제가 수정한 코드입니다
// var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
var summary = imgtag + '<div>' + removeHtmlTag(forsummary.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
고맙습니다. 첫 번째 추가 코드에 그냥 “P1” 입력한 다음 글자 수(summary_noimg)를 적당히 설정해 주니 본문(p1) 안에 있는 텍스트만 (순서대로) 메인 페이지 ‘요약문’에 보여줍니다. 'forsummary’라는 새 클래스를 만들어 원하는 본문만 '요약문’으로 표시하는 것도 잘되긴 하지만, 이렇게 하면 전체 글을 다 수정해야 하는 번거로움 때문에 현재로선 P1의 내용만 보여주는 것으로 만족해야겠습니다.
아니면 “forsummary” + “p1” 도 가능할까요? forsummary 클래스의 텍스트를 우선으로(앞으로 작성할 새 글을 위해) 읽어들이고, forsummary 클래스가 없으면 p1 클래스의 텍스트로 대체할 수 있는 (옛 글을 위해) 방법도 가능할까요?
아, 그리고 ‘getElementsByTagName’에서 ‘s’를 빼먹으신 것 같습니다. 덕분에 좀 헤맸습니다.
Yang Gun님이 언급하신 '본문(p1)'이 무엇을 의미하는지에 대해 제가 완전히 이해하지 못하고 답변드린 것 같네요. (안타깝게도 아직 이해를 완전히 하지 못했습니다) 하지만 어쨌든 도움이 되었다니 다행입니다.
그리고 아래 추가질문 관련해서는
forsummary 클래스의 텍스트를 우선으로(앞으로 작성할 새 글을 위해) 읽어들이고, forsummary 클래스가 없으면 p1 클래스의 텍스트로 대체할 수 있는 (옛 글을 위해) 방법도 가능할까요?
아래 코드와 같이 if문을 추가하면 될 것 같네요.
...
var forsummary = div.getElementsByClassName("forsummary")[0];
// 위의 처리 결과, <p class="forsummary">인 p태그가 없을 경우,
// <p class="p1">인 p태그들 중 첫번째 p태그를 선택하여 forsummary에 할당
if (forsummary === undefined) {
forsummary = div.getElementsByClassName("p1")[0];
};
...
제일 마지막에 언급하신
아, 그리고 ‘getElementsByTagName’에서 ‘s’를 빼먹으신 것 같습니다. 덕분에 좀 헤맸습니다.
부분은 아마 getElementsByClassName을 지칭하신 것 같은데, 말씀하신대로 s가 빠져있네요. 좀 헤매셨다니 죄송합니다. 그리고 위 코드의 getElementsByClassName에는 s를 포함했습니다.
죄송하다니요. 천만의 말씀이십니다. GetElementsByTagName에서 ‘s’자 하나 빼먹어도 눈치 못 채는 신출내기를 위해 자세히 설명해주셔서 몸 둘 바를 모르겠습니다. 너무나 고맙습니다. 위에서 언급하신 ‘if’ 구문을 여러 개 생성하니(예를 들어, 1이 없으면 2, 2가 없으면 3, 3이 없으면 4…) 제가 원하는 대로 완벽하게 작동합니다. 블로그 초기에 알았으면 이렇게 ‘if’ 구문을 여러 개 생성할 필요는 없었는데, 게시글이 500개나 되다 보니 일일이 수정하기가 너무 번거로워 일단은 이렇게 사용해야겠습니다.
자바스크립트 개발자 포럼