Jekyll Now의 DEV

Jekyll에 대해 들어 보셨을 것입니다. 생각과 콘텐츠를 노출하기 위해 일반적으로 블로그와 웹사이트를 만드는 데 사용할 수 있는 간단한 정적 사이트 생성기입니다. 대부분의 사람들은 웹 사이트를 호스팅할 수 있는 인터넷의 무료 장소인 Github Pages용 솔루션을 바로 사용할 수 있는 Jekyll을 사용합니다.

Jekyll Now은 Markdown 또는 YAML을 사용한 콘텐츠 추가, SASS를 사용한 스타일 지정, 모바일 반응형 지원 등 블로그에 필요한 대부분의 기능을 이미 통합한 Jekyll 테마입니다. Jekyll Now의 멋짐에도 불구하고 현재 2년 이상 업데이트되지 않았다는 단점이 있습니다(마지막 커밋은 2018년 4월). 업데이트가 부족하면 제공하는 일부 기능이 손상됩니다. 이러한 흉터 기능 중 하나는 블로그 바닥글을 참조하는 소셜 미디어입니다.
Jekyll Now에는 기본 구성 파일 이름_config.yml이 있습니다. 당신이 그것을 우연히 발견했을 때, 당신은 당신의 소셜 미디어 프로필을 참조할 수 있다는 것을 알게 될 것이며, 이것은 나중에 클릭하면 당신의 프로필로 리디렉션되는 아이콘으로 표시될 것입니다. 예를 들어 Github 페이지, Twitter 프로필 또는 LinkedIn을 참조할 수 있습니다. 그러나 dev.to 또는 중간 프로필을 참조할 수 없습니다. 활성화하려면 Jekyll Now "엔진"을 자세히 살펴보고 몇 가지 업데이트를 수행해야 합니다.
_includes 폴더로 이동하면 사용 가능한 바닥글 링크에 대한 참조가 포함된 파일이 있습니다. svg-icons.html . 이것은 사용자 지정 바닥글 소셜 미디어 링크인 HTML을 포함하는 첫 번째 단계입니다. 줄 중 하나를 복사하고 웹 사이트 이름을 dev.to로 바꾸면 DEV에 대한 참조 링크가 생성됩니다.

{% if site.footer-links.dev-to %}<a href="https://dev.to/{{ site.footer-links.dev-to }}"><i class="svg-icon dev-to"></i></a>{% endif %}

코드 조각 1 - svg-icons.html에 포함된 dev.to 바닥글 링크

HTML을 정의했으면 CSS를 추가하여 HTML을 사용자 정의해야 합니다. 바닥글 요소가 CSS 클래스( <i> )를 참조하는 svg-icon 요소로 구성되어 있음을 눈치채셨을 것입니다. 일부 CSS 클래스를 참조하는 경우 이 클래스도 엔진에 있어야 합니다. 앞서 언급했듯이 Jekyll Now는 스타일링을 위해 SASS를 사용합니다. _sass에 대한 스타일을 포함하는 svg-icon라는 폴더를 찾을 수 있습니다. svg-icons.html에서 이전에 수행한 것과 유사하게 _svg-icons.scss를 열면 dev.to 아이콘을 지원하도록 클래스를 확장할 수 있습니다. 줄을 복사하고 이전 참조를 <i> 요소에 정의된 것으로 바꾸면 방금 만든 HTML 요소의 스타일이 지정됩니다. 아이콘 SVG 아이콘의 base64 문자열을 올바르게 참조하고 아이콘 크기를 채택했는지 확인하십시오(그렇지 않으면 SVG 레이어가 중복되어 표시될 수 있음).

&.dev-to{ background-image: url(data:image/svg+xml;base64,PHN2ZyByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoICBmaWxsPSIjMDAwMDAwIiBkPSJNMTIwLjEyIDIwOC4yOWMtMy44OC0yLjktNy43Ny00LjM1LTExLjY1LTQuMzVIOTEuMDN2MTA0LjQ3aDE3LjQ1YzMuODggMCA3Ljc3LTEuNDUgMTEuNjUtNC4zNSAzLjg4LTIuOSA1LjgyLTcuMjUgNS44Mi0xMy4wNnYtNjkuNjVjLS4wMS01LjgtMS45Ni0xMC4xNi01LjgzLTEzLjA2ek00MDQuMSAzMkg0My45QzE5LjcgMzIgLjA2IDUxLjU5IDAgNzUuOHYzNjAuNEMuMDYgNDYwLjQxIDE5LjcgNDgwIDQzLjkgNDgwaDM2MC4yYzI0LjIxIDAgNDMuODQtMTkuNTkgNDMuOS00My44Vjc1LjhjLS4wNi0yNC4yMS0xOS43LTQzLjgtNDMuOS00My44ek0xNTQuMiAyOTEuMTljMCAxOC44MS0xMS42MSA0Ny4zMS00OC4zNiA0Ny4yNWgtNDYuNFYxNzIuOThoNDcuMzhjMzUuNDQgMCA0Ny4zNiAyOC40NiA0Ny4zNyA0Ny4yOGwuMDEgNzAuOTN6bTEwMC42OC04OC42NkgyMDEuNnYzOC40MmgzMi41N3YyOS41N0gyMDEuNnYzOC40MWg1My4yOXYyOS41N2gtNjIuMThjLTExLjE2LjI5LTIwLjQ0LTguNTMtMjAuNzItMTkuNjlWMTkzLjdjLS4yNy0xMS4xNSA4LjU2LTIwLjQxIDE5LjcxLTIwLjY5aDYzLjE5bC0uMDEgMjkuNTJ6bTEwMy42NCAxMTUuMjljLTEzLjIgMzAuNzUtMzYuODUgMjQuNjMtNDcuNDQgMGwtMzguNTMtMTQ0LjhoMzIuNTdsMjkuNzEgMTEzLjcyIDI5LjU3LTExMy43MmgzMi41OGwtMzguNDYgMTQ0Ljh6Ij48L3BhdGg+PC9zdmc+);}

코드 조각 2 - dev-to HTML 요소에 대한 사용자 지정 스타일 지정

마지막 단계는 dev-to 프로필 표시를 포함하도록 _config.yml 파일을 편집하는 것입니다. footer-links 컬렉션 아래에 다음 태그를 추가합니다.

dev-to: <your_dev.to_username>

코드 조각 3 - dev.to 프로필을 표시하기 위한 YAML 태그

그게 다야. 모든 것이 잘 되었다면 블로그 바닥글에 dev.to 아이콘이 표시되고 클릭하면 프로필로 리디렉션됩니다!