티스토리 오류제보 시트 개선
티스토리에 오류 제보하기 버튼을 만들어보자 - 구글 스프레드 시트를 데이터베이스로 이용하기
구글 스프레드 시트를 응용한 오류제보하기를 소개해드린적 있는데요, 의외로 몇몇 분들이 사용중이시길래 제가 사용중인 개선 방향을 알려드리려합니다.
기존에는 오류 제보가 들어온 글의 주소만 알 수 있어서 어떤글이었는지, 제목이 뭐였는지 확인해보려면 직접 주소를 쳐서 들어갔어야했는데요, 그냥 한 눈에 들어오도록 수정해보도록 하겠습니다.
스크립트 수정
강좌 포스트 3.에서 skin.html에 삽입한
스크립트 부분에서 다음을 찾습니다
data: {
path: decodeURIComponent(location.pathname),
memo: errors+" / "+comment
},
찾은 부분을 다음과 같이 바꿔주세요
data: {
path: location.protocol+"//"+location.host +"/admin/entry/post/?id="+decodeURIComponent(location.pathname).slice(1,5),
title: document.title,
memo: errors+" / "+comment
},
스프레드시트 수정
스크립트를 수정하고 누군가 오류제보를 남기기 전에 재빨리 스프레드 시트도 수정합니다.
1열을
| Timestamp | path | title | memo |
이렇게 수정하시면 됩니다.
스타일 수정
현재 제가 사용중인 스타일입니다. 기존의 눌러야 나타나는 모습과는 다르니 원하시는 분들만 적용해주세요~
HTML
<div id="sendComment">
<h4>문제가 있나요?<a href="http://nubiz.tistory.com/551">(?)</a></h4>
<span><input type="checkbox" value="내용상 오류가 있음"/> 내용상 오류가 있음</span>
<span><input type="checkbox" value="업데이트 필요"/> 업데이트 필요</span>
<span><input type="checkbox" value="화면이 깨짐"/> 화면이 깨짐</span>
<span><input type="checkbox" value="기타 수정이 필요함"/> 기타 수정이 필요함</span>
<div>
<textarea placeholder="구체적 내용이나 기타 의견을 남겨주세요. 답변을 받으려면 이메일 주소같은 연락처를 남겨주세요"></textarea>
<input type="button" value="보내기" onclick="sendComment();" class="flatbutton">
</div>
</div>
CSS
#sendComment {
color:#909090;
width:100%;
font-size:.8em;
margin:0 0 16px;
clear:both;
}
#sendComment h4 {
border-left: none;
padding: 0;
margin: 8px 0;
text-indent: 0;
}
#sendComment h4>a {
float:right;
}
#sendComment span {
padding-right: 4px;
}
#sendComment div {
display:flex;
margin: 8px 0;
}
#sendComment div > textarea {
flex:10;
border: none;
border-bottom: #909090 solid 1px;
}
#sendComment div > input {
flex:2;
-webkit-appearance: initial;
border: none;
background: none;
color:#4285f4;
}
#sendComment a {
text-decoration:none;
color:#aaa;
margin-left:0px;
}
