หน้าแรก>ซอร์สโค้ด ASP>หมวดหมู่อื่นๆ
ดาวน์โหลด

เทมเพลตเริ่มต้นบล็อกตัวต่อ

นี่คือเทมเพลตเริ่มต้นสำหรับการสร้างบล็อกที่สวยงามและปรับแต่งได้ในตัว 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. ' ,
    ...
];

เคล็ดลับ: ไฟล์การกำหนดค่านี้เป็นที่ที่คุณจะกำหนด "คอลเลกชัน" ใดๆ (เช่น คอลเลกชันของผู้มีส่วนร่วมในไซต์ของคุณ หรือคอลเลกชันของบล็อกโพสต์ที่จัดเรียงตามหัวข้อ) ตรวจสอบเอกสารประกอบจิ๊กซอว์อย่างเป็นทางการเพื่อเรียนรู้เพิ่มเติม

การเพิ่มเนื้อหา

คุณสามารถเขียนเนื้อหาของคุณโดยใช้ไฟล์ประเภทต่างๆ ตามค่าเริ่มต้น เทมเพลตเริ่มต้นนี้คาดว่าเนื้อหาของคุณจะอยู่ในโฟลเดอร์ source/_posts/

ด้านบนของหน้าเนื้อหาแต่ละหน้ามีส่วนหัว YAML ที่ระบุวิธีการแสดงผล แอตทริบิวต์ title ใช้เพื่อสร้าง title HTML และแท็ก 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/ ได้โดยตรง

อ่านเพิ่มเติมเกี่ยวกับการคอมไพล์เนื้อหาใน Jigsaw โดยใช้ Laravel Mix

สร้างเว็บไซต์ของคุณ

เมื่อคุณได้แก้ไขตัวแปรการกำหนดค่าและทราบวิธีปรับแต่งสไตล์และเนื้อหาแล้ว เรามาสร้างไซต์กันดีกว่า 

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

# compile assets with Laravel Mix
# options: dev, prod
npm run dev
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด