[구글 드라이브에 올린 파일 직접 다운로드 링크 넣는 방법]
[외부링크 파일을 로그인회원만 확장변수활용 다운받게 하는 방법]
위 두가지 내용을 복합해서 sketchbook5 게시판에 적용하는 방법을 작성합니다.
먼저 위 두가지 내용을 잘 숙지 하셨다 생각하고 작성합니다.
A. skin.xml 파일안에 로그인한 회원이 다운받을 URL 이 적혀 있는 확장변수의 입력항목이름 부분에 3개의 설정값을 적용합니다.
<var name="extra_mid" type="text">
<title xml:lang="ko">확장변수 mid</title>
<description xml:lang="ko">적용될 확장변수 게시판 mid(게시판명)를 기재.</description>
</var>
<var name="t_logon_name" type="text">
<title xml:lang="ko"> ┖ 확장변수 입력항목 이름(일반텍스트 링크)</title>
<description xml:lang="ko">입력항목 이름을 적어주세요. 한줄 입력칸형식("http://다운주소" 직접 입력)</description>
</var>
<var name="g_logon_name" type="text">
<title xml:lang="ko"> ┖ 확장변수 입력항목 이름(구글 드라이브 전용)</title>
<description xml:lang="ko">입력항목 이름을 적어주세요. 한줄 입력칸형식(ID 부분만 붙여 넣기 하세요)</description>
</var>
<var name="et_logon_name" type="text">
<title xml:lang="ko"> ┖ 확장변수 입력항목 이름(URL 링크)</title>
<description xml:lang="ko">입력항목 이름을 적어주세요. URL형식</description>
</var>
<var name="et_logon_t" type="text">
<title xml:lang="ko"> ┖ 다운로드칸 옵션 설명</title>
<description xml:lang="ko">기본 : 클릭하시면 자료가 다운로드 됩니다.</description>
</var>
[3가지 설정을 간단히 설명]
1. t_logon_name : "게시판 설정" - "사용장 정의" - "형식"을 "한줄 입력칸(text)"으로 지정합니다.
그리고 게시판 글 작성시 확장변수 란에 "http://주소" 포함한 전체 주소를 기재하시면 됩니다.
2. g_logon_name : "게시판 설정" - "사용장 정의" - "형식"을 "한줄 입력칸(text)"으로 지정합니다.
그리고 게시판 글 작성시 확장변수 란에 구글 드라이브에서 추출한 아래의 주소 형식에서 파란색 부분만 복사해서 기재하시면 됩니다.
https://drive.google.com/file/d/1qvYhoNZ2rH320nSHtk7생략.../view?usp=sharing
3. et_logon_name : "게시판 설정" - "사용장 정의" - "형식"을 "URL 형식"으로 지정합니다.
그리고 게시판 글 작성시 확장변수 란에 "http://주소 or 주소" 둘중 편한데로 기재하시면 됩니다.
B. _read.html 파일안에 "본문 하단" 확장변수부분을 아래와 같이 수정합니다.
<!--@if($mid==$mi->extra_mid)-->
<!--@if($logged_info)-->
<a href="#toggleExtraVars"><img src="./img/login_img.png"></a>
<style>
#toggleExtraVars { border:1px dotted #fff; padding:5px; font-size:14px; border-radius:5px; }
#toggleExtraVars i { color:#fff; margin-right:10px; }
#toggleExtraVars .et { font-size:12px; color:#d2d2d2 }
.sty { cursor: pointer; background-color:#000; width:210px }
</style>
<div cond="$val->name==$mi->et_logon_name" id="toggleExtraVars" style="background-color:#747474"><i class="fas fa-download"></i>
{$val->getValueHTML()}<span cond="$mi->et_logon_t" class="et"> : {$mi->et_logon_t}</span>
</div>
<div cond="$val->name==$mi->t_logon_name" id="toggleExtraVars" class="sty" onclick="location.href='{$val->getValueHTML()}'"><i class="fas fa-download"></i>
<b class="et"><span cond="$mi->et_logon_t">: {$mi->et_logon_t}</span><span cond="!$mi->et_logon_t">: 클릭하시면 자료가 다운로드 됩니다.</span></b>
</div>
<div cond="$val->name==$mi->g_logon_name" id="toggleExtraVars" class="sty" onclick="location.href='https://docs.google.com/uc?export=download&id={$val->getValueHTML()}'"><i class="fas fa-download"></i>
<b class="et"><span cond="$mi->et_logon_t">: {$mi->et_logon_t}</span><span cond="!$mi->et_logon_t">: 클릭하시면 자료가 다운로드 됩니다.</span></b>
</div>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){
$('#toggleExtraVars').hide();
$('a[href=#toggleExtraVars]').click(function(){
$($(this).attr('href')).toggle();
return false;
});
});
</script>
<!--@else-->
<p><a href="" onclick='javascript:alert("회원가입 로그인후 다운로드가 가능합니다.");'><img src="./img/login_img.png" alt="" class="pr_tooltip" pr_color="dark" pr_position="bottom" title="회원가입 로그인후 다운로드가 가능합니다" /></a></p>
<!--@end-->
<!--@else-->
<!--@end-->
[코드 설명]
1. <!--@if($mid==$mi->extra_mid)--> : 적용될 확장변수 게시판 mid를 지정합니다.
2. ./img/login_img.png : 클릭부분을 이미지로 출력한 것임
3. <i class="fas fa-download"></i> : 웹폰트인 "폰터 어썸"을 사용했습니다.
4. $mi->et_logon_t : Download 이미지 클릭시 아래에 출력되는 자료 다운 받기 부분에 나타나는 문구
(기본문구로 ": 클릭하시면 자료가 다운로드 됩니다.")
5. class="pr_tooltip" pr_color="dark" pr_position="bottom" : 비로그인시 출력되는 문구는 "말풍선(툴팁) 애드온" 적용
6. onclick="location.href='{$val->getValueHTML()}'" 은 다운페이지가 자신의 페이지에 출력되며
새로운 페이지에서 출력되게 할려면 onclick="window.open('{$val->getValueHTML()}')"
C. 특징
1. URL형식을 제외한 두가지 형태의 경우 : Url주소를 숨길 수 있습니다.
2. 구글 드라이브 파일의 경우 : 코드를 외우거나 저장할 필요 없이 ID부분만 붙여 넣기 하면 됩니다.
(응용하면 다른 확장변수에도 적용 가능)
[sketchbook5 게시판 설정]
[글 작성]