contentz

เนื้อหา

สร้างเนื้อหารับเว็บไซต์ที่ได้รับการปรับปรุงอย่างสูง

• ใช้ MDX เพื่อเขียนบทความและหน้า
• สนับสนุน การสร้างที่เพิ่มขึ้น
• ออฟไลน์ก่อน
• ใช้ frontmatter เพื่อกำหนดข้อมูลเมตาสำหรับบทความและหน้าของคุณ
• prefetch ทุกลิงค์ภายในที่ใช้ในเนื้อหาของคุณ
• รับหน้าเก็บถาวรพร้อมบทความที่เชื่อมโยงและนำไปใช้ล่วงหน้า
• รับหน้าแรกพร้อมลิงค์ไปยังเครือข่ายสังคมออนไลน์
• การออกแบบที่ตอบสนอง ดี
• โหมดมืด อัตโนมัติ (ใน Safari)
• ใช้ CSS ใน MDX โดยใช้เสา css และแท็กเทมเพลต css
• การทำให้เป็นสากล
• สร้าง ภาพโซเชียล (เปิดกราฟ) ในคำสั่งเดียว
• สร้าง สารบัญ โดยอัตโนมัติ

ติดตั้ง

ติดตั้งโดยใช้ NPM หรือเส้นด้ายด้วยคำสั่งง่ายๆ

yarn add contentz
# npm install contentz 

ใช้มัน

หลังจากที่คุณติดตั้ง ContentZ แล้วคุณสามารถใช้กับคำสั่งง่ายๆ

contentz build

ที่จะอ่านไฟล์ของคุณและสร้างเว็บไซต์ของคุณให้คุณ

สร้างการกำหนดค่า

สร้างไฟล์กำหนดค่าที่เรียกว่า config.yml

---
title : Sergio Xalambrí
description : Senior Software Engineer and Technical Writer
domain : https://sergiodxa.com
language : en
repository : https://github.com/sergiodxa/personal-site/
email : [email protected]
patreon : sergiodxa
analytics : UA-XXXXXXXXX-2
social :
  twitter : sergiodxa
  github : sergiodxa
  npm : sergiodxa
  linkedin : sergiodxa
  dev : sergiodxa
  meetup : 182915204
navigation :
  - name : About
    path : /about
  - name : Services
    path : /services

ตารางตัวเลือก

ตัวเลือก	คำอธิบาย	ที่จำเป็น
ชื่อ	ชื่อของเว็บไซต์ที่ใช้ใน <title> และในหน้าแรก	ไม่ (ค่าเริ่มต้น: Just another Contentz site )
คำอธิบาย	คำอธิบายของเว็บไซต์ที่ใช้ใน <meta> และในหน้าแรก	ไม่ (ค่าเริ่มต้น: คำอธิบายที่ว่างเปล่า)
โดเมน	โดเมนที่คุณจะใช้ในการโฮสต์เว็บไซต์ที่ใช้ในฟีด RSS	ใช่
ภาษา	ภาษาหลักของเว็บไซต์ใช้เป็นทางเลือกสำหรับบทความและหน้าเว็บ	ไม่ (ค่าเริ่มต้น: EN)
ที่เก็บ	ที่เก็บ GitHub โฮสติ้งเว็บไซต์ที่ใช้ในส่วนท้ายของบทความและหน้า	ไม่ (ค่าเริ่มต้น: ซ่อนลิงค์ไปแก้ไข)
อีเมล	ที่อยู่อีเมลของคุณใช้ในไอคอนอีเมลในหน้าแรก	ไม่ (ค่าเริ่มต้น: ซ่อนไอคอน)
Patreon	ชื่อผู้ใช้ Patreon ของคุณใช้ในหน้าแรกและส่วนท้าย	ไม่ (ค่าเริ่มต้น: ข้อความ Hiden Patreon)
การวิเคราะห์	การวิเคราะห์ของคุณ ua	ไม่ (ค่าเริ่มต้น: ซ่อนการวิเคราะห์)
ทางสังคม	รายการเครือข่ายสังคมออนไลน์ของคุณใช้เชื่อมโยงในหน้าแรก	ไม่ (ค่าเริ่มต้น: ซ่อนไอคอนโซเชียล)
การนำทาง	รายการหน้าเว็บที่เชื่อมโยงในส่วนหัว	ไม่ (ค่าเริ่มต้น: อย่าเพิ่มลิงค์พิเศษ)
SW	ตั้งค่าเป็น false หากคุณต้องการปิดการใช้งาน SW	ไม่ (ค่าเริ่มต้น: จริง)
เพิ่มขึ้น	ตั้งค่าเป็น false หากคุณต้องการปิดใช้งานการสร้างที่เพิ่มขึ้น	ไม่ (ค่าเริ่มต้น: จริง)
ไอคอน	ตั้งค่าเส้นทางของ favicon ของเว็บไซต์	ไม่ (ค่าเริ่มต้น: /static/favicon.png )

เครือข่ายสังคมที่เป็นไปได้

• Twitter
• คนอื่น ๆ
• NPM
• LinkedIn
• คนกิน
• การพบปะสังสรรค์

สำหรับเครือข่ายสังคมออนไลน์อื่น ๆ ส่ง PR พร้อมไอคอนใหม่และเพิ่มวิธีการจัดรูปแบบ URL สำหรับไอคอนนั้น

เริ่มเขียน

สร้างโฟลเดอร์ /articles และวางไฟล์ .mdx ของคุณไว้ที่นี่นี่คือโพสต์ตัวอย่าง

 ---
title : My super cool article
description : This is the description of the article
date : 2018-01-01T00:00:00.000Z
published : true
---

This is my content, here I could use markdown or import a component and render it.

ตอนนี้เรียกใช้ contentz และจะสร้าง A /public Directory ด้วยหน้าแรกของคุณหน้าเก็บถาวรและบทความของคุณ คุณสามารถเข้าถึงที่เก็บถาวรของคุณ AT /articles/ และแต่ละบทความเป็น /articles/:article/ ในตัวอย่างที่คุณอาจเห็นได้ที่ /articles/my-super-cool-article

หน้ากำหนดเอง

สำหรับหน้าแบบกำหนดเองสร้างโฟลเดอร์ A /pages และวางไฟล์ .mdx ของคุณไว้ที่นี่นี่คือหน้าตัวอย่าง

 ---
title : About me
---

Hi! I'm an example page.

ตอนนี้เรียกใช้ contentz และจะสร้าง A /public Directory ด้วยหน้าแรกและหน้าเว็บของคุณ แต่ละหน้าจะถูกวางไว้ในระดับพื้นฐานของ public นั่นหมายความว่า /pages/about.mdx ของคุณสามารถเข้าถึงได้เป็น /about/ ในเบราว์เซอร์ของคุณและไม่ใช่ /pages/about

การแชร์ลิงก์

ในกรณีที่คุณต้องการมีหน้าเพื่อแบ่งปันลิงก์ที่น่าสนใจคุณสามารถสร้างไฟล์ link.yml ที่รูทของโครงการของคุณ จากนั้นเรียกใช้ contentz และมันจะสร้าง A /link/ PAGE โดยอัตโนมัติสำหรับคุณด้วยรายการลิงก์ทั้งหมดของคุณ แต่ละลิงก์ควรมี url , title comment และคีย์ date ตัวอย่างไฟล์:

---
- url : https://sergiodxa.com/
  title : Sergio Xalambrí
  comment : The website of the creator of Contentz
  date : 2019-01-28T19:44:10.945Z
- url : https://sergiodxa.dev/
  title : sergiodxa.dev
  comment : The alias of the website of the creator of Contentz
  date : 2019-01-28T19:44:10.945Z 

หน้าข้อผิดพลาด

ContentZ จะสร้างหน้าข้อผิดพลาดโดยอัตโนมัติบน /404.html เมื่อปรับใช้คุณสามารถเปลี่ยนเส้นทางไม่พบหน้าไปยัง /404.html

หากคุณปรับใช้เพื่อ netlify มันจะรับไฟล์นั้นโดยอัตโนมัติ

ผู้ปฏิบัติงานบริการและโหมดออฟไลน์

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

พฤติกรรมนี้สามารถปิดใช้งานการเพิ่ม sw: false ในไฟล์ config.yml ของคุณ การเพิ่มสิ่งนี้จะลบ de sw.js และ load-sw.js เพื่อหลีกเลี่ยงการเข้าถึงแคชและสร้างไฟล์ unload-sw.js

ฟีด RSS

ContentZ จะสร้างฟีดอะตอม RSS ที่ถูกต้องโดยอัตโนมัติด้วยรายการบทความของคุณมันจะถูกวางไว้ใน /atom.xml และแท็ก <meta> จะถูกเพิ่มโดยอัตโนมัติในแต่ละหน้าเพื่อให้สามารถค้นพบได้

ไฟล์คงที่

หากคุณต้องการเชื่อมโยงไปยังไฟล์คงที่เช่นรูปภาพวิดีโอ ฯลฯ สร้างโฟลเดอร์ A /static และวางไฟล์ทั้งหมดของคุณไว้ที่นั่น เมื่อเรียกใช้ content พวกเขาจะถูกคัดลอกไปยัง /public/static โดยอัตโนมัติ

สไตล์ใน mdx

ในกรณีที่คุณต้องการเพิ่มแท็ก HTML ด้วยสไตล์ที่กำหนดเองโดยตรงในเนื้อหา MDX ของคุณคุณสามารถใช้ css Prop และแท็กเทมเพลต css ของอารมณ์

ตัวอย่าง:

 < div css = { { color : "red" } } > This is red </ div >
< div css = { css `color: blue` } > This is blue < / div>

การสร้างที่เพิ่มขึ้น

ContentZ จะตรวจพบไฟล์ที่เปลี่ยนแปลงและอัปเดตไฟล์ที่เกี่ยวข้องเท่านั้น ซึ่งหมายความว่าถ้าคุณเพิ่มลิงค์ใหม่เท่านั้น /link/ จะถูกสร้างใหม่ แต่ถ้าคุณเปลี่ยนบทความหน้าบทความรายการบทความและฟีด RSS จะถูกสร้างใหม่

ในกรณีที่คุณอัปเดตการกำหนดค่าหรือคุณอัปเดตเวอร์ชัน ContentZ หน้าทั้งหมดจะถูกสร้างใหม่

หากคุณต้องการยกเลิกการตั้งค่าคุณสมบัตินี้ incremental: false ใน config.yml ของคุณ สิ่งนี้จะทำให้แคชก่อนหน้านี้เป็นโมฆะโดยอัตโนมัติและมักจะสร้างหน้าทั้งหมด

ภาพสังคม

ContentZ ยังสามารถสร้างภาพโซเชียล (AKA Open กราฟ) โดยอัตโนมัติเพื่อให้คุณใช้ในบทความและหน้าของคุณ เพื่อใช้มันเรียกใช้คำสั่ง:

contentz social [path]

โดยที่ [path] เป็นไฟล์ที่ใช้ในการสร้างภาพสังคม นอกจากนี้ยังอาจเป็นมากกว่าหนึ่งไฟล์ที่เพิ่มช่องว่างระหว่างไฟล์เหล่านั้น

contentz social [path1] [path2]

เส้นทางอาจเป็นเส้นทางสำหรับบทความโพสต์หรือหนึ่งในหน้าสร้างอัตโนมัติ

• บ้าน
• ที่เก็บถาวร/บทความ
• ลิงค์
• ข้อผิดพลาด

หากคุณต้องการสร้างพวกเขาในตอนแรก

contentz social home articles links error

หลังจากสร้างภาพโซเชียลคุณจะเห็นโฟลเดอร์ /static/_social กับรูปภาพของคุณหน้าจะถูกวางไว้ใน /static/_social/pages และบทความใน /static/_social/article หน้าพิเศษจะอยู่ที่รากของ _social

การทำให้เป็นสากล

ContentZ สนับสนุน i18n ออกจากกล่องสำหรับข้อความคงที่ของเว็บไซต์ข้อความเช่น Patreon Support หรือแก้ไขบน GitHub ในการเปลี่ยนภาษาหลักของเว็บไซต์ของคุณตั้งค่า language สำคัญหรือคีย์ lang (ต้องการภาษา) เป็นรหัสภาษา

ภาษาที่รองรับคือ es สำหรับภาษาสเปนและ en สำหรับภาษาอังกฤษ (ค่าเริ่มต้นเป็นภาษาอังกฤษในกรณีที่รหัสภาษาที่ไม่ถูกต้อง)

หากภาษาของคุณไม่รองรับเพิ่ม JSON ด้วยข้อความและโหลดใน I18N LIB จากนั้นส่ง PR เพื่อเพิ่ม