질문/공유팁 게시판

목차 애드온 0.3.4 (최종)

윤삼
조회 수 1696 추천 수 2
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

포인트 XE 마켓에 0.3.5 버전 업로드했습니다 ;)

https://xetown.com/xepoint/660678

 

아마도 이번 0.3 버전대가 사실상 마무리 버전이 될 듯합니다.

앞으로 별다른 기능 개선은 없을 듯해요. 그, 그러겠죠?

처음엔 습작으로 만든 거였는데, 일이 커졌다능;;

 

 

0. 변경사항 0.3.4

- [주요] 상단 툴바 높이 계산시, 옵션값을 px '증가' 처리돼 있던 것을 px '감소' 처리로 바꿈. 즉, 60px만큼 시작점을 내리려면 이제는 음수값이 아니라 양수값을 넣으면 됨

- 0.3.3에서 문서번호 없이 모듈번호로 제목을 호출하는 블로그 방식과 타임라인 모듈의 모듈번호 우회 방식이 충돌하는 문제 회피(@socialskyo님 제보)

+ 단 '타임라인 모듈 × 블로그 형식'을 동시에 쓰면, 목차 표제어가 없을 경우 문서 제목이 아니라 'Table of Contents'가 나오게 됨. 물론 이 방식은 거의 사용하지 않는 경우이므로 실제 일어날 가능성은 매우 희박하다고 봄

 

 

0. 변경사항 0.3.3

- 목차 표제어가 없는 경우 문서 제목이 나오게 되어 있는데, 문서번호가 없는 블로그 형태에서도 제목을 불러올 수 있도록 수정함

 

 

0. 변경사항 0.3.2

- h2 ~ h6 태그에 부여하는 id 값을 0이 아니라 1부터 시작하게 함

- 아울러 id를 일괄 부여하지 않고 하위 태그들을 계층화하여 식별하도록 함 (예. user_content_section_1_2_4_2_3)

- 외부링크 새창 띄우기 애드온과의 충돌을 회피함 (이상 @웹지기님 제안)

 

0. 변경사항 0.3.1

- h2 ~ h6 태그에 부여하는 id 값의 접두어를 라이믹스 방식에 따라 'user_content_'로 바꿈 (js 파일만 변경)

 

 

1. 변경사항 0.3

 

1) '접기/펼치기' 추가

- 목차 컨테이너 상단 표제어 클릭으로 리스트 접기/펼치기 가능 (아래 그림 하단 참조)

- 사용안함 선택도 가능

1.png

 

2) '플로팅' 추가

- @dongdong님 제안

- 사용 여부 선택 가능

- 플로팅 위치 선택 가능(좌상, 우상, 우하, 우좌)

- 화면 가로 사이즈 줄어들면 컨테이너의 본문 자동 삽입

- 컨테이너 바깥 여백 사용자 지정 가능

- z-index 값 사용자 지정 가능

2.png

 

3) '링크 이동' 보완

- 뒤로 가기 사용 여부 선택 가능

- 상단 툴바 높이 지정으로 효과적인 링크 이동 @socialskyo님 제안

- 링크 이동 속도 사용자 제어 가능

3.png

 

4) 그리고

- 리스트 스타일 부분 살짝 패치 (@휴리파파님 제안)

- 기진곰님 제안으로 본문 h2~h6 태그들에 id 부여시 접두어 부가

- 그리고, 또 뭐가 달라졌더라... 아, 알아맞혀보세요!!

 

 

2. 달라진 부분 스크린샷

 

1) 떠다니는 (사실상 구석에 유배된ㅋ) 목차

4.png

 

2) 클릭했더니 목차가 막 접혀버림

5.png

 

3) 이전 사항에 대해서는 아래를 참고

https://xetown.com/lakepark/654292

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 67
  • ?
    신기원이네요... 엄청납니다. 감사합니다.
  • ? profile
    피드백 덕분입니다. 감사해요~
  • profile
    우옷 이거 적용하는것도 쉽지가 않네요^^
  • profile profile
    일단 게시물 본문이 구조적으로 작성되어 있어야 하니까 아무래도요.
    점점 어려운 애드온이 된 느낌이긴 합니다;;;
  • profile ?
    뭔가 게시글에
    [1.] [2.]
    이렇게 작성하면 자동으로 긁어오는건 어떨까요?
  • ? profile
    게시판 이용자들이 공유하는 문법적 규칙이 있다면 가능할 거 같긴 해요.
    다만, 다들 중구난방으로 글을 쓰다보니 고려해야 할 경우의 수가 너무 많은 게 아무래도 어렵죠,
  • profile
    클릭시 새창으로 열리게 변경된건가요?
  • profile
    무슨 옵션인지 잘 모르겠지만 뒤로가기 옵션과 관계가 있네요.
  • profile profile

    어떤 상황인지 재연하기 어렵네요.

    설정 사항 말씀해주시면 자체 테스트 다시 해보겠습니다.
    그리고, 변수 이름이 살짝 바뀐 게 있어서 예전 버전 옵션이 남아 있다면 애드온 설정을 다시 해보시는 것도 좋을 것 같습니다.

  • profile profile
    뒤로가기를 사용하면 링크 클릭시 새창으로 문서가 뜨구요.
    뒤로가기를 사용하지 않는 것으로 설정하면 스크롤 다운 되어 문서 위치를 찾아갑니다.

    이게 뒤로가기 라는 옵션에 따라 작동하는데요. 이게 오류 인거 같아서요.
  • profile profile
    기존에는 섹션이동이벤트 ? 라는 옵션에 따라 결정되었는데 이것이 사라진 것 같더군요.
  • profile profile
    해시가 붙은 걸 외부링크로 인식해서 새 창을 열어주는 기능과 충돌을 일으키지 않나 싶은데요.

    js 파일 95행에서 e.stopImmediatePropagation(); 를 삭제하고,
    88~89행 사이에 e.preventDefault(); 를 넣어봐주세요.

    잘 돼야 될 텐데...
  • profile profile
    네, 그 부분을 소셜스쿄님 피드백(상단 고정 툴바 높이 문제) 반영하면서 변수명을 바꿨어요.
  • profile profile
    기존에 섹션이동이벤트 옵션으로 별도로 새창으로 할건지 아니면 문서 내에서 이동할건지 옵션은 없어진건가요?
  • profile profile
    기존에도 새 창으로 가진 않았어요;;
    해시 직접 이동은 '뒤로가기'가 가능한 거였고, 스크롤 이동은 불가능한 거였죠.

    이번에는 둘 다 스크롤 이벤트로 처리하되, 상단 높이를 더해서 이동하는 걸 적용한 거예요.
    일례로 XE타운에서 댓글 링크 이동하다보면 툴바 때문에 가려서 안 보이잖아요?
    그 부분을 회피하기 위해서 그렇게 한 거죠.
  • profile profile
    아, 그리고 링크 이동 속도를 500 으로 하시면 지난번 처럼 스무드하게(?) 이동될 겁니다.
  • profile profile
    아.. .원래부터 새창으로 가는게 문제가 있었던 거군요...

    말씀하신대로 js 파일 고쳤더니 옵션 사용해도 새창으로 가지 않네요.
    저는 예전버전 부터 그게 옵션인줄 알았네요 ㅋ
  • profile profile
    피드백 감사합니다. 해당 부분 수정해서 다시 업로드했어요ㅎㅎ
  • ?
    이쁘네요!
  • ? profile
    이쁜 걸로는 휴리파파님 공헌이 제일 커요. 함께 만드는 애드온!
  • profile

    모바일에서는 뒤로가기 사용에 애로사항이 잇네요...

    해당 옵션을 사용하면 PC에서는 괜찮은데요. 저희 모바일에서는 링크 클릭시 해당 제목으로 이동을 하긴 하는데..

    박스테두리가 그려지면서 뭔가 선택된 모습으로 보여집니다.

    이때 뒤로가기를 눌러도 상단으로 복귀가 안되고 그 위쪽으로 조금 이동하다가 걸리는 듯한 부자연스러운 상황이 벌어지네요.

  • profile profile
    사용하시는 모바일 레이아웃이나 게시판 스킨과 걸리는 게 있는 모양입니다.
    이 부분은 어떤 문제 때문일지 감을 잡기가 어렵네요.
  • profile profile
    뒤로가기 켜 놓았습니다. 확인 가능한 url은 쪽지로 보내드렸어요.
  • profile profile
    아까는 PC에서는 괜찮았는데 지금은 PC에서도 동일 현상이네요.

    #user_content_section2 이런게 붙네요.
  • profile profile
    PC : 스크롤 속도 값을 넣으면 발생합니다.
    모바일 : 스크롤 속도 값 없어도 발생합니다.
  • profile profile
    #user_content_section2 같은 거는 라이믹스 방식에 따라 접두어 붙인 거구요ㅎ

    앞에서 e.preventDefault(); 로 해놨던 게 스크롤 시간 동안 해시이벤트가 누적되는 걸 반영해주지 않는 것 같습니다.
    차라리 0.3.1로 다시 롤백해서,
    js 파일 87-88행 사이에 $(this).removeAttr('target'); 를 넣어주시겠어요?

    새 창 띄우기를 아예 제거해버린 뒤에, e.stopImmediatePropagation();으로 다른 이벤트의 개입을 막는 게 더 효과적일 것 같습니다.
  • profile profile
    0.3.1 파일을 다시 열어

    if(ap_history == 'Y') {
    $('.ap_toc').nextAll('h2, h3, h4, h5, h6').each(function(i){
    $(this).attr('id', 'user_content_section' + i);
    });
    $('.ap_toc ul li a').each(function(i){
    $(this).attr('href', '#user_content_section' + i);
    $(this).removeAttr('target');
    $(this).click(function(e){
    var href = $.attr(this, 'href');
    $('html, body').animate({
    scrollTop: $(href).offset().top + ap_target_top
    }, ap_velocity, function(){
    window.location.hash = href;
    });
    e.stopImmediatePropagation();
    });
    });


    이렇게 넣었습니다. 그런데 새창으로 뜨네요.
  • profile profile
    혹시 외부링크 새 창 띄우는 애드온 사용하시나요?
    (라이믹스에서만 테스트를 해봐 가지고) XE와 호환성 문제인가 싶기도 하고, 아니면 쓰시는 애드온하고 충돌해서 생기는 문제 같기도 합니다.
  • profile profile
    위에 댓글 처럼 88-89 행 사이에 넣으니 괜찮은거 같은데요???
  • profile profile
    두번째 알려주신 라인이 다른데 그것 때문인가요 ?
    다시 88-89 라인에 넣으니 새창으로 뜨지 않고 뒤로가기도 잘 됩니다.
  • profile profile
    아 맞아요. 거기예요^^
    모바일에서도 잘 되십니까?
    새 창 띄우기 애드온 같이 쓰셔도 괜찮은 거죠?
  • profile profile
    네. 잘되는거 뿐 아니라 대박 사건이 일어났습니다.

    #user_content_section2 이 주소로 이동이 됩니다.....

    어떤 마법을.... 부리셨길래.. 갑자기 이게 되죠...

    id 값이 들어가 있지 않은데 정확히 이동하네요... 물론 문서내에서 이동이 아닙니다.
    브라우저를 끄고 새로 열어서 주소를 붙여넣기 해도 찾아갑니다. 대박 사건이네요.
  • profile profile

    #user_content_section1

    1부터 시작하는게 어떨까요??

    제목 번호를 보통은 1부터 매기는데 이거 맞춰주면 해당 번호로 링크를 걸을때 제목 번호하고 링크주소 끝자리하고 딱 맞아서 좋은데 지금은 한칸씩 어긋나니까

    7번째 규칙을 링크로 바로 걸고 싶을때 규칙번호하고 주소 끝자리가 다르게 6이 표시되니 조금 살짝 어색해서요

     

    의미가 없을라나요 ??

     

     h3 h4 까지 사용할경우 번호 부여가 일관성이 없어지게 될까요 ??

  • profile profile
    마법은 아니고 그냥 트릭이에요ㅎㅎ
    게시물 로딩 직전에 h2 ~ h6에 id 값을 매겨준 거거든요.
    주소 직접 입력을 한 경우에도 게시물 로딩 직전에 id값이 뿌려지기 때문에 그쪽을 찾아가는 거구요.
    물론 본문 db 자체에는 변화가 없죠.
  • profile profile
    넵, 반영하겠습니다!
  • profile profile
    근데 h3 h4 까지 들어간 경우는 어떻게 매겨질까요 ?
  • profile profile
    트릭이 아닌 마법입니다.

    규칙을 정확하게 알려줄때 사실 id 값 넣어서 링크를 걸어줬거든요. 근데 글 수정을 하다보니 자꾸 사라져서 지금은 포기 ㅋㅋ
  • profile profile

    h2 밑에 h3가 달려있어도...

    그 아래 h2 에게 부여되는 아디값이 영향을 받지 않는 구조라야 할 것 같은데요...

    h2 (1)
    h3 ( h2 1의 h3의 1)

    h2(2)

    이런식의..... 이렇게 구현이 되어있는 건가요??

  • profile profile
    user_content_section_1
    user_content_section_1_1
    user_content_section_1_1_1

    user_content_section_2

    user_content_section_3
    user_content_section_3_1
    user_content_section_3_2


    이런 구조로 부여해도 괜찮을 듯 합니다??
  • profile profile
    네, 일관성 때문에 h2부터 시작하는 걸 기준으로 잡았어요. (h1은 어차피 전체제목이구요)

    다만, 현재는 헤더 태그라고 하나요? h2~h6를 한꺼번에 수집해서 연번을 매기고 있는데요.
    h2에 딸려 있는 h3, 또 거기에 딸려 있는 h4 등은 계층화된 id 번호를 부여하는 것도 고민해볼 만한 거 같아요. (예컨대 user_content_section2-3-2 같이요)
    (근데 이게 또 시간이 관건인지라...)
  • profile profile
    으읍, 한 번 해보겠습니다;;;
  • profile profile
    업데이트 감사합니다.
    계층구조는 문서가 없어 확인 못햇지만

    1부터 시작하는 것은 확인했습니다. 좋은 자료로 사이트 내부에서 문서의 정확한 위치까지 링크할 수 있게 되었네요. 감사합니다.
  • ?
    버전 0.3인게 흠이네요!
    1.0으로 했어야 합니다 ㅎㅎ
  • ? profile
    1.0으로 가기 위한 작은 걸음일 뿐인 걸요ㅎㅎ
    덕분에 괜찮은 애드온이 나온 거 같습니다.
    감사합니다~!
  • profile
    계속 응원중입니다.
    배포에 감사드립니다.!!
  • ?
    최종버전 타임라인 게시판이랑 충돌 나는듯 해요~
  • ? profile
    핫, 이슈가 끊이지 않는군요;; 직전 버전에선 괜찮았나요?
    지금 당장 직접 재연은 어렵지만, 시간 나는대로 체크해보겠습니다~
  • profile ?
    네. 지난 버전으로 돌리면 괜찮아 지는군요. ^^
  • ? profile
    게시글 열람할 때 원래 게시판으로 이동하지 않고, 바로 모듈 내에서 처리하고 계신 거겠죠?
    흐음, 타임라인 모듈 예외 처리를 해야겠네요.
  • profile ?
    네. 그렇습니다.~
  • ? profile

    타임라인 모듈 예외 처리한 버전 올렸어요.
    다기능을 생각하다보니 다른 모듈이나 애드온과 충돌하는 경우들이 생겼네요ㅠ

  • profile ?
    잘됩니다.^^ 감사합니다. 수고가 많으세요. T.T
  • ?

    7dae4d217147081f1725a47e627d04a7.png

     

    윤삼님 ^^ 혹시 위의 스샷 처럼

    양쪽 정렬인 경우에 세로로 나열 되는것이 아니라 가로 로 나열을 할수 있을까요?

    1

    2

    3

    4

    5

    6

     

    이 아니라

    1 2

    3 4

    5 6

     

    이렇게 말이죠. 공간 활용이나 시각적으로 훨씬 편할것 같습니다.^^ 

    감사합니다.

  • ? profile
    궁금해서 스샷 사이트 가봤는데, 이건 목차 애드온과 쪽나누기 애드온의 조합 같은 느낌이네요 호오..

    배열은 css로 충분히 컨트롤 할 수 있을 겁니다~
  • profile ?

    할줄 몰라요 T.T

    그래도 저희 사이트에서 목차/쪽 애드온 잘 쓰고 있습니다 ^^

  • ? profile
    근데
    123
    456 이 낫나요,
    아님
    135
    246 이 나을까요?
  • profile ?

    제 개인적으로는
    1 2
    3 4

    5 6
    5/5 분할이 나을것 같습니다. ^^ 제목 길이에 크게 구애 받지도 않고요~

  • ? profile
    그럼 그걸 기본으로 해야겠네요.

    근데 목차애드온이 코드가 지저분해서 영 못 알아보겠어요ㅜ
    처음부터 다시 짜든가 해야지..(투덜투덜)
  • profile ?
    ^^; 고려 감사합니다
  • ? profile

    예시하신 사이트와 비슷하게 나오려면,

     

    애드온 설정 '5. 사용자 커스터마이징'에 다음과 같은 코드를 넣어서 적용해보세요.

    이런 식으로 응용하시면 비슷한 효과를 얻을 수 있을 겁니다~

     

    .ap_toc li {
    margin: 12px 0 !important;
}
.ap_toc li:before {
    counter-increment: li;
    padding: 6px;
    border-radius: 3px;
    color: #fff;
    background: #ccc;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
}
.ap_toc li.ap_toc_li2 {
    display: inline-block;
    width: 50%;
    padding: 0 7.5px !important;
    box-sizing: border-box;
    vertical-align: top;
}
.ap_toc li li {
    margin: 10px 0 0 15px !important;
}

     

  • profile ?

    와 너무 잘됩니다. 고맙습니다~

    혹시 목차 이동후에 제목에 딱 걸치는데 이동후 살짝 윗 공간이 보이게 할수 있을까요? 

    상단 툴바 높이에 100 또는 100px 모두 입력해봐도 저의 사이트 경우 차이를 모르겠습니다. 

  • ? profile

    뒤로가기 변수가 문자열 형식으로 전달되는 문제가 있었네요.
    아마 이 문제이지 싶은데요, 수정한 버전(0.3.91) 올렸으니 확인 부탁드립니다~

    이제 숫자만 입력하시면 될 겁니다, 라고 단언하고 싶은데 자신감 부족ㅜ

  • profile ?

    음...숫자에 아무런 반응이 없는걸로 보아...제 사이트 문제 인것 같기도 하고...^^;

  • ? profile
    뒤로 가기 '사용 안함'으로 할 때와 '사용함'으로 할 때 모두 툴바 높이 설정이 적용 안 되나요?
  • profile ?
    네. 모두다 같았습니다.
  • ? profile
    ㅠㅠ a태그 클릭할 때 다른 이벤트와 충돌이 있는 모양입니다. 다른 이벤트를 막는다고 막았는데 어찌된 일인지;;;
  • profile ?
    괜찮아요 T.T 지금 있는 그대로 잘 사용 해보겠습니다~