RXE 서드파티 자료를 공유할 수 있으며, 미완성된 자료도 올릴 수 있습니다. 단, 저작권 문제가 없어야 합니다.
조회 수 166 추천 수 4 댓글 17
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 첨부

변경사항 0.2.1

 

- 목차 표제어가 공란일 경우, 문서의 제목이 출력됩니다. @socialskyo님 제안

- 목록 스타일 옵션 추가(1 > 1.1. > 1.1.1. 방식) : 1) 스타일 없음, 2) 계층형+좌측여백, 3) 계층형+들여쓰기 @휴리파파님 제안

- 스타일 개선 @휴리파파님 제안

- 스타일 개선에 따라 몇몇 스타일 속성 변경

- 커스터마이징을 위해 각 요소들에 class 부여

0.png

 

개요

 

게시판 본문의 목차를 수집해서 본문 상단에 디스플레이하는 애드온입니다.

- 발코딩한 js로 구현한 아주 간단한 애드온(이 될 뻔 했으나 글쎄올시다)입니다.

- 라이믹스에서 테스트했습니다. 다른 환경에선 문제가 있을 가능성이 있습니다.

 

- 본문에서 h2 ~ h6 까지의 태그들만 수집합니다.

- 한 콘텐츠 안에 h1은 하나여야 합니다(그럴 걸요?). h1은 전체 제목으로 간주하고 목차에선 수집하지 않습니다.

- 태그들은 h2 > h3 > h4 > h5 > h6 같은 식으로 구조적으로 배치되어 있어야 합니다.

 

미리보기

 

- 0.2 버전부터 달라진 점을 말씀 드리겠습니다. 일단 박스 선을 굵게 했습니다ㅋ

0.png

 

- 그리고 애드온 설정에 따라 오른쪽 정렬과 왼쪽 정렬도 가능하게 했습니다.

1.png

 

- 화면 넓이가 작아지면 본문 넓이가 비좁아질 수 있기 때문에, 화면이 기본값 540px 이하가 되면 박스도 양쪽 맞춤이 되게 했습니다.

3.png

 

설정

 

- 애드온 설정 화면입니다.

- 목차 표제어를 지정할 수 있습니다.

- 목차 텍스트를 클릭했을 때 이동하는 방식이 두 가지 입니다. 첫째, 일반적인 것처럼 #id를 찾아 움직입니다. 둘째, js의 스크롤 이벤트에 따라 부드럽게 이동할 수도 있습니다. 단, 이 경우 원래 위치로 뒤로가기는 안 됩니다;;

4.png

- 목차 박스의 위치를 1) 양쪽 맞춤, 2) 오른쪽 정렬, 3) 왼쪽 정렬 등으로 지정할 수 있습니다.

- 오른쪽 정렬이나 왼쪽 정렬을 선택했을 때, 박스의 '최대 넓이'를 지정할 수 있습니다.

- 위에서 언급한 것처럼 화면 사이즈가 작아지면 박스의 위치가 양쪽 맞춤으로 바뀌는데(float: none; max-width: 100%), 화면 사이즈 기준값을 지정할 수 있습니다.

- 그리고 textarea에 적정한 구문을 삽입하면 사용자가 목차 스타일을 커스터마이징할 수 있습니다.

  • ?
    휴리파파 2017.07.09 08:33:55
    감사합니다 고생하셨어요 ㅎㅎ
    쪽지 보냇습니당 ㅎㅎ
  • profile
    윤삼 2017.07.09 11:23:13
    언제나 좋은 제안 감사합니다. 저도 쪽지 보냈어요~
  • profile
    socialskyo 2017.07.09 09:49:43

    와!! 피드백이 반영되었습니다. !! 게다가 더 이뻐졌군요.

    그나저나 저는 모바일에서 같은 목차를 클릭시 해당 목차로 딱 이동 하여 정확히 해당 목차 부터 읽어 내려갈수 있는데
    이상헤게 PC 에서는 해당 목차 밑으로 까지 내려가서 해당 목차의 내용부터 보이기 시작합니다. 이왕이면 모바일 에서 처럼 동일 하게 동작했으면 더 좋을듯 합니다. ^^

  • ?
    휴리파파 2017.07.09 11:22:59
    그건 사이트 특성인 것 같습니다~ (상단 고정 툴바가 있다거나요) 애드온과 관련된 것 같진 않은데요 ㅎ
    PC 모바일 둘 다 정상이고, 애드온에서 특별히 관여하는 것 없을거에요
  • profile
    윤삼 2017.07.09 11:41:42
    XE타운에서처럼 상단에 fixed된 요소 때문에 가려진 게 아닐까 싶은데요.
    이 부분도 애드온 설정값을 줘서 해법을 찾아보겠습니다.
    (근데 으윽 PC와 모바일의 경우도 나눠서 코딩을 해야겠군요)
  • profile
    lis**** 2017.07.09 10:33:31
    오~ 완전 좋은데요.
    오른편에 목차 박스 맘에 듭니다.
    집에 가면 적용해봐야겠어요.
    감사합나다~
  • profile
    윤삼 2017.07.09 11:42:30
    박스 맘에 드시죠?ㅎㅎ 휴리파파님이 기여해주셨어요^^ 전 거들 뿐ㅋ
  • profile
    가시밭 2017.07.09 13:10:04
    와 완전 대박입니다!!
    진짜 필요했는데 감사합니다..ㅠㅠㅠ
  • profile
    윤삼 2017.07.09 14:39:44
    잘 써주시면 이쪽이야말로 감사입니다~
  • profile
    dongdong 2017.07.09 13:31:09

    정말 멋지네요. 필요한 사람들에게는 꽤 유용한 자료입니다. 감사합니다.^^

    (플로팅 기능까지 있으면 좋겠어요ㅎㅎ)

  • profile
    윤삼 2017.07.09 14:43:10
    안 그래도 플로팅을 생각하고 있었어요. 이거까지 하면 다음 버전은 0.3 정도 되겠군요 하핫
  • profile
    dongdong 2017.07.09 15:15:56
    그렇군요ㅎㅎ
  • profile
    웹지기 2017.07.10 12:51:51
    id 를 지정하지 못하게 해 놓은 이유가 뭘까요... 이 자료를 사용하게 된 이후로 더욱 아쉬운 부분이 되었네요.

    다른 문서에서 해당하는 부분으로 링크를 걸려고 해도 id를 제한하니 사용할 수가 없어서 아쉬운데..

    이게 보안과 관련이 있는 내용일까요???
  • profile
    기진곰 2017.07.10 13:10:59
    내용에서 id를 아무렇게나 지정하도록 허용하면 메뉴나 회원정보 등 글 영역 바깥에 있는 태그와 혼동을 일으켜 엉뚱한 조작을 유도하거나, 사용자가 작성한 내용으로 로그인 단추처럼 중요한 기능을 덮어쓰는 등 보안상의 문제가 발생할 수 있습니다. 레이아웃이나 스킨에 포함된 CSS나 자바스크립트는 원래 레이아웃에 있던 id와 글 내용에 포함된 id를 구분하지 못하니까요. (class도 마찬가지입니다.)

    라이믹스에서는 혼동의 가능성을 줄이면서도 id의 장점을 활용할 수 있도록 user_content_로 시작하는 id만 허락하고 있습니다. XE에도 이런 정책이 적용된다면 좋겠네요. 목차나 각주 등 id가 반드시 필요한 기능을 구현하는 서드파티 자료들도 보안을 위해 모든 id에 user_content_와 같은 접두사를 붙여주시면 좋겠어요.
  • profile
    윤삼 2017.07.10 15:03:45

    아, 그렇지요. 작년 이맘 쯤에 배웠던 거 같은데ㅎㅎ

    여기 애드온에도 'user_content_'로 접두어 적용하도록 하겠습니다.

    음, 그냥 제 시그니처를 남겨보겠어요ㅋㅋ

  • profile
    기진곰 2017.07.10 16:36:36
    아무 접두어나 사용하시면 XE, 라이믹스 호환을 보장할 수 없어요 ㅡ.ㅡ
  • profile
    윤삼 2017.07.10 16:39:40

    그, 그런...

    에디터 입력할 때가 아니라 모듈 실행 후에 js로 뿌려주는 거니까 괜찮지 않을까 해서요 ㄷㄷㄷ

    아니군요ㅠ 얼른 다시 바꿔야겠습니다.


서버에 요청 중입니다. 잠시만 기다려 주십시오...