![Jekyll에서 라우팅 구성 요소 해킹]()
키 테이크 아웃
jekyll에는 내장 라우팅 구성 요소가 부족하여 URL을 변경해야 할 때 문제가되고 이전 URL에 대한 모든 링크를 수동으로 업데이트해야합니다. 플러그인 및 사용자 정의 루비 코드를 사용할 수없는 GitHub 페이지에서 호스팅되는 사이트에 이상적으로 이상적인 해결 방법을 사용하여 해결 방법을 만들 수 있습니다.
라우터는 _data 폴더에 저장된 YAML 파일로 URL을 이름 (Routes)에 매핑하여 Jekyll로 만들 수 있습니다. 이렇게하면 링크가 URL 경로 대신 경로 이름을 참조하기 때문에 이전 URL을 가리키는 모든 링크를 업데이트하지 않고도 URL을 변경할 수 있습니다.
라우터를보다 사용자 친화적으로 만들기 위해 마크 다운 링크 참조는 라우터에서 자동 생성되어 경로를 모든 파일에서 참조로 사용할 수 있습니다. 이것은 모든 경로를 루프하고 각 경로에 대한 마크 다운 참조를 생성하는 액체 부분을 생성하여 수행됩니다.
이 솔루션은 Jekyll에서 기능적 라우터를 제공하지만 몇 가지 제한 사항이 있습니다. 일반 HTML이 아닌 Markdown에서만 작동하며 앵커를 링크에 추가 할 수 없습니다. 또한 HTML 부분은 모든 페이지에 포함되어야하며 지루할 수 있습니다. 이러한 단점에도 불구하고,이 해결 방법은 Jekyll의 라우팅 구성 요소가 부족한 것에 대한 실행 가능한 솔루션을 제공합니다.
처음에 나는이 기사를 제목으로 만들었습니다. 분명히, 그것은 조금 길어서 그것을 단축해야했습니다. 어쨌든 요점은 변하지 않습니다. Jekyll은 일종의 라우터가 부족하고, 나는
가 아닌 솔루션을 모방하기위한 솔루션을 발견했다고 생각합니다. - .
그러나 첫 번째 일 : 나는 가장 먼저 : 나는 교향곡 배경에서 나옵니다. 라우터 는 URL을 이름에 맵핑하는 구성 요소를 의미합니다. 코드베이스를 크롤링하여 쓸모없는 위치로 향하는 모든 링크를 업데이트 할 필요가 없습니다.
왜 우리에게 그런 것이 필요할까요?
나는 현재 Sassdoc V2의 문서에서 열심히 노력하고 있습니다 (이 글을 쓰는 시점에서 아직 출시되지 않음). 우리는 상당히 많은 내용을 가지고 있습니다. 20 개가 넘는 페이지가 많은 코드 예제와 교차 참조를 포함하는 4 개의 다른 섹션에 분리됩니다.
재 작성 중에 몇 번, 나는 URL을 변경하기를 원했습니다. 문제는 URL을 변경할 때이 URL로 향하는 모든 링크를 업데이트해야한다는 것입니다. 모든 URL이 괜찮은지 확인하기 위해 20 페이지 이상 크롤링하는 것은 이상적이지 않습니다… -
이것이 우리가 라우팅 구성 요소가 필요한 이유입니다. 그런 다음 우리는 경로가 아닌 이름으로 URL을 언급하여 이름을 완벽하게 유효하게 유지하면서 경로를 변경할 수 있습니다. 어떻게 작동합니까?
그래서 우리는이 일을하기 위해 무엇이 필요합니까? Jekyll을 실행 중이지만 안전 모드로 제한되지 않은 경우 (불행히도 호스팅을 위해 GitHub 페이지를 사용할 때의 경우) Ruby 플러그인을 찾거나 빌드하여이를 수행 할 수 있습니다. 이것은 일반적으로 서버 측 언어에 의해 처리되는 것이기 때문에 이것은 최상의 솔루션입니다.
.
이제 Jekyll이 아닌 GitHub 페이지에서 사이트를 호스팅하는 경우 플러그인을 사용할 수 없거나 사용자 정의 루비 코드로 Jekyll의 코어를 확장 할 수 없으므로 사용 가능한 솔루션을 해킹 할 수 있습니다. 액체와 마크 다운.
주요 아이디어는 모든 경로가 실제 URL에 매핑되는 파일을 갖는 것입니다. 고맙게도 Jekyll을 사용하면 _data 폴더에 저장된 Yaml/JSON/CSV 파일을 통해 사용자 정의 글로벌 변수를 정의 할 수 있으며 나중에 Site.Data를 통해 액세스 할 수 있습니다. . 따라서 우리는 해당 URL에 해당 URL에 직접 액세스 할 수 있습니다.
작은 구문 설탕을 맨 위에 추가하려면 더 친근한 구문을 허용하는 Markdown 링크 참조를 만들어냅니다.
라우터 생성
라우터의 지점은 경로를 노출시키는 것입니다 (ak.a. )은 URL (1 ~ 1)에 매핑되는 것입니다. Jekyll 프로젝트의 _data 폴더에서 Yaml/JSON/CSV 파일을 만들 수 있으므로 lour.yml : 라는 YAML 파일을 사용하겠습니다.
당신은 우리가 물론 내부 링크에만 국한되지 않았 음을 언급했을 것입니다. 정기적으로 나타나는 경향이있는 경우 외부 URL의 경로를 계속해서 입력하지 않도록 외부 URL의 경로를 완전히 정의 할 수 있습니다. 같은 줄을 따라, 우리는 우리의 예제를 위해 4 개의 경로에서 멈췄지만 라우터에는 수백 개의 경로가 포함될 수 있습니다.
파일이 _Data에 있으므로 Site.Data. 다음 코드가 포함 된 페이지가 있다고 가정 해 봅시다 :
보시다시피, 우리는 더 이상 URL을 참조하지 않고 대신 경로를 참조합니다. 이것은 마술이 아니며 Jekyll에게 주어진 경로에 저장된 글로벌 변수에 액세스하도록 지시합니다 (예 : site.data.routes.faq).
이제 리포지토리가 더 이상 GitHub에서 호스팅되지 않거나“About US”페이지의 URL이 지금 /About /, 걱정하지 않는 경우! 라우터를 업데이트하면 링크를 업데이트하기 위해 페이지로 돌아 오지 않고 작동합니다.
구문 설탕 추가
이 시점에서, 우리는 작동 라우터가있어 사이트를 크롤링하지 않고도 링크를 고정시키지 않고 URL을 변경할 수 있습니다. 그래서 당신은 이미 꽤 시원하다고 말할 수 있습니다. 그러나 site.data.routes.faq를 입력하는 것은 편리하지 않습니다. 우리는 반드시 좀 더 우아하게 만들 수 있습니다!
<.> 예, 아니요. 처음에는 키 이름을 수락하고 Site.Data.Routes에 저장된 값을 반환하는 작은 Route () 함수를 구축 할 것을 생각했습니다. . 문제는 안전 모드에서 jekyll을 실행하고 있으므로 Ruby 코드로 확장 할 수 없습니다. 운이 없습니다.
그런 다음 이전에 사용한 적이없는 마크 다운 기능을 생각했습니다. 링크 참조. 이것이 링크가 Markdown에 표시되는 방법입니다
당신은 또한 링크를 참조로 설정할 수도 있습니다. 그건 그렇고 페이지의 어느 곳에서나 정의되어 있습니다.
home: "/"
about: "/about-us/"
faq: "/frequently-asked-questions/"
repository: "https://github.com/user/repository"
로그인 후 복사
페이지의 어느 곳에서나 루프에 이것을 추가함으로써 Jekyll은 이것을 액체 코드로 처리하도록 지시 한 다음 Markdown 참조로 처리됩니다. 예를 들어, 이전의 예로 돌아 오면 우리는 할 수 있습니다 : ---
layout: default
title: "About us"
---
<span><!-- Content about us -->
</span>
Go to our [GitHub repository]({{ site.data.routes.repository }}).
Or read the section dedicated to [Frequently Asked Questions]({{ site.data.routes.faq }}).로그인 후 복사
이제 우리가 말하고 있어요? 유일한 문제는이 루프를 모든 페이지에 포함시켜야한다는 것입니다. 처음에는 레이아웃에 추가 할 생각이므로 관련 레이아웃을 사용하여 모든 페이지에 자동으로 추가됩니다. 문제는 레이아웃이 jekyll의 마크 다운으로 처리되지 않으므로 참조는 실제로 DOM의 바닥에서 볼 수 있습니다. 더 나쁜 것은, 그들은 마크 다운으로 처리되지 않았기 때문에 우리 페이지에서 사용할 수 없습니다…
그러나 우리는 여전히 그것을 약간 더 좋게 만들기 위해 무언가를 할 수 있습니다. 이 루프를 액체 부분에 넣을 수 있으며 루프를 복사하는 대신 모든 페이지에 부분을 포함시킬 수 있습니다. _includes 폴더에서 partial을 생성한다고 가정합니다.
그리고 우리 페이지에서 :
참고 : 페이지의 어느 곳에서나 부분을 포함시킬 수 있습니다. 파일의 마지막 줄로 전적으로 넣을 수 있습니다.
최종 생각
그것은 사람들입니다. 우리는 Jekyll Safe-Mode에서 약간의 라우팅 구성 요소를 해킹했습니다. 이제 이것의 단점은 무엇입니까? 몇 가지 사소한 것들이 있습니다 :
그것은 Markdown에서 작동합니다. 일반 HTML에 링크가 있으면 {{site.data.routes. }}로 돌아 가야합니다. URL 업데이트로부터 링크를 안전하게 유지하기 때문에 너무 나쁘지 않습니다. [I am a link](http://link.url/)
로그인 후 복사
그 단점을 제외하고는 모두 훌륭하고 반짝입니다. 당신은 어떻게 생각하십니까? Jekyll에서 라우팅 구성 요소 해킹에 대한 자주 묻는 질문 (FAQ)
Jekyll에서 라우팅 구성 요소의 중요성은 무엇입니까?
Jekyll의 라우팅 구성 요소는 사이트의 URL의 구조를 결정하므로 중요합니다. 각 페이지를 특정 URL에 매핑하는 것이 좋습니다. 이는 사이트 탐색 및 SEO에 필수적입니다. 라우팅 구성 요소를 해킹하면 특정 요구 사항에 맞게 사이트의 URL 구조를 사용자 정의하고 사용자 경험 및 검색 엔진 가시성 향상을 수행 할 수 있습니다.
Jekyll에서 URL 구조를 사용자 정의 할 수 있습니까?
Jekyll Permalinks를 사용하여 URL 구조를 사용자 정의 할 수 있습니다. 게시물의 전면 물질에 사용자 정의 퍼머 링크를 지정하여 기본 URL 구조를 무시할 수 있습니다. 이를 통해보다 설명적이고 사용자 친화적 인 URL을 만들 수 있습니다.이 URL은 사이트의 SEO 및 사용자 경험을 향상시킬 수 있습니다. 내 웹 사이트에 Jekyll을 사용하면 어떤 이점은 무엇입니까?
Jekyll은 간단합니다. 개인, 프로젝트 또는 조직 사이트에 적합한 블로그 인식, 정적 사이트 생성기. 매우 유연하며 맞춤형 URL 구조, 테마, 플러그인 등을 지원합니다. 또한 정적 사이트를 생성하기 때문에 기존 CMS 플랫폼에 비해 엄청나게 빠르고 안전합니다. Jekyll 사이트를 제 3 자 플랫폼에 배포하려면 어떻게해야합니까?
Jekyll은 광범위한 범위를 지원합니다. GitHub 페이지, NetLify 등을 포함한 타사 배포 플랫폼 중. 사이트를 배포하려면 로컬로 사이트를 구축 한 다음 생성 된 정적 파일을 선택한 플랫폼으로 푸시해야합니다. 각 플랫폼에는 고유 한 특정 배포 프로세스가 있으므로 자세한 지침은 문서를 확인하십시오. Jekyll과 함께 구축 된 웹 사이트의 몇 가지 예는 무엇입니까?
Jekyll과 함께 구축 된 많은 인상적인 웹 사이트가 많이 있습니다. , 개인 블로그에서 대규모 조직 사이트에 이르기까지. 일부 예로는 공식 Jekyll 웹 사이트, Github 페이지 등이 있습니다. 공식 Jekyll 웹 사이트에서 Jekyll 웹 사이트의 쇼케이스를 찾을 수 있습니다. CloudFlare를 사용하여 Jekyll 사이트를 배포하려면 어떻게해야합니까?
CloudFlare 페이지는 프론트 엔드 개발자가 공동 작업 및 배포 할 수있는 Jamstack 플랫폼입니다. 웹 사이트. Jekyll과 호환되며 간단하고 간소화 된 배포 프로세스를 제공합니다. GitHub 저장소를 CloudFlare 페이지에 연결하면 저장소로 밀어야 할 때마다 자동으로 사이트를 구축하고 배포 할 수 있습니다. Jekyll에 대한 자세한 내용은 무엇입니까?
공무원 Jekyll 웹 사이트는 Jekyll에 대해 더 많이 배우는 훌륭한 리소스입니다. 포괄적 인 문서, 튜토리얼 및 Jekyll 웹 사이트 쇼케이스를 제공합니다. 또한 포럼, 블로그 및 Github 리포지토리를 포함하여 많은 커뮤니티 리소스가 있습니다. 내 Jekyll 사이트에 플러그인을 추가하려면 어떻게해야합니까? Jekyll은 사이트에 새로운 기능과 기능을 추가 할 수있는 광범위한 플러그인을 지원합니다. 플러그인을 추가하려면 설치 한 다음 사이트의 _config.yml 파일에 추가해야합니다. 일부 플러그인은 추가 구성이 필요할 수도 있으므로 자세한 지침은 플러그인의 문서를 확인하십시오.
다른 프로그래밍 언어와 함께 jekyll을 사용할 수 있습니까? jekyll은 Ruby와 함께 제작되었지만 가능합니다. 플러그인 및 통합을 사용하여 다른 프로그래밍 언어와 함께 사용하십시오. 예를 들어, Jekyll을 JavaScript와 함께 사용하여 사이트에 동적 기능을 추가하거나 Sass와 같은 CSS 전 처리기와 함께 스타일링 프로세스를 간소화 할 수 있습니다.
SEO에 대한 내 Jekyll 사이트를 최적화 할 수 있습니까? Jekyll은 SEO 사이트를 최적화하는 데 도움이되는 몇 가지 기능을 제공합니다. 여기에는 사용자 정의 URL 구조, 메타 태그 지원 및 XML 사이트 맵을 생성하는 기능이 포함됩니다. 또한 Jekyll은 정적 사이트를 생성하기 때문에 매우 빠르며 사이트의 검색 엔진 순위를 향상시킬 수 있습니다.
위 내용은 Jekyll에서 라우팅 구성 요소 해킹의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
