jigsaw blog template

拼圖部落格入門模板

這是一個入門模板，用於在 Jigsaw 中以最少的努力創建一個漂亮的、可自訂的部落格。您只需更改一些設定即可開始使用。

查看部落格模板的預覽。

安裝

安裝 Jigsaw 後，從專案目錄執行以下命令：

./vendor/bin/jigsaw init blog

此入門範本包括常見頁面類型的範例，並預先配置了：

• 完全響應式導覽列
• Tailwind CSS，一個實用的 CSS 框架，可讓您自訂設計，而無需觸及任何 CSS 行
• Purgecss 從 CSS 中刪除未使用的選擇器，從而產生更小的 CSS 文件
• 使用highlight.js 進行語法高亮顯示
• 自動產生sitemap.xml檔案的腳本
• 自訂 404 頁面
• 用於接受 Mailchimp 電子報註冊的元件
• 聯絡表格範本
• 由 Fuse.js 和 Alpine.js 提供支援的搜尋欄，可自動索引您的內容並且需要零配置

---

---

配置您的新站點

與所有 Jigsaw 網站一樣，設定可以在config.php中找到；您可以使用特定於您網站的設定來更新該文件中的變數。您也可以在其中新增新的配置變數以在整個網站中使用；查看 Jigsaw 文件以了解更多資訊。

 // config.php
return [
    ' baseUrl ' => ' https://my-awesome-jigsaw-site.com/ ' ,
    ' production ' => false ,
    ' siteName ' => ' My Site ' ,
    ' siteDescription ' => ' Give your blog a boost with Jigsaw. ' ,
    ...
];

提示：您也可以在該個人資料中定義任何「集合」（例如，網站貢獻者的集合，或按主題組織的部落格文章的集合）。查看 Jigsaw 官方文件以了解更多資訊。

---

添加內容

您可以使用各種文件類型編寫內容。預設情況下，此入門範本要求您的內容位於source/_posts/資料夾中。

每個內容頁面的頂部都包含一個 YAML 標頭，指定內容應如何呈現。 title屬性用於動態產生每個頁面的 HTML title和 OpenGraph 標籤。 extends屬性定義此內容檔案將使用哪個父級 Blade 佈局進行渲染（例如_layouts.post將使用source/_layouts/post.blade.php進行渲染），而section屬性定義了希望放置此內容的 Blade「部分」進入其中。

---
extends : _layouts.post
section : content
title : Getting Started
date : 2022-08-02
description : Getting started with the Jigsaw blog starter template
cover_image : /assets/img/post-cover-image-2.png
featured : true
---

---

新增資產

任何需要編譯的資源（例如 JavaScript、Less 或 Sass 檔案）都可以加入到source/_assets/目錄中，Laravel Mix 將在執行npm run dev或npm run prod時處理它們。處理後的資源將儲存在/source/assets/build/中（注意第二個assets目錄中沒有底線）。

然後，當 Jigsaw 建立您的網站時，包含建置檔案的整個/source/assets/目錄（以及您選擇儲存在那裡的任何包含靜態資源（例如圖像或字體）的其他目錄）將複製到目標建置文件夾（ build_local ，在您的本機電腦上）。

不需要處理的文件（例如圖像和字體）可以直接添加到/source/assets/ 。

閱讀更多有關使用 Laravel Mix 在 Jigsaw 中編譯資源的資訊。

---

建立您的網站

現在您已經編輯了配置變數並知道如何自訂樣式和內容，讓我們建立網站。

 # build static files with Jigsaw
./vendor/bin/jigsaw build

# compile assets with Laravel Mix
# options: dev, prod
npm run dev