hugo theme charlolamode

charlola.mode

ธีมเว็บไซต์นี้ขึ้นอยู่กับกรอบ Hugo นี่คือการปรับเปลี่ยนของแม่แบบ papermod และ hugo-paper ใช้งานง่ายและใช้งานง่ายกับการออกแบบขั้นต่ำและฟังก์ชั่นพื้นฐานที่สุด

ตรวจสอบเว็บไซต์ของฉันเพื่อดูตัวอย่างที่คล้ายกัน: www.cmart1n.com

ลิงก์ไปยังธีม Hugo: https://themes.gohugo.io/themes/hugo-theme-charlolamode/

คุณสมบัติ

1. ปรับแต่งโฮมเพจของคุณด้วย ...

   • ชื่อเรื่องของหน้า
   • ชื่อของคุณ
   • คำอธิบาย
   • ไอคอนสังคม
   • ปุ่ม

2. เปลี่ยนสีขององค์ประกอบทั้งหมดเช่นพื้นหลังข้อความไอคอน ...

3. หากคุณคลิกที่แท็บคุณจะเห็นรายการโพสต์

   • โพสต์สามารถมองเห็นได้ด้วยรูปภาพ
   • โพสต์สามารถนำไปสู่ลิงค์ภายนอก

เริ่มต้นอย่างรวดเร็ว

1. ติดตั้ง Hugo
2. ติดตั้ง Git

เปิดเทอร์มินัลหรือบรรทัดคำสั่งของคุณ

1. สร้างโฟลเดอร์ใหม่ 'Quickstart'

 hugo new site quickstart

2. เข้าไปในโฟลเดอร์นี้

 cd quickstart

3. เริ่มต้นที่เก็บ Git ที่ว่างเปล่าในไดเรกทอรีปัจจุบัน

 git init

4. โคลนที่เก็บนี้ลงในโฟลเดอร์ของคุณ

 git submodule add https://github.com/charlola/hugo-theme-charlolamode.git themes/charlolamode

5. ลบ config.toml

 rm config.toml

6. เพิ่มธีมในไฟล์ config.yml ใหม่

 echo "theme: charlolamode" >> config.yml

7. เริ่มเซิร์ฟเวอร์การพัฒนาของ Hugo เพื่อดูเว็บไซต์ในเครื่อง

 hugo server

เมื่อเซิร์ฟเวอร์ท้องถิ่นเริ่มต้นคุณสามารถดูไซต์ของคุณได้ หาก WebBrowser ของคุณไม่ปรากฏขึ้นโดยอัตโนมัติให้เปิดเบราว์เซอร์ของคุณและป้อน http: // localhost: 1313 ตอนนี้คุณสามารถเริ่มแก้ไขหน้านี้ในไดเรกทอรี หากคุณบันทึกการเปลี่ยนแปลงใหม่ไซต์นี้จะรีเฟรชและทำการแก้ไขโดยอัตโนมัติ

เปิดรหัส Visual Studio เพื่อแก้ไขบล็อกของคุณ

3. เปิดตัวแก้ไขที่คุณชื่นชอบเช่น Visual Studio Code

การกำหนดค่าพื้นฐาน

config.yml เป็นเพื่อนที่ดีที่สุดของคุณ คุณสามารถแก้ไขและเพิ่มข้อมูลเช่น ...

• ชื่อเรื่องของหน้า
• ชื่อของคุณ
• คำอธิบาย
• ไอคอนสังคม
• ปุ่ม

ดูที่ charlolamode/config.yml สำหรับการอ้างอิง มีตัวอย่างที่แสดงความคิดเห็นซึ่งแสดงวิธีเพิ่มแท็บและไอคอนโซเชียลได้อย่างง่ายดายเช่น LinkedIn, Twitter, YouTube, Instagram คัดลอกเนื้อหาใน config.yml ของคุณซึ่งจะเขียนทับ config.yml ของธีม

เปลี่ยนรูปภาพโปรไฟล์

หากต้องการเพิ่มรูปโปรไฟล์ของคุณให้แทนที่ profile.png ในโฟลเดอร์ คงที่/รูปภาพ ตรวจสอบให้แน่ใจว่าคุณถ่ายภาพด้วยใบหน้าที่มีความสุข :)

เพิ่มแท็บ

ใน config.yml คุณสามารถเพิ่มแท็บใหม่ถัดจาก 'บทความ' และ 'ติดต่อ' ไม่เกี่ยวกับ 'หมวดหมู่' เพื่อตรวจสอบ

หมายเหตุ หากคุณเพิ่มแท็บใหม่ใน config.yml คุณต้องทำสิ่งต่อไปนี้:

1. เพิ่มโฟลเดอร์ใหม่ใน 'เนื้อหา' ไดเรกทอรีด้วย ชื่อเดียว กับแท็บใหม่
2. คัดลอก _index.md จากบทความไปยังโฟลเดอร์ใหม่

เพิ่มเนื้อหาใหม่

หากคุณต้องการผลักดันเนื้อหาใหม่ให้สร้างไฟล์ Markdown ใหม่ในโฟลเดอร์ใหม่ ค้นหาตัวอย่างใน เนื้อหา/บทความ/บทความ

เปลี่ยนสี

ดูที่สินทรัพย์/CSS/core/theme-vars.css เพื่อเล่นกับสี

ปิดใช้งาน 'โหมดโปรไฟล์'

ในการแสดงเนื้อหาบทความในโฮมเพจแทนที่จะตั้งค่าโปรไฟล์ให้ตั้งค่าต่อไปนี้ภายใต้ params: ใน config.yml

 profileMode: 
    enabled: false

ด้วยเนื้อหาบทความย้ายไปที่หน้าแรกการลบรายการเมนูหลักสำหรับ บทความ อาจเป็นที่ต้องการ:

 menu:
    main:
        - name: Contact
          url: contact/
          weight: 30
        # - name: Articles
        #   url: articles/
        #   weight: 20
        - name: Projects
          url: projects
          weight: 15

ขอบคุณ!

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

ฉันชอบที่จะได้รับคำติชมส่งข้อความผ่าน LinkedIn!

เว็บไซต์ออนไลน์

หากต้องการผลักดันเว็บไซต์ของคุณทางออนไลน์ให้ใช้ Azure Static Web หรือ Netflify ฉันใช้ Azure Static Web