다모앙 커스텀 UI v240422_03
페이지 정보
본문
목록, 사이드 메뉴 화면
조회 화면
쓰기화면
v240419_02 | 추천개수 5단계에 따라 다른 색상을 적용했습니다.(색감 센스가 전혀 없어서..단계별 색상 추천해주셔도 좋습니다 ㅡㅡ;) |
v240419_03, 03a | 사이드메뉴 영역이 배경과 구분되게 색상 변경(dark, light) 글 조회시 작성자의 작성글, 댓글 목록 보기에서 각 게시글 클릭시 링크가 내부에서 열려서 페이지 전체에서 열리도록 버그 픽스 |
v240422_01 |
|
v240422_03 |
|
기존 버전 사용자분께 | 다모앙 기본화면설정(UI 커스텀)이 안정화 됨에 따라 커스텀 UI내 동일한 기능은 비활성화 했습니다. |
다모앙 커스텀 UI입니다.
많은 개발자 분들이 다모앙을 멋지게 만들어 주고 계신데 물리적인 시간이 필요함으로
자잘하게 필요한 것들을 적용하여 수정해봤습니다.
위는 적용된 예시 화면입니다.(이미지 클릭하시면 원본 사이즈로 보실 수 있습니다)
예시 화면엔 표시가 안되었는데 후방글 감추는 기능과 소모임 단축키 지정 기능도 있습니다.
기능은 제가 간간히 작업해서 추가될 경우 제목에 버전을 명시해놓습니다.
자신이 쓰는 버전과 다를 경우 다운 받아서 적용 해보시면 됩니다
전체 기능은 본문 제일 아래에 코드로 작성되어 있습니다.
적용 방법은 크롬/엣지 확장 프로그램을 1개 설치하시고
제가 업로드 해드린 설정 파일을 받아서 해당 확장에서 그 파일을 업로드 하면 됩니다.
아래 적용 절차를 따라서 해보세요.
적용 방법은 매우 쉬우니 관심 있으신 분들은 해보세요.
아래 적용전에 다모앙 설정파일을 다운받아주세요. 첨부파일로 올려두었습니다.
1. 크롬/엣지 확장을 설치합니다.
User JavaScript and CSS (google.com) <-클릭하여 설치
Dimebag님이 이 확장을 알려주셔서 요긴하게 잘 사용하고 있습니다. 감사합니다^^;
2. 설치한 확장 실행
1) 브라우저 상단 확장 아이콘 클릭 후 설치한 확장 프로그램 명 클릭
2) 아래 이미지와 같은 화면이 나오면 + 더하기 버튼 왼쪽 동그라미 버튼 클릭
3. 확장 프로그램에 설정 파일 업로드
1) 아래 이미지와 같이 세번째 아이콘 클릭한 후 Upload JSON 버튼 클릭
2) 댜운 받은 설정파일 선택 한 후 업로드
4. 다모앙 사이트 설정 활성화 확인
업로드에 성공하면 아래와 같은 화면이 나옵니다.
왼쪽 등록된 RULES 목록에 다모앙 사이트가 정상적으로 보이고 옆에 오렌지색으로 활성화에 불이 들어오면 설정 완료입니다.
아래와 같은 화면이 안나오시는 분은 아래 이미지에서 오렌지 불 켜있는 첫번째 아이콘 클릭하시면 나옵니다.
위와 같이 하시고 다모앙 접속하셔서 페이지 새로고침 하시면 정상적으로 적용된 것을 확인하실 수 있습니다.
참고로, 다모앙은 수시로 소스가 변경되고 있기 때문에 쓰시다가 일부 기능이 동작하지 않을 수도 있습니다.
이 확장이 기존 화면을 임의로 조작하여 적용하는 것이기 때문에 간헐적으로 일부 CSS는 적용이 풀리기도 합니다.
그때는 그냥 페이지 새로고침 하시면 다시 잘 적용됩니다.
조금 코드를 아시는 분이라면 수정하여 사용하셔도 됩니다.
코드 수정 후 SAVE 버튼 누르면 저장됩니다.
왼쪽 영역 : 스크립트
오른쪽 영역 : 스타일시트(CSS)
# 스타일시트로 적용한 기능
오른쪽 영역에 아래 내용과 관련된 스타일시트 코드가 있습니다.
비활성화 하고 싶은 기능은 해당 코드를 삭제하거나 주석처리 하면 됩니다.
// 또는 주석하고 싶은 코드를 /* */ 이 코드로 감싸면 됩니다.
1. 상단메뉴 고정
- 상단 메뉴 고정이 되지 않고 있어서 다시 적용합니다.
2. 추천 버튼 색상 변경하여 강조(기본값 붉은 색 : 원하는 색상으로 변경하세요)
3. 댓글 버튼 위치 오른쪽으로 변경
4. 추천 버튼 배경색 변경
5. 나의 프로필 숨기기(이미지, 이름)
# 스크립트로 적용한 기능
스크립트 영역의 위쪽은 개발영역으로 신경쓰지 마시고 아래로 아래로 내려주세요.
맨~아래로 내리시면 다모앙 커스텀 UI 환경설정이라고 나오는 부분 그 부분부터 보시면 됩니다.
아래는 해당 스크립트 영역 하단에 있는 내용입니다.
아래 내용 살펴보시고 필요한 기능에 true, false만 해주시면 됩니다.
별도로 작업이 필요한 것이 소모임 단축키 지정과 즐겨찾기 지정인데 이것도 설명 잘 보시면서 해주세요.
/*============================================== 다모앙 커스텀 UI 환경설정 : 각 기능별 설명 확인 후 사용 유무를 변경합니다. : 사용(true), 미사용(false)==============================================*//*========= 소모임 단축키 지정 사용방법 =========== [윈도우 사용자] Ctrl + 숫자(1~9) 입력하여 사용합니다. Ctrl + 1을 누르면 클다방으로 이동합니다.(아래 예시) [MAC 사용자] Command + Shift + 1~9 조합으로 사용 Control + 1~9 조합으로 사용 소모임 고유주소 값 확인 방법 1. 추가할 소모임 방문 2. 주소창에서 주소 확인 ex> https://damoang.net/coffee 3. 주소 뒤쪽 coffee 복사하여 사용===============================================*///소모임 단축키로 지정할 고유 주소 값을 아래에 넣으세요(1-9까지만 지원)var clubShotcutList = [ ["1", "coffee"], ["2", "macmoang"], ["3", "applemoang"], ["4", ""], ["5", ""], ["6", ""], ["7", ""], ["8", ""], ["9", ""], ];/*========= 즐겨찾기 고유 주소 값 ===========/bbs/noti.php [A] 알림보기/notice [K] 공지사항/free [F] 자유게시판/qa [Q] 질문과 답변/hello [I] 가입인사/new [N] 새소게(새소식)/tutorial [T] 사용기/lecture [L] 강좌/팁/pds [P] 자료실/economy [E] 알뜰구매/gallery [G] 갤러리#sidebar-sub-s8 [S] 소모임/governance [V] 거버넌스/bug [B] 유지관리/truthroom [J] 진실의 방/bbs/group.php?gr_id=community [C] 커뮤니티===========================================*/// 즐겨찾기에 추가할 고유 주소 값을 위에서 복사하여 아래에 넣으세요// 맨 마지막 값은 뒤에 "," 콤마가 없습니다.var arrFavMenus = [ '/free', '/new', '/economy', '#sidebar-sub-s8', '/lecture', '/tutorial', '/bug']; /*---------------------------------------------*/// [탑메뉴] 상단 메뉴 고정topMenuFixed(true);/*---------------------------------------------*/// [사이드메뉴] 소모임 바로가기 단축키 지정clubShortcut(true, clubShotcutList);// [사이드메뉴] [새글] 내 글|내 댓글 UI 및 내용 수정myTextCmmtUIMod(true);// [사이드메뉴] 사이드바 메뉴 즐겨찾기 설정favoritesUse(true,arrFavMenus); // [사이드메뉴] 메뉴 영역이 배경과 구분되게 색상 변경changeSideMenuBg(true);// [프로필 박스] 프로필 박스에 내 글 | 내 댓글 메뉴 추가totalTxtCmmtMnu(true);/*---------------------------------------------*/// [조회]조회화면 하단 게시물 목록 삭제 removeBottomList(true);// [조회]댓글 입력창 본문 아래로 위치 변경moveUpComment(true);// [조회]첨부파일 위치 위쪽(제목 아래)으로 이동moveUpAttach(true);// [조회] 글 조회시 작성자의 작성글/댓글을 보여주는 기능writerTxtCmmtListView(true);// [조회] 목록 버튼 클릭시 조회중이던 페이지로 이동 기능listBtnPaging(true);// [조회] 이전글/다음글/목록 버튼 영역 위쪽에도 추가addUpBtnGroup(true);/*---------------------------------------------*/// [목록] 게시물 목록 추천 <> 번호 자리 바꾸기changeNumToRcmd(true);// [목록] 게시글 목록에서 내가 작성한 글 강조하기myTextEmphasis(true);// [목록] 목록화면 "내 글" 버튼 활성화myTextButton(true);// [목록] 후방글 노출 여부 설정hoobangUse(false);/*---------------------------------------------*/// [쓰기] 글 작성시 작성완료 버튼 제목 옆에도 나오도록 추가addWriteBtn(true);
가을무렵님의 댓글
지푸라기님의 댓글의 댓글
낑이깜이님의 댓글
7 | const colorMode = document.documentElement.getAttribute("data-bs-theme"); 이렇게 수정하니 변경이 잘 되네용~
지푸라기님의 댓글의 댓글
안 그래도 색상값 자동으로 가져오게 하려고 우상단 테마 설정쪽 정보를 가져오려고 했었는데
이게 콘솔상에서는 잘 가져오는데 후킹하는 자바스크립트에서는 그 값을 못 가져오더라고요
그래서 수동으로 해놨는데....html쪽에도 있었을줄이야 ㅎㅎ
덕분에 잽싸게 수정해서 첨부파일에 반영해놨습니다...감사합니다^^
가을무렵님의 댓글
정말 감사합니다.
===========
맥 +크롬 환경에서 소모임 단축키 동작이 안되는 것 같습니다.
기본으로 등록되어 있던 클다방 이동도 안되네요.
그리고 윈+크롬 환경에서는 잘 동작하는데 CTRL+숫자가 크롬 기본으로 탭 이동키다 보니 두 개 이상의 탭이 열려 있으면 소모임 이동 대신 해당 번호의 탭으로 이동을 합니다.
지푸라기님의 댓글의 댓글
전 맥+엣지 환경에서 테스트하고 올렸는데 크롬은 탭 이동키가 있나보네요
크롬은 ctrl 말고 다른키를 쓰도록 예외처리 해야겠네요
저녁때 반영해놓겠습니다^^
지푸라기님의 댓글의 댓글
맥 버전 크롬에서도 Ctrl + 숫자키로 이동이 잘 되더라고요
말씀하신 탭 이동 기능은 Ctrl이 아닌 Command 키와 조합키로 사용되고 있었습니다.
맥 전용 키보드를 사용하신다면 Control + 숫자키를 사용하시면 동작할거에요
제가 맥 전용 키보드를 사용하지 않아서 실제와 좀 다를지도 모르겠네요
그래서 혹시나 하고 맥 사용자는 단축키를 2가지로 설정 가능하게 했습니다.
Contron + 숫자, Shift + Command + 숫자
맥에서 일반 키보드로 정상 동작하는건 확인 했습니다.
일반 키보드의 윈도우키가 맥의 Command키로 동작하기 때문에
아마 잘 되실 듯 합니다.
혹시 문제가 있으시면 알려주세요^^;
가을무렵님의 댓글의 댓글
집에 있는 맥도 확장 프로그램부터 삭제하고 재설치해봐야겠습니다.
감사합니다.
liam님의 댓글
liam님의 댓글의 댓글
liam님의 댓글의 댓글
도움주셔서 감사합니다.
왜나를불렀지님의 댓글
클리앙 커스텀처럼 아얘 별도의 확장 프로그램으로 나오면 좋겠네요.
설정에서 원하는 기능도 선택할 수 있게요..
지푸라기님의 댓글의 댓글
확장 프로그램까진 생각하고 있지 않긴해요.
그리고 다모앙이 지금도 계속 발전하고 있어서 소스가 수시로 변하기 때문에
잘 되던 기능이 갑자기 안되는 경우가 빈번해서 확장 등록하면 실시간 대응하기가 좀 어려울 듯 합니다.
커스텀 UI는 소스 변경이 없어야 제대로 기능이 유지되거든요...
우리 다모앙 개발자님들 홧팅 한번 외쳐보아요^^;
왜나를불렀지님의 댓글의 댓글
댓글에 내 댓글과 글쓴이 댓글이 강조 배경색이 되었으면 하는데, 추가해 주실 수 있나요?
지푸라기님의 댓글의 댓글
지푸라기님의 댓글의 댓글
색상 고르는 재주는 없어서...ㅡㅡ; 일단 넣었는데 색상은 누군가 멋진 색상 추천해주시면 바꾸겠습니다.
아래쪽 댓글 참고하셔서 자료실에서 최신 파일 받아주세요^^
왜나를불렀지님의 댓글의 댓글
적용해보니 너무나 잘 됩니다!! 꺄아~~~
딩굴댕굴님의 댓글
지푸라기님의 댓글의 댓글
마우스 우클릭 하시면 "빈 캐시 및 하드 새로 고침" 이라는게 나올텐데 눌러보세요
이렇게 하시면 캐시 싹 지우고 새로 로딩합니다. 되시는지 확인해보세요
(안되시면 브라우저 완전 종료 후 다시 띄워보시고요, 웨일에서는 테스트 해보지 않았는데 크롬 기반이라 아마도 될거에요)
풀레드님의 댓글
지푸라기님의 댓글의 댓글
이제 패치해서 로그인 안해도 그 외 기능은 되게끔 해놨는데....
다모앙에선 댓글 20개 이상 달리면 글 수정이 안되서 수정된 파일을 올릴수가 없네요 ㅎㅎ
버전 올릴때마다 새 글 쓰는것도 좀 그래서...고민되네요..어떻게 배포해야할지..
지푸라기님의 댓글의 댓글
지푸라기님의 댓글
최신 버전은 자료실에 올려두었습니다.
다모앙에서 수정 기능 생기기 전까진 자료실 파일 다운 받아주세요.
본문엔 수정이 안되이 이 내용도 추가가 안되네요.
불편하시더라도 당분간 이렇게 사용해주세요^^
왜나를불렀지님의 댓글
지푸라기님의 댓글의 댓글
빼먹었네요 ㅜㅜ 오늘밤에 작업해서 올릴께요
쟘스님의 댓글의 댓글
어제 커스텀 UI적용하고 너무 좋아서 의견도 남겼는데 바로 반영도 해주시고 정말 감사합니다.
댓글 추천버튼도 피드백 드리려고 왔는데 이미 다른 분이 말씀을 해주셨네요.
자료실에서 04버전 받고 감격해서 여기 인사드립니다 ㅎㅎ
지푸라기님의 댓글의 댓글
안그래도 아래쪽 버튼때문에 댓글이 이미지 첨부가 되면 버튼 영역 틀어지는 문제가 있어서
고쳐야지~생각하고 있었는데..아이디어 주셔서..잽싸게 반영했네요^^
05 버전 올라갔습니다. 다시 적용 해주세요^^
쟘스님의 댓글의 댓글
지푸라기님의 댓글의 댓글
지푸라기님의 댓글
https://damoang.net/pds/166
자료실에서 다운 받으실 수 있습니다.
--------------
댓글 버튼 영역 관련하여...
- 커스텀 UI는 페이지가 로딩 될 때 데이터를 조작해서 원하는 모양을 만듭니다.
- 댓글을 수정, 삭제 등 댓글에서 기능이 동작된 후
페이지 전체를 새로 로딩하지 않고 댓글 영역만 새로 로딩하고 있습니다.
그래서 버튼영역의 위치가 댓글 프로필 영역이 아닌 아래쪽에 보이고 있습니다.
새로고침하면 다시 정상적으로 커스텀UI가 적용되서 댓글 프로필에 보입니다.
- 이 문제는 다모앙에서 로딩 방식으로 바꿔주지 않는이상 조치가 어려워 보이는데
일단 감안하고 사용해주세요.
- 함수를 후킹해서 재정의해서 쓰면되지 않을까 얼핏 생각이 들어서 시도는 해보려고 합니다만
크게 기대는 안하시는것이...ㅡㅡ;
왜나를불렀지님의 댓글의 댓글
컴 여러대에 업데이트마다 설정값을 다 고쳐야 해서요..(후방글 옵션 등 ㅎㅎ)
지푸라기님의 댓글의 댓글
사용자 설정 정보는 각 사용자의 브라우저 로컬 스토리지에 저장을 시킬 수는 있습니다.
문제는 확장 프로그램은 제가 만든 프로그램이 아니기 때문에
로컬스토리지 정보를 불러와도 각 함수에 사용자가 설정한 값들을 넣어줄 수가 없다는거에요 ㅜㅜ
결국 기능을 실행하려면 이렇게 함수를 실행해야 하는데 hoobangUse(false);
로컬에서 true를 저장하고 있더라도 false 함수를 실행하기 때문에 false가 되거든요
그렇다고 사용자가 설정한 함수를 무시하고 로컬에 저장된 정보로만 실행을 한다고 하면
로컬 설정을 변경하고 싶을 때 변경을 또 할 수가 없게 됩니다 ㅡㅡ;
로컬 스토리지 저장하기, 함수 실행하기 이런식으로 기능을 세분화해서 나눠서 제가 만들어 드리면
되기는 하는데 그렇게 하면 좀 많이 혼란스러우실거에요
제가 기본값으로 제공해드리는 값과 로컬에 저장된 값이 어떻게 다른지
하나하나 다 기억하고 계셔야하고 로컬 저장하는 프로세스와 함수 실행 프로세스를
나눠서 관리하셔야해요...ㅡㅡ;
암튼..설명이 복잡해졌지만....
아쉽지만..이건 좀 천천히 고민을 해봐야할 듯 합니다.
다른 방안이 생각 날 수도 있으니까요...^^;
왜나를불렀지님의 댓글의 댓글
이미 고민하시고 계신 것이었군요.
설명을 읽어도 알못이라 '아 어려움이 있구나' 정도로 이해할수밖에 없네요. ㅎㅎ
나중에라도 구현이 되면 꼭 알려주세요. 덕분에 편하게 사용하고 있어 감사합니다. :)
지푸라기님의 댓글의 댓글
https://damoang.net/lecture/1124
이름도 바꾸고 사용 방식도 변경이 되어서 글을 새로 올렸습니다.
위 링크 들어가셔서 보시고 적용해보세요^^
지푸라기님의 댓글
일단 이름이 변경됩니다! 다모앙 UI 커스텀과 이름이 유사하여 혼돈이 생기기 때문에 이름 변경합니다.
소스코드 보고 수정하고 그러실 필요가 없습니다.
새 버전 업데이트 될 때마다 옵션을 바꾸실 필요가 없습니다.
자세한 사항은 개발이 완료되면...다시 안내드립니다.
one more thing...
지푸라기님의 댓글
기존 버전 쓰시는 분들에게 소식을 전합니다.
https://damoang.net/lecture/1124
편의성을 강화한 새 버전을 만들었습니다.
별도의 게시글로 등록을 하였으니 내용 보시고 적용해보세요.
기존 보다는 좀 쓰시기 편하실거에요..^^;
바람돌구름님의 댓글
다모앙이 점점 쓰기 편리해져서 너무 좋네요^^