◐ 기타/블로그 꾸미기🎀
[Tistory] 티스토리 게시글에 인스타그램 피드 공유하기 [Tistory 게시글에 Instagram 게시물 삽입하기]
- 티스토리에 인스타그램 게시물 공유하기 티스토리 블로그에 인스타그램 게시물을 아래처럼 공유할 수 있다. 1. 인스타그램 게시물 소스코드 복사 2. 티스토리 게시글에 인스타그램 소스코드 추가 게시글 작성 완료를 누르면 아래와 같이 피드가 추가된다. Instagram에서 이 게시물 보기 어디가, 박대리!(@recycle.battery)님의 공유 게시물 - 참고자료 티스토리 블로그에 인스타그램 공유하기(피드 삽입하는 법) 필자가 이 블로그에 쓴 글 '윤스테이 촬영장소 구례 쌍산재 (인근 추천 여행지 포함)'을 보면 윤스테이 촬영지 쌍산재의 공식 인스타그램을 플러그인 처럼 본문에 삽입했다. 인스타그램을 내용 blog.hangyeong.com
[Tistory] 티스토리 게시글 번호 확인하기 [포스트 URL 문자로 했을 때 숫자 주소 확인하는 방법]
- 티스토리 게시글 번호 확인하기 게시글 주소를 문자로 해놓으면 검색엔진에 좋다고 하여 문자로 해놓는 경우가 많다. 그러나 문자로 하게 되었을 경우, 주소를 공유할 때 너무 길어진다는 단점이 있다. - 숫자 URL / 해당 게시글의 게시글 번호 https://yermi.tistory.com/629 - 문자 URL (위와 같은 URL) https://yermi.tistory.com/entry/Spring-Batch%EC%99%80-Scheduler%EC%9D%98-%EC%B0%A8%EC%9D%B4-Spring-Scheduler-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95 게시글 번호를 알 수 있는 방법은 없을까? 1. 통계로 들어가서 확인하기 2. 페이지 소스에서 확인하기
[Tistory] 티스토리 코드블럭에 라인넘버(line number) 표시하기 [highlightjs-line-numbers]
[Tistory] highlight.js 사용하여 코드블럭 테마 적용하기 [티스토리 코드블럭 테마 적용] - highlight.js 사용하여 코드블럭 테마 적용하기 티스토리 코드블럭의 테마를 설정해보려고 한다. 코드라인 넘버를 위해 highlight.js를 사용할 예정. → 라인넘버 안할 거라면, 플러그인에 있는 '코드 yermi.tistory.com - 티스토리 코드블럭에 라인넘버(line number) 표시하기 지난 포스팅에 이어, 이번에는 코드블럭에 라인넘버를 표시하려고 한다. 아래 링크를 통해, highlightjs-line-numbers.js를 다운로드 한다. GitHub - wcoder/highlightjs-line-numbers.js: Line numbering plugin for Highl..
[Tistory] highlight.js 사용하여 코드블럭 테마 적용하기 [티스토리 코드블럭 테마 적용]
- highlight.js 사용하여 코드블럭 테마 적용하기 티스토리 코드블럭의 테마를 설정해보려고 한다. 코드라인 넘버를 위해 highlight.js를 사용할 예정. → 라인넘버 안할 거라면, 플러그인에 있는 '코드 문법 강조(Syntax Highlight)'를 사용해도 된다. Getting highlight.js Hosted A prebuilt version of highlight.js with 36 commonly used languages is hosted by following CDNs: cdnjs jsdelivr unpkg You can find the list of commonly used languages below in the custom download form. For other ava..
[Tistory] 이미지 클릭 시, 모달 창으로 이미지 보여주기 [티스토리 Lightbox 적용 안될 때]
- 이미지 클릭 시, 모달 창으로 이미지 보여주기 어떤 이유인지 티스토리 라이트박스가 적용이 안되어 대체 방식을 찾았다. → 모달 창을 만들어 이미지를 띄우고자 한다. HTML의 body 태그 안에 아래 코드들을 추가해준다. - HTML - JavaScript $(function(){ // 이미지 클릭시 해당 이미지 모달 $("span img").click(function(){ let img = new Image(); img.src = $(this).attr("src") $('.modalBox').html(img); $(".modal").show(); }); // 모달 클릭할때 이미지 닫음 $(".modal").click(function (e) { $(".modal").toggle(); }); }); C..