질문/공유팁 게시판

목차 애드온 0.2

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

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

https://xetown.com/xepoint/660678

 

 

1. 개요

 

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

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

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

 

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

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

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

 

2. 미리보기

 

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

0.png

 

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

1.png

 

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

3.png

 

3. 설정

 

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

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

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

4.png

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

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

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

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

 

... 크헉, 이상입니다. 이제 자야겠습니다ㅠ

사용해보시고 의견 생기면 말씀해주세요~ 버그 신고도 대환영입니다아아아악!

Atachment
첨부

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 60
  • profile

    .

  • profile profile
    거북목이 되고 있어요ㅠ
  • ?
    수고하셨어요
    오늘 적용해봐야겟어요
  • ? profile

    휴리파파님 말씀 때문에 버전업 했다능. 밤 샜다능.

  • profile
    우와 순식간에 개선 및 버전 업데이트가 되는 군요.

    이게 굉장히 유용한게 사이트 규칙이나 이용약관등에 쓰면 매우 좋을 것 같아요!
  • profile profile

    박스를 플로팅으로 화면에 고정시켜도 좋을 것 같은데, 거기까지는 졸려서 못했어요.

    (사용자 스타일링은 사실 그런 귀찮음의 산물이에요ㅋㅋ)

     

    혹시나 활용해주신다면 영광이겠습니다~

  • ?

    정말 마음에 듭니다. 그리고 늘 느끼지만 단순 기능 개발이 아니라

    실제 필요한것과 연관하여 생각하시는 고민도 느껴지는 것 같아 더 대단하신듯 하고요.

    감사합니다.

    추가로 부담 드리는 것은 아니고, 다운받고 나서 스스로 해결을 해볼 요량이지만 개발자님이시니
    적어 봅니다.

    개인적으로 h2~h6 타이틀을 사용하여 글을 쓰는 사람은 많지 않을듯 합니다. 

    100에 몇일까 고민을 해야 할 정도로 말이죠.

    [기진곰님 멘트 인용 : 개인 블로그 등에 전문적으로 글을 쓰거나 시맨틱 웹에 대한 강한 신념(?)이 있는 분이라면 <h1>부터 <h6>까지 쫙 맞추고 싶어하실지도 모르겠지만, 대부분의 커뮤니티 사이트에 글이나 댓글을 쓸 때는 단락 구조 따위 신경쓰는 사람 아무도 없거든요. ]



    해서 폰트 사이즈 자체를 그냥 바로 인식하는 기능이라던지 아니면 bullet point 나 인용구 를 인식 하는 기능과

    추가 되면 어떨까 합니다.

     

    예를 들어

     

    14PX : 현 H6 정도로 구현된 정도로 간주

    15PX : H5

    16PX : H4

    17PX : H3

    18PX 이상 : H2

     

    Bullet : 현 H6 정도로 구현된 정도로 간주
    인용구 : 14PX : 현 H2 정도로 간주 된다 던지....

     


    그렇게 된다면 어렵게 소스 보기 눌러서 h2 ~h6 태그 글쓸때 사용하세요 보다는 

    자연스럽게 사용 가능 할듯 해서요.

    ps. 소스로 직접 작업 하기 싫다면 사실 에디터의 기본 스타일 툴을 사용 하면 되지만, 사실 어떤게 h2이고 어떤것이 h3인지 참... 직관적이지 않아서요.

  • ? profile
    우왓, 좋은 말씀 감사합니다!

    아무래도 이 애드온은 일반 커뮤니티 게시판 직접 적용은 무리가 있을 것 같아요.
    말씀하신 것처럼 웹에서 구조화된 글쓰기라는 관념 자체가 별로 없으니까요.
    게다가 아시다시피 게시판 이용자들이 어디서 복붙이라도 해오면 그 스타일들도 천차만별이고요.
    그 점은 저도 생각을 해보긴 했는데, 특정 스타일을 타겟으로 해서 목차에 올릴 텍스트를 추출하는 게 경우의 수가 너무 많겠더라구요.
    별 다른 아이디어도 안 떠오르고, 그래서 아쉽지만 그 부분은 깔끔하게 포기를 했습니다;;;

    대신, (h1~h6는 에디터 툴에서 지정할 수 있으니까) 운영진이 작성하는 공지사항 같은 게시판에 활용하거나,
    블로그나 웹진 같은 콘텐츠 개발형 사이트에서 써야 할 것 같아요.
  • profile ?

    사실 구현 입장에서 보면 지당하신 말씀 같습니다. :-)

     

    PS. 아참 목차 표제어에 {odocument->title} {설정한 목차 표제어}가 같이 표기 되게 하고 있는데....못하겠어요 ㅋㅋㅋ

  • ? profile

    문커뮤니티가 고장 나서 직접 재연은 못해보는데요ㅠㅠ

    애드온 파일에서 if(!$title) $title = 'CONTENTS'; 대신에

    $oDocumentModel = &getModel('document');
    $oDocument = $oDocumentModel->getDocument(Context::get('document_srl'));
    if(!$title) $title = $oDdocument->get('title');

    로 바꾸시면 어떨까 싶네요.

  • profile ?
    아이참... 부탁 드릴려고 한게 아니었는데 말이죠. :-)
    PS. 근데 안되요. 예를 들면 목차 설정을 하면 기존대로
    설정을 안하면 서버에러 납니다. 정말 안해주셔도 되요 ^^
  • ?

    그나저나 윤삼님 작업 의뢰 받으시죠? 이거 말고 제가 간단히 필요한게 있음 의뢰좀 하겠습니다. 

    이제 특히 애드온까지 개발하시니까 여쭤 봅니다.

  • ? profile

    저는 야매라서 실망 시켜드리는 것 말고는 할 수 있는 게 없어요;;;

     

    그나저나 이제 됩니다ㅋ

    $oDocumentModel = &getModel('document');
    $oDocument = $oDocumentModel->getDocument(Context::get('document_srl'));
    if(!$title) $title = $oDocument->get('title');

    아까 소문자d를 안 뺐었어요 :)

     

    덧, 이게 낫겠네요.

    if(!$title) {
        $oDocumentModel = &getModel('document');
        $oDocument = $oDocumentModel->getDocument(Context::get('document_srl'));
        $title = $oDocument->get('title');
    }

     

    0.png

  • profile ?
    잘됩니다아~~
  • ? profile
    https://www.artistudy.com/workdiary

    많지 않아도, 저 처럼 필요로하는 사람도 있죠 :) 또한 사용하는사람은 드물어도 컨텐츠를 읽는 사람 입장에서는 보기 편해지니까요~ 개인적으로 정말 감사한 애드온입니다.
  • profile profile

    말씀 감사합니다. 애용해주신다면 저야말로 감사드릴 일이죠~

  • profile profile
    평소에 단락을 이미 애용하고 있었어서 그런지
    https://www.artistudy.com/workdiary/12060
    이쁘게 나오네요
  • profile profile

    아름다워요~

    0.gif

  • ?
    오,. 윤삼님,. 멋진 애드온을 배포해주셨네요.
    이걸 잘 응용하면 공지나 소개 같은 문서를 정말 깔끔하게 표현이 가능할듯 보입니다~!
    잘 활용하겠습니다~!! 이렇게 멋진 애드온 배포해주셔서 감사드려요~~!!
  • ? profile
    감사합니다ㅎㅎ 개선사항이나 의견 주실 거 있으시면 언제든 말씀해주세요~~
  • ?
    전 h2부터 시작하는게 아주 맘에 드네요 ㅎㅎ
  • ? profile

    제가 저 자신도 모르게 오마주를...?

  • profile profile
    쉐킷~ 쉐쉐쉐 쉐킷~
    http://i2.ruliweb.com/ori/17/01/08/1597a71076d130a35.gif
  • ?
    목록 출력 방식을 선택할 수 있으면 좋겠네요~!
    지금은 ul li로 출력하는데 h2 ~ h6으로 그대로 출력하게도 옵션을 주시면 좋겠어요
    제가 써보니 ul보다는 h2~h6이 더 편할것 같아요
  • ? profile
    역시 레이아웃처럼 큼직한 걸 좋아하시는군요 ㅎㅎ
    다음 버전에 적용하도록 하겠습니다~
  • profile ?
    게시글에는 제목마다 css로 1. 1.1 번호 붙여 쓰는데
    목차에도 css로 계층형 번호를 붙이려니 좀 어려운 것 같아서요ㅜ ul에는 각각 계층마다 클래스를 줘야하는 것 같더라고요
  • ? profile
    아, ol 태그인가요 그러면 손 댈 게 생각보다 많을 같은데요. 과연 성공할 수 있을지..
  • profile ?
    아 ul li에 계층번호 붙이는건 해결했어요 ㅎㅎ
    근데 h2~h6으로 하는것도 있음 좋겠네요 ㅋ
  • ? profile
    이번에도 노력해보겠습니다~!
  • ?

    다들 뜨거운 반응이네요

     

    전 이렇게 적용시켰습니다.

     

    01.JPG

  • ? profile
    아항 요런 느낌이군요:) http://jsfiddle.net/p3rtLw7q/
    논문이라든가 보고서 양식에 제격인 거 같아요.
  • profile ?
    정확히 그거에요 ㅋ
    잘 이용하면 위키로도 쓰일 수 있겟어요 ㅎ
  • profile
    편리하고 멋지네요. 저희 사이트에도 적용했습니다.
    매번 감사하네요.
  • profile profile
    웹지기님 오랜만입니다~ 적용 감사해요!
  • ?
    감사합니다. 적용해보겠습니다
  • ?

    윤삼님 쪽지 내용 댓글입니다.. 추가로 css 코드 안넣었고 순정 상태입니다. (계층형 번호 매기기만 설정 했습니다.)

    스크린샷 2017-07-08 01.00.59.png

  • ? profile
    쪽지 확인했습니다. 좋은 제안이십니다 ^^/
    그림으로 보니 훨씬 더 예쁘네요.
    미적 감각이 뒤떨어져서 고민이었는데ㅎㅎ 이렇게 제안해주시니 정말 감사드려요 ;)
    적용해보겠습니다~!!
  • ? profile

    아, 그런데 h2~h6 태그를 그대로 가져오는 옵션 아직도 필요하신가요?
    어렵지는 않은데, 그렇게 하니까 글씨 크기가 너무 커서 디자인 균형감이 깨지더라구요.

  • profile ?
    필요 없습니다 ㅋㅋㅋ
  • profile ?
    필요가 없네요 그런 옵션...
  • ? profile

    드리겠습니다.jpg

  • profile profile

  • profile ?
    죄송하네요..ㅜ 고생하셨는데...
  • ? profile
    어려운 건 아니어서 금방 적용해봤다가 금방 또 지웠으니까 괜찮아요ㅎㅎ
  • ? profile
    댓글 읽다가 성모형님 만화내용이 떠올라서 웃자고 올렸던건데.... ㅠㅠ
    산삼보다 더 빛나는 윤삼님은 능력있는 개발자니까 좀 더 고생시키ㅅ... 읍읍...
  • profile
    목차에 순번을 자동으로 매겨주는건 없어야 하지 않을까요?

    지금 이 본문처럼 작성자가 본문에서 순번을 매기고 싶어할 경우가 많을 거 같아서요.

    본문에서 이미 매겨 놓은 순번과 자동으로 생기는 순번이 중복노출 되는 문제가 있을거 같네요.

    xe위키도 사용했었는데 자동으로 목차에 순번이 만들어지는 바람에 문서 내용에는 순번을 빼고 적었습니다.

    본문과 상단 모두 자동으로 만들어 주지 않는다면 문제가 발생할 듯 하네요.
  • profile profile
    네, 그래서 다음 버전에서는 리스트-스타일 옵션을 주었어요.
    기본은 스타일 없음(순번이 안 들어가죠), 옵션으로 계층형 순번, h2-h6 그대로 가져오기 등등.
  • profile profile
    순번 가져오기 옵션을 선택했을 경우 작성자가 작성한 문서내용의 제목에도 순번을 보여주나요?
  • profile profile
    네, 다시 정리하자면,
    1. 스타일 없음 : 작성자가 입력한 그대로 나옵니다.
    2. 계층형 번호 : 작성자가 입력한 내용 앞에 계층형 순번을 매겨줍니다.
    3. h2~h6 그대로 가져오기 : 작성자가 입력한 내용을 그대로 가져오되, 그 내용에 h2~h6 태그를 씌워서 출력합니다.
  • profile profile
    제가 궁금한건...

    상단에 목차 가 아닌

    작성자가 작성한 본문에도 똑같은 번호를 보여주는지 입니다.

    아니면 본문에 순번이 없고 목차에만 순번이 매겨지는건지 궁금해서요. 
  • profile profile
    아, 맞아요.
    목차에만 순번이 매겨지는 방식이에요.
    현재까진 본문에 영향을 줄지에 대해선 전혀 생각을 안 하고 있었네요.
  • profile profile
    네. 목차와 통일성을 원하는 사람들을 위해 옵션을 사용하지 않고 작성자에게 선택권을 부여해야겠네요.
  • ?
    본문에 영향을 줄 필요는 없을 것 같아요~ㅎ 그건 사용자가 알아서 ㅎ
  • ? profile
    네, 본문에 번호 부여하는 건 따로 애드온을 만들든지 하는 게 낫겠어요.
  • profile
    https://technet.microsoft.com/ko-kr/library/cc527493(v=ws.10).aspx
    여기 레이아웃 디자인 스타일로 해보셔도 좋을거 같아요 목차 애드온
  • profile profile

    링크가 "서버 데이터 백업 및 복원을 위한 최상의 방법"으로 연결됩니다?

    아, 좌측에 목차가 있군요ㅋ

  • profile profile

    이를테면 이런 거겠죠?
    http://xe.sketchbook.kr/_docs/manual_sketchbook5_board.html
    부트스트랩 스타일 응용한 거라던데...

  • profile profile
    좀 다르지만
    접었다 폈다 하는 기능이라던가. ㅎ 그냥 본문 좌측에 레이어로 볼 수 있게
    뭐 비슷하기도 하네요 ㅎ
  • profile profile
    오오 하위 목차 접기/펼치기 괜찮네요