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

เทมเพลตเริ่มต้นเอกสารจิ๊กซอว์

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

ดูตัวอย่างเทมเพลตเอกสาร

การติดตั้ง

หลังจากติดตั้ง Jigsaw แล้ว ให้รันคำสั่งต่อไปนี้จากไดเร็กทอรีโปรเจ็กต์ของคุณ: 

./vendor/bin/jigsaw init docs

เทมเพลตเริ่มต้นนี้ประกอบด้วยตัวอย่างประเภทเพจทั่วไป และมาพร้อมกับการกำหนดค่าล่วงหน้าด้วย:

  • แถบนำทางที่ตอบสนองอย่างเต็มที่
  • เมนูนำทางแถบด้านข้าง
  • Tailwind CSS เฟรมเวิร์ก CSS ยูทิลิตี้ที่ช่วยให้คุณปรับแต่งการออกแบบของคุณโดยไม่ต้องแตะบรรทัด CSS
  • Purgecss เพื่อลบตัวเลือกที่ไม่ได้ใช้ออกจาก CSS ของคุณ ส่งผลให้ไฟล์ CSS มีขนาดเล็กลง
  • การเน้นไวยากรณ์โดยใช้ highlight.js
  • สคริปต์ที่สร้างไฟล์ sitemap.xml โดยอัตโนมัติ
  • แถบค้นหาที่ขับเคลื่อนโดย Algolia DocSearch และคำแนะนำในการเริ่มต้นใช้บริการจัดทำดัชนีฟรี
  • หน้า 404 ที่กำหนดเอง

ภาพหน้าจอเทมเพลตเริ่มต้นเอกสาร

การกำหนดค่าไซต์ใหม่ของคุณ

เช่นเดียวกับไซต์ Jigsaw ทั้งหมด การตั้งค่าการกำหนดค่าสามารถพบได้ใน config.php ; คุณสามารถอัปเดตตัวแปรในไฟล์นั้นด้วยการตั้งค่าเฉพาะสำหรับโปรเจ็กต์ของคุณ คุณยังสามารถเพิ่มตัวแปรการกำหนดค่าใหม่เพื่อใช้ทั่วทั้งไซต์ของคุณได้ ดูเอกสารประกอบ Jigsaw เพื่อเรียนรู้เพิ่มเติม 

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

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

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

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

ส่วนแรกของหน้าเนื้อหาแต่ละหน้ามีส่วนหัว YAML ที่ระบุวิธีการแสดงผล แอตทริบิวต์ title ใช้เพื่อสร้าง title HTML และแท็ก OpenGraph แบบไดนามิกสำหรับแต่ละหน้า แอ็ตทริบิวต์ extends จะกำหนดว่าเลย์เอาต์พาเรนต์ของไฟล์เนื้อหานี้จะแสดงผลด้วย (เช่น _layouts.documentation จะแสดงผลด้วย source/_layouts/documentation.blade.php ) และแอตทริบิวต์ section จะกำหนด "ส่วน" ของเบลดที่คาดว่าเนื้อหานี้จะถูกวาง เข้าไปในนั้น 

---
title : Navigation
description : Building a navigation menu for your site
extends : _layouts.documentation
section : content
---

อ่านเพิ่มเติมเกี่ยวกับเค้าโครงจิ๊กซอว์

การเพิ่มสินทรัพย์

คุณสามารถเพิ่มเนื้อหาใดๆ ที่ต้องคอมไพล์ (เช่น ไฟล์ 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
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด