首頁 > 科技週邊 > IT業界 > 在jekyll中黑客路由組件

在jekyll中黑客路由組件

Lisa Kudrow
發布: 2025-02-20 09:10:09
原創
198 人瀏覽過

Hacking a Routing Component in Jekyll

在jekyll中黑客路由組件

鑰匙要點

    Jekyll缺少內置的路由組件,當需要更改URL並且必須手動更新指向舊URL的所有鏈接時,這可能會出現問題。可以使用Liquid和Markdown創建解決方案,這是託管在GitHub頁面上託管的網站的理想選擇,無法使用插件和自定義Ruby代碼。
  • >
  • >可以在jekyll中創建路由器,通過將URL映射到存儲在_DATA文件夾中的YAML文件中的名稱(路由)。這允許更改URL,而無需更新所有指向舊URL的鏈接,因為鏈接現在是指路由名稱而不是URL路徑。 為了使路由器更加用戶友好,可以從路由器自動化降低鏈接引用,從而可以將路由用作任何文件中的參考。這是通過創建循環循環所有路線的液體部分來完成的,並為每個路線創建一個降價參考。
  • >該解決方案在Jekyll中提供了功能路由器,但存在一些局限性。它僅在降級中起作用,而不是普通的HTML,並且無法將錨添加到鏈接中。此外,HTML部分必須包含在所有頁面中,這可能很乏味。儘管存在這些缺點,但這種解決方法為Jekyll中缺乏路由組件提供了可行的解決方案。
  • 最初,當用Markdown,Liquid和YAML
  • 託管在GitHub頁面上時,我將在Jekyll中刪除Jekyll中的路由組件的標題。顯然,這有點長,所以我不得不縮短它。無論如何,這一點並沒有改變:Jekyll缺少某種路由器,我想我發現一個不太可能的
  • 解決方案。
,但首先是第一件事:我來自Symfony背景,所以

路由器我是指將URL映射到名稱的組件- 又稱A.K.A. 路由 - 因此您可以安全地更改URL不必爬行您的代碼庫即可更新前往已過時位置的所有鏈接。 為什麼我們需要這樣的東西?

>我目前正在為Sassdoc V2的文檔努力工作(尚未發布,截至撰寫本文時尚未發布)。我們有很多內容。超過20頁,分別在包含許多代碼示例和交叉參考的4個不同部分分開。 在重寫期間,我希望更改URL。問題是,當我更改URL時,如果我不希望它們被打破,則必須更新到該URL的所有鏈接。爬行超過20頁,以確保所有URL都還不錯,遠非理想……

這就是為什麼我們需要路由組件的原因。然後,我們將用名稱而不是通過其路徑來指代URL,從而使我們更改路徑,同時保持名稱完全有效。

如何工作?

>

>那麼,我們需要做什麼才能完成這項工作?如果您正在運行Jekyll,但不限於安全模式(不幸的是,使用GitHub頁面進行託管),則可以肯定地找到/構建一個Ruby插件來執行此操作。這將是最好的解決方案,因為這通常是服務器端語言處理的內容。

>現在,如果您在GitHub頁面上託管您的網站,這比Jekyll更常見,您不能使用插件,也無法使用自定義Ruby代碼擴展Jekyll的Core,因此您最終會用可用的內容來入侵一個解決方案:液體和降價。

>主要想法是將一個包含我們所有映射到實際URL的路由的文件。值得慶幸的是,Jekyll允許我們通過存儲在_DATA文件夾中的YAML/JSON/CSV文件來定義自定義全局變量,後來通過site.data。 data。 訪問。因此,我們可以以其名稱直接在我們的頁面中訪問這些URL。

>

>要在上面添加一點句法糖,我們將創建允許友好語法的Markdown鏈接引用 - 但讓我們不要太快。

>

創建路由器

路由器的點是示出映射到URL(一對一)的路由(又稱

名稱)。可以在任何jekyll項目的_data文件夾中創建yaml/json/csv文件,所以讓我們一起使用名為doutes.yml的yaml文件:> >您可能已經註意到,我們當然不限於內部鏈接。我們可以完全定義外部URL的路由,以避免一次又一次地鍵入它們,如果它們傾向於定期出現。按照相同的行,我們在4個路線上停下來示例,但是路由器可以包含數百條路線。

由於該文件位於_data中,因此我們可以使用site.data。 訪問其內容。因此,假設我們有一個包含以下代碼的頁面:
home: "/"
about: "/about-us/"
faq: "/frequently-asked-questions/"
repository: "https://github.com/user/repository"
登入後複製
登入後複製
>

如您所見,我們不再是指URL,而是參考路線。這不是魔術,它只告訴jekyll訪問在給定路徑上存儲的全局變量(例如site.data.routes.faq)。

現在,如果存儲庫不再在Github上託管,或者“關於我們”頁面的URL現在 /關於 /,請不要擔心!通過更新路由器,我們可以使其正常工作,而無需回到我們的頁面以更新我們的鏈接。

---
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 }}).
登入後複製
登入後複製
添加句法糖

在這一點上,我們有一個功能性路由器,允許我們更改任何URL,而無需爬網即可修復損壞的鏈接。因此,您可以說這已經很酷了。但是,必須鍵入site.data.routes.faq並不是很方便。我們肯定可以使它更加優雅!

> 是的,是的。首先,我想到建立一個小路由()函數,該功能接受一個密鑰名稱並返回存儲在site.data.routes. 的值。問題是我們正在安全模式下運行Jekyll,因此我們無法使用Ruby Code擴展它。沒有運氣。

然後,我想到了以前從未使用過的降價功能:鏈接引用。這就是在Markdown中表示鏈接的方式:

home: "/"
about: "/about-us/"
faq: "/frequently-asked-questions/"
repository: "https://github.com/user/repository"
登入後複製
登入後複製
>您還可以將鏈接設置為前往參考的鏈接 - 順便說一句,該鏈接完全看不見,在頁面中的任何地方定義了,就像:

---
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 }}).
登入後複製
登入後複製

注意:使用參考而不是URL時,括號被括號替換為括號。

>這可以使您可以將所有鏈接定義在同一位置(例如在底部),而不是整個文檔。我必須說我沒有太多使用此功能,但是在這種情況下,它很方便。

>

>這個想法是從我們的路由器中自動化鏈接引用,以便我們可以將路由用作任何文件中的參考。事實證明,在液體中進行此操作非常容易:

[I am a link](http://link.url/)
登入後複製
>通過將其添加到頁面中的任何位置,這將指示Jekyll作為液體代碼處理,然後將其作為Markdown參考進行處理。因此,例如,回到我們以前的示例,我們可以做:

>

[I am a link][id_reference]

​[id_reference]: http://link.url
登入後複製
現在我們在說話,對嗎?唯一的問題是必須在任何頁面中包括此循環。首先,我想到將其添加到佈局中,因此它會使用相關佈局自動添加到任何頁面。問題在於,佈局在jekyll中沒有作為降級處理,因此參考文獻實際上在DOM的底部可見。更糟糕的是,它們在我們的頁面中不可用,因為它們沒有被作為Markdown處理……太糟糕了。

> 但是,我們仍然可以做一些使它變得更好的事情。我們可以將此循環放在液體部分中,並將部分包含在每個頁面中,而不是複制循環。說我們在_的文件夾中創建一個路由。

>然後在我們的頁面中:

# _includes/route.html
{% for route in site.data.routes %}
[{{ route[0] }}]: {{ route[1] }}
{% endfor %}
登入後複製

>

注意:您可以在頁面中的任何位置都包含部分。您可以將其完全放在文件的最後一行中。
---
layout: default
title: "About us"
---

<span><!-- Content about us -->
</span>
Go to our [GitHub repository][repository].
Or read the section dedicated to [Frequently Asked Questions][faq].

{% for route in site.data.routes %}
[{{ route[0] }}]: {{ route[1] }}
{% endfor %}
登入後複製
最終想法

就是這樣,我們已經在Jekyll Safe-Mode中砍了一些路由組件。現在這有什麼缺點?有一些次要的:

>它可以在Markdown中工作;如果您碰巧在平原HTML中具有一個鏈接,則必須返回到{{site.data.Routes。 }}}},這還不錯,因為它仍然可以使鏈接免受URL更新的安全。

>

>您不能在鏈接中添加錨點;如果需要

>您必須在所有頁面中包括HTML部分,這可能很乏味(即使您認為這是YAML前部問題的擴展,您還是必須寫的)。
    除了那些缺點之外,這一切都很好。你怎麼看?
  • >常見問題(常見問題解答)有關在jekyll中攻擊路由組件的問題(常見問題解答) Jekyll中路由組件的重要性是什麼?它負責將每個頁面映射到特定的URL,這對於站點導航和SEO至關重要。通過黑客入侵路由組件,您可以自定義網站的URL結構以滿足您的特定需求,改善用戶體驗和搜索引擎可見性。

    >如何自定義Jekyll中的URL結構?允許您通過使用永久鏈接來自定義URL結構。您可以在帖子的前提中指定自定義的永久鏈接,該鏈接將覆蓋默認的URL結構。這使您可以創建更具描述性和用戶友好的URL,它可以改善您的網站的SEO和用戶體驗。

    >

    >在我的網站上使用jekyll有什麼好處? ,博客意識,靜態網站生成器,非常適合個人,項目或組織網站。它非常靈活,並支持自定義的URL結構,主題,插件等。另外,由於它會生成靜態站點,因此與傳統的CMS平台相比,它非常快速,安全。

    >如何將我的jekyll網站部署到第三方平台?第三方部署平台,包括GitHub頁面,Netlify等。要部署網站,您需要在本地構建它,然後將生成的靜態文件推到所選平台。每個平台都有自己的特定部署流程,因此請務必檢查其文檔以獲取詳細說明。

    >使用Jekyll構建的網站的一些示例? ,從個人博客到大型組織網站。一些示例包括官方的Jekyll網站,GitHub頁面等等。您可以在官方的Jekyll網站上找到Jekyll網站的展示。

    >我如何使用CloudFlare部署我的Jekyll網站?

    cloudflare頁面是jamstack的平台,是jamstack的平台網站。它與Jekyll高度兼容,並提供了一個簡單的簡化部署過程。您可以將github存儲庫連接到CloudFlare頁面,只要您推到存儲庫,它將自動構建和部署您的網站。

    有哪些有關jekyll的更多資源? Jekyll網站是了解有關Jekyll的更多資源。它提供了全面的文檔,教程和Jekyll網站的展示。此外,還有許多可用的社區資源,包括論壇,博客和GitHub存儲庫。

    >如何將插件添加到我的jekyll網站?

    > jekyll支持各種插件,這些插件可以為您的網站添加新功能和功能。要添加插件,您需要安裝它,然後將其添加到網站的_config.yml文件中。某些插件也可能需要其他配置,因此請確保檢查插件的文檔以獲取詳細說明。

    >我可以將jekyll與其他編程語言一起使用嗎?

    jekyll是使用Ruby構建的,但它可以通過使用插件和集成與其他編程語言一起使用。例如,您可以將jekyll與JavaScript一起使用為您的站點添加動態功能,或者使用SASS(例如Sass)等CSS預處理程序來簡化您的樣式過程。

    >

    >如何優化SEO的Jekyll網站? > Jekyll提供了幾個功能,可以幫助您優化SEO網站。這包括自定義URL結構,對元標籤的支持以及生成XML站點地圖的能力。此外,由於Jekyll會生成靜態站點,因此它可以非常快,可以改善您網站的搜索引擎排名。

    >

以上是在jekyll中黑客路由組件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板