ดาวน์โหลด astro paper - ดาวน์โหลด astro paper ซอร์สโค้ด

astro paper

หมวดหมู่อื่นๆ

v4.7.0

ดาวน์โหลด

แอสโตรเปเปอร์ ?

โครงสร้างโครงการ

ภายใน AstroPaper คุณจะเห็นโฟลเดอร์และไฟล์ต่างๆ ดังต่อไปนี้:

/
├── public/
│   ├── assets/
│   │   └── logo.svg
│   │   └── logo.png
│   └── favicon.svg
│   └── astropaper-og.jpg
│   └── robots.txt
│   └── toggle-theme.js
├── src/
│   ├── assets/
│   │   └── socialIcons.ts
│   ├── components/
│   ├── content/
│   │   |  blog/
│   │   |    └── some-blog-posts.md
│   │   └── config.ts
│   ├── layouts/
│   └── pages/
│   └── styles/
│   └── utils/
│   └── config.ts
│   └── types.ts
└── package.json

Astro ค้นหาไฟล์ .astro หรือ .md ในไดเร็กทอรี src/pages/ แต่ละหน้าจะแสดงเป็นเส้นทางตามชื่อไฟล์

เนื้อหาคงที่ใดๆ เช่น รูปภาพ สามารถวางไว้ในไดเร็กทอรี public/ ได้

โพสต์ในบล็อกทั้งหมดจะถูกจัดเก็บไว้ในไดเร็กทอรี src/content/blog

เอกสารประกอบ

เอกสารสามารถอ่านได้สองรูปแบบ คือ markdown และ โพสต์ในบล็อก

การกำหนดค่า - มาร์กดาวน์ | โพสต์ในบล็อก
เพิ่มโพสต์ - markdown | โพสต์ในบล็อก
ปรับแต่งโทนสี - markdown | โพสต์ในบล็อก
โครงร่างสีที่กำหนดไว้ล่วงหน้า - markdown | โพสต์ในบล็อก

สำหรับ AstroPaper v1 โปรดดูสาขานี้และ URL ที่เผยแพร่อยู่นี้

เทคสแต็ค

กรอบการทำงานหลัก - Astro
การตรวจสอบประเภท - TypeScript
กรอบงานส่วนประกอบ - ReactJS
จัดแต่งทรงผม - TailwindCSS
UI/UX - ไฟล์ออกแบบ Figma
ค้นหาคลุมเครือ - FuseJS
ไอคอน - Boxicons | โต๊ะ
การจัดรูปแบบโค้ด - สวยกว่า
การปรับใช้ - หน้า Cloudflare
ภาพประกอบในหน้าเกี่ยวกับ - https://freesvg illustration.com
Linting - ESLint

??‍ ทำงานในพื้นที่

คุณสามารถเริ่มใช้โปรเจ็กต์นี้ภายในเครื่องได้โดยการรันคำสั่งต่อไปนี้ในไดเร็กทอรีที่คุณต้องการ:

 # npm 6.x
npm create astro@latest --template satnaing/astro-paper

# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper

# yarn
yarn create astro --template satnaing/astro-paper

# pnpm
pnpm dlx create-astro --template satnaing/astro-paper

คำเตือน! หากคุณใช้ yarn 1 คุณอาจต้องติดตั้ง sharp เป็นการพึ่งพา

จากนั้นเริ่มโครงการโดยรันคำสั่งต่อไปนี้:

 # install dependencies
npm run install

# start running the project
npm run dev

อีกวิธีหนึ่ง หากคุณติดตั้ง Docker คุณสามารถใช้ Docker เพื่อรันโปรเจ็กต์นี้ในเครื่องได้ มีวิธีดังนี้:

 # Build the Docker image
docker build -t astropaper .

# Run the Docker container
docker run -p 4321:80 astropaper

การยืนยันเว็บไซต์ของ Google (ไม่บังคับ)

คุณสามารถเพิ่มแท็ก HTML การยืนยันเว็บไซต์ของ Google ใน AstroPaper ได้อย่างง่ายดายโดยใช้ตัวแปรสภาพแวดล้อม ขั้นตอนนี้เป็นทางเลือก หากคุณไม่เพิ่มตัวแปรสภาพแวดล้อมต่อไปนี้ แท็ก google-site-verification จะไม่ปรากฏในส่วน HTML <head>

 # in your environment variable file (.env)
PUBLIC_GOOGLE_SITE_VERIFICATION=your-google-site-verification-value

ดูการสนทนานี้เพื่อเพิ่ม AstroPaper ลงใน Google Search Console

- คำสั่ง

คำสั่งทั้งหมดถูกรันจากรูทของโปรเจ็กต์ จากเทอร์มินัล:

บันทึก! สำหรับคำสั่ง Docker เราจะต้องติดตั้งไว้ในเครื่องของคุณ

สั่งการ	การกระทำ
`npm install`	ติดตั้งการพึ่งพา
`npm run dev`	เริ่มเซิร์ฟเวอร์ dev ในเครื่องที่ `localhost:4321`
`npm run build`	สร้างไซต์การผลิตของคุณเป็น `./dist/`
`npm run preview`	ดูตัวอย่างงานสร้างของคุณภายในเครื่องก่อนที่จะปรับใช้
`npm run format:check`	ตรวจสอบรูปแบบโค้ดด้วย Prettier
`npm run format`	จัดรูปแบบโค้ดด้วย Prettier
`npm run sync`	สร้างประเภท TypeScript สำหรับโมดูล Astro ทั้งหมด เรียนรู้เพิ่มเติม
`npm run lint`	ผ้าสำลีกับ ESLint
`docker compose up -d`	เรียกใช้ AstroPaper บน docker คุณสามารถเข้าถึงได้ด้วยชื่อโฮสต์และพอร์ตเดียวกันที่ได้รับแจ้งในคำสั่ง `dev`
`docker compose run app npm install`	คุณสามารถเรียกใช้คำสั่งใดๆ ข้างต้นลงในคอนเทนเนอร์นักเทียบท่าได้
`docker build -t astropaper .`	สร้างอิมเมจ Docker สำหรับ AstroPaper
`docker run -p 4321:80 astropaper`	เรียกใช้ AstroPaper บน Docker สามารถเข้าใช้งานเว็บไซต์ได้ที่ `http://localhost:4321`

คำเตือน! ผู้ใช้ Windows PowerShell อาจต้องติดตั้งแพ็คเกจพร้อมกันหากต้องการเรียกใช้การวินิจฉัยระหว่างการพัฒนา ( astro check --watch & astro dev ) สำหรับข้อมูลเพิ่มเติม โปรดดูปัญหานี้