게시물 본문에 있는 h2 ~ h6 태그를 수집해서, 게시물 상단에 목차를 뿌려주는 스크립트를 짰습니다.
관리자 계정으로 들어가서 게시판 본문에 스크립트를 삽입하는 형식으로요.
일단은 잘 됩니다.ㅎㅎ

스크립트는 대략 이렇습니다.
(function($) {
var x = $('.xe_content:first');
if(x.find('h2').length) {
var ToC =
'<nav class="ap-toc">' +
'<p><strong>Table of Contents</strong></p>' +
'<ul>';
$('article h2').each(function(){
var e2 = $(this),
t2 = e2.text();
ToC +=
'<li>' +
'<a href="#">' + t2 + '</a>';
if(e2.nextAll('h3').length) {
ToC += '<ul>';
e2.nextUntil(e2.nextAll('h2'), 'h3').each(function(){
var e3 = $(this),
t3 = e3.text();
ToC +=
'<li>' +
'<a href="#">' + t3 + '</a>';
if(e3.nextAll('h4').length) {
ToC += '<ul>';
e3.nextUntil(e3.nextAll('h3'), 'h4').each(function(){
var e4 = $(this),
t4 = e4.text();
ToC +=
'<li>' +
'<a href="#">' + t4 + '</a>';
if(e4.nextAll('h5').length) {
ToC += '<ul>';
e4.nextUntil(e4.nextAll('h4'), 'h5').each(function(){
var e5 = $(this),
t5 = e5.text();
ToC +=
'<li>' +
'<a href="#">' + t5 + '</a>';
if(e5.nextAll('h6').length) {
ToC += '<ul>';
e5.nextUntil(e5.nextAll('h5'), 'h6').each(function(){
var e6 = $(this),
t6 = e6.text();
ToC +=
'<li>' +
'<a href="#">' + t6 + '</a>' +
'</li>';
});
ToC += '</ul>';
}
ToC += '</li>';
});
ToC += '</ul>';
}
ToC += '</li>';
});
ToC += '</ul>';
}
ToC += '</li>';
});
ToC += '</ul>';
}
ToC += '</li>';
});
ToC += '</ul>' +
'</nav>';
x.prepend(ToC);
$('.ap-toc').css({
'margin-bottom' : '40px',
'border' : '1px solid #ccc',
'padding' : '5%'
});
$('.ap-toc ul').css('margin-left', '15px');
x.find('h2, h3, h4, h5, h6').each(function(i){
$(this).attr('id', 'section' + i);
});
$('.ap-toc ul li a').each(function(i){
$(this).attr('href', '#section' + i);
$(this).click(function(e){
e.stopImmediatePropagation();
});
});
}
})(jQuery);
var x = $('.xe_content:first');
if(x.find('h2').length) {
var ToC =
'<nav class="ap-toc">' +
'<p><strong>Table of Contents</strong></p>' +
'<ul>';
$('article h2').each(function(){
var e2 = $(this),
t2 = e2.text();
ToC +=
'<li>' +
'<a href="#">' + t2 + '</a>';
if(e2.nextAll('h3').length) {
ToC += '<ul>';
e2.nextUntil(e2.nextAll('h2'), 'h3').each(function(){
var e3 = $(this),
t3 = e3.text();
ToC +=
'<li>' +
'<a href="#">' + t3 + '</a>';
if(e3.nextAll('h4').length) {
ToC += '<ul>';
e3.nextUntil(e3.nextAll('h3'), 'h4').each(function(){
var e4 = $(this),
t4 = e4.text();
ToC +=
'<li>' +
'<a href="#">' + t4 + '</a>';
if(e4.nextAll('h5').length) {
ToC += '<ul>';
e4.nextUntil(e4.nextAll('h4'), 'h5').each(function(){
var e5 = $(this),
t5 = e5.text();
ToC +=
'<li>' +
'<a href="#">' + t5 + '</a>';
if(e5.nextAll('h6').length) {
ToC += '<ul>';
e5.nextUntil(e5.nextAll('h5'), 'h6').each(function(){
var e6 = $(this),
t6 = e6.text();
ToC +=
'<li>' +
'<a href="#">' + t6 + '</a>' +
'</li>';
});
ToC += '</ul>';
}
ToC += '</li>';
});
ToC += '</ul>';
}
ToC += '</li>';
});
ToC += '</ul>';
}
ToC += '</li>';
});
ToC += '</ul>';
}
ToC += '</li>';
});
ToC += '</ul>' +
'</nav>';
x.prepend(ToC);
$('.ap-toc').css({
'margin-bottom' : '40px',
'border' : '1px solid #ccc',
'padding' : '5%'
});
$('.ap-toc ul').css('margin-left', '15px');
x.find('h2, h3, h4, h5, h6').each(function(i){
$(this).attr('id', 'section' + i);
});
$('.ap-toc ul li a').each(function(i){
$(this).attr('href', '#section' + i);
$(this).click(function(e){
e.stopImmediatePropagation();
});
});
}
})(jQuery);
문제는!!
이걸 애드온으로 만들어보려고 하는데요.
... 잘 안 되네요ㅠ 애드온 만들기 초보자여서;;;
혹시 $called_position이라든지, js 불러올 때 유의해야 할 부분이 있을까요?
애드온 파일은 아래처럼 했는데요.
어떤 문제가 있는지 잘 모르겠어요.
도움 부탁 드립니다;;;
<?php
if(!defined('__XE__')) exit();
if($this->module == 'board' && $called_position == 'before_display_content' && Context::getResponseMethod() == 'HTML' && $this->act != 'dispBoardWrite')
{
Context::loadFile(array('./addons/ap_table_of_contents/js/ap_table_of_contents.js', 'body', '', null), true);
}
if(!defined('__XE__')) exit();
if($this->module == 'board' && $called_position == 'before_display_content' && Context::getResponseMethod() == 'HTML' && $this->act != 'dispBoardWrite')
{
Context::loadFile(array('./addons/ap_table_of_contents/js/ap_table_of_contents.js', 'body', '', null), true);
}
윤삼
Lv. 19
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
댓글 0