하이퍼링크 미리보기

jekyll-linkpreview 플러그인을 이용한 하이퍼링크 미리보기 구현

GitHub - ysk24ok/jekyll-linkpreview: Jekyll plugin to generate link preview

Jekyll plugin to generate link preview. Contribute to ysk24ok/jekyll-linkpreview development by creating an account on GitHub.

github.com

---

jekyll-linkpreview 설치

1) Gemfile에 플러그인 추가

group :jekyll_plugins do
  gem 'jekyll-linkpreview'
end 

2) _config.yml에 jekyll-linkpreview 추가

plugins:
  - jekyll-linkpreview

3) ruby cmd에서 플러그인 설치

bundle install

4) 예시 css파일 추가 (\assets\css)

jekyll-linkpreview/assets/css/linkpreview.css at master · ysk24ok/jekyll-linkpreview

Jekyll plugin to generate link preview. Contribute to ysk24ok/jekyll-linkpreview development by creating an account on GitHub.

github.com

5) head.html에 적용시킬 css파일 코드 추가 (\_includes)

<!-- Link Preview Style -->
<link rel="stylesheet" href="{{ '/assets/css/linkpreview.css' | relative_url }}">

---

사용법

{% linkpreview "https://github.com/" %}

GitHub · Build and ship software on a single, collaborative platform

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

---

커스텀

1. 스타일 커스텀 (css)

2. 목차(<h2> 태그) 제거

\_includes에 linkpreview.html 파일 생성

  
  <div class="jekyll-linkpreview-wrapper">
    <div class="jekyll-linkpreview-wrapper-inner">
      <div class="jekyll-linkpreview-content">
        <div class="jekyll-linkpreview-body">
          <div class="jekyll-linkpreview-title">
            <a href="{{ url }}" target="_blank">{{ title }}</a>
          </div>
          {% if description %}
            <div class="jekyll-linkpreview-description">{{ description }}</div>
          {% endif %}
          <div class="jekyll-linkpreview-footer">
            <a href="{{ url }}" target="_blank">{{ domain }}</a>
          </div>
        </div>
      </div>
    </div>
    {% if image %}
      <div class="jekyll-linkpreview-image" style="background-image: url('{{ image }}');"></div>
    {% endif %}
  </div>
  

• 다만 공유 링크에 권한 같은게(회원공개, 비공개 등) 걸려있으면 오류가 좀 있다.
  비공개 글은 아예 불가능하고, 일부공개 같은 경우 레이아웃이 깨진다ㅠㅠ(왜?..)