질문/조언팁/리소스 공유

안녕하세요!

 

항상 질문만 하다가 이렇게 팁게에 글 쓰는 날도 오네요 히히

 

나름 삽질도 많이 했고, 구미호 님 도움도 많이 받았습니다.

 

서론 중략 하고!

 

스케치북5 스킨에 게시물 주소 복사 버튼 달기 소스 공유 합니다.

 

다른 스킨에도 얼추 비슷하게 적용되지 않을까 생각 합니다.

 

스킨 폴더의 _read.html 파일을 열어서

 

51번라인

                <!--// 제목 밑 커스텀 위젯 등 영역 -->
                {$mi->rd_hd_widget}

 

커스텀 위젯 영역 바로 아래에

 

                <!--게시물 주소 복사-->
                <div class="side">
                <input id="url_field" type="url" value="{$oDocument->getPermanentUrl()}" readonly="readonly">
                <input id="copy_btn" type="button" value="복사">
                <script>
                var copyBtn = document.querySelector('#copy_btn');
                copyBtn.addEventListener('click', function () {
                var urlField = document.querySelector('#url_field');
                urlField.select();
                document.execCommand('copy'); // or 'cut'
                }, false);
                </script>
                </div>
                <!--게시물 주소 복사 끝-->

 

의 코드를 삽입하면

 

아래와 같은 주소 복사 줄이 생깁니다.

(저는 IP주소와 게시물 주소링크가 표시되는 부분을 아예 주석처리 해 버렸습니다.)

 

질문1.jpg

질문2.jpg

 

이것으로 괜찮으신 분은 이대로 사용 하시면 되겠습니다.

 

좀 모양을 예쁘게 바꾸고 싶으신 분들께서는...

 

https://xetown.com/qna/865756#comment_865890

 

위 링크에 구미호님께서 도와주신 CSS적용 소스가 있으니, 버튼 색이나 크기 등을 원하시는대로 변경 하시면 될 것 같습니다^^

 

 

 

글쓴이 돼둥이

profile
Administrator
Wild Cats : 대한민국 비공식 취미생활 연구소
https://wildcats.co.kr

Team Manager
Team. G.D.S.
https://teamgds.co.kr

Chief
Drone Mania
http://cafe.naver.com/dronemania

Instructor
Drone Mania Seoul/Kyeonggi
https://goo.gl/Zq1MJb


Comment
드론만드는 키덜트 낚시꾼.
  • ?

    5445.PNG

    버튼:
    <!--게시물 주소 복사-->
    <button class="btn-clipboard" data-toggle="tooltip" data-trigger="hover" data-placement="top" data-original-title="주소가 복사되었습니다.">게시물 주소복사</button>
    <!--게시물 주소 복사 끝-->

    버튼: CSS :

    .btn-clipboard {display:inline-block;color: #fff;font-size: 11px;border: 1px solid #007dc1;border-radius: 3px;margin: -4px 0 0 3px;padding: 2px 10px 3px 10px;background: #006db2;text-decoration:none}

    스크립트

    <!--클립보드 JS 및 스타일 설정 시작-->
    <script src="/modules/board/skins/sketchbook5/js/clipboard.min.js"></script>
    <script>
    var clipboard = new Clipboard('.btn-clipboard', {
    text: function() {
    return 'http://<?php echo $_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; ?>';
    }
    });
    clipboard.on('success', function(e) {
    console.log(e);
    });
    clipboard.on('error', function(e) {
    console.log(e);
    });
    </script>
    <!--클립보드 JS 및 스타일 설정 끝-->

    JS 파일 다운받기
    https://github.com/zenorocha/clipboard.js/tree/master/dist

    위 주소에서 clipboard.js 이것을 다운 받아서 /modules/board/skins/sketchbook5/js/ 여기에 넣어주시면 됩니다
    저는 이렇게 했습니다

    그리고 버튼 위치는 스키치북 _read.html 에서

    <small cond="$grant->manager || $mi->display_ip_address" class="m_no">({$oDocument->getIpaddress()}) </small>
    위 함수 바로 아래 달았습니다

    단지 클릭하고 복사 되었습니다 창이 안뜨네요 복사는 되는데 ㅎㅎㅎ

     

    aSDSDS.PNG 완성

  • ? profile
    최고입니다!
    저도 참고하여 업뎃 해 봐야겠어요^^
  • profile ?
    복사 되었습니다 창이 나오도록 해봐야 할것 같습니다
  • ? profile
    죄송합니다만 버튼 CSS는 어디에 넣어야 적용이 되나요?
  • ?
    /modules/board/skins/sketchbook5/css/board.css 여기 맨 아내 두세요
  • ? profile
    감사합니다!!!
  • ?
    좋은 팁 감사합니다.
    제가 적용한 디자인 공유합니다.
    http://moonhouse.co.kr/xe/432456
  • ? profile
    링크로 접속 해 봤지만 빈 페이지만 뜨네요 ㅠㅠ 크롬입니다.
  • profile ?
    죄송합니다.
    호스팅을 라이믹스로 업데이트 하고 있었습니다.
    작업 끝나고 이제 연결 잘 됩니다.^.^
  • ? profile

    와우 버튼도 홈페이지도 너무 예쁩니다.
    라이믹스로 업그레이드 하고 싶은 마음이 뿜뿜 오네요.
    하지만 안드로이드 푸시 때문에 PHP를 조금 더 공부 하기 전까진 XE에 머물러 있어야 할 것 같습니다^^;

    무심코 추천을 눌렀는데 경고창에 알 수 없는 문자가 한가득 나타납니다.
    아마도 비회원은 추천할 수 없다는 문구인것 같은데 한번 확인 해 보시는게 좋을것 같습니다^^

    팔공산님.jpg

  • profile ?
    감사합니다.
    스케치북게시판을 약간 수정해서 사용중인데
    제가 비회원으로 추천을 눌러 본적이 없어서 몰랐던 부분이네요.^.^
    이거 수정할려면 또 한참 들다 봐야 겠네요ㅠㅠ
  • profile
    좋은 팁 감사합니다.