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

ฮิวโก้ ทอยเกียน

ธีม Hugo แบบมินิมอลพร้อม Tailwind CSS


Toigian - Tối giản (เวียดนาม): เรียบง่าย (อังกฤษ)

ข้อจำกัดความรับผิดชอบ : ฉันไม่ใช่นักพัฒนาส่วนหน้า เพียงเป็นคนที่ชอบปรับแต่งสิ่งต่าง ๆ ดังนั้นโค้ดของฉันอาจไม่สวย/สะอาด ฉันพยายามเรียนรู้ Tailwind CSS และผลลัพธ์ก็คือ Hugo-toigian

  • 0. ตู้โชว์
  • 1. คุณสมบัติ
  • 2. ข้อกำหนดเบื้องต้น
  • 3. การติดตั้ง
  • 3. การกำหนดค่า
    • 3.1. การกำหนดค่าไซต์
    • 3.2. การกำหนดค่าหน้า
  • 4. รหัสย่อ
  • 5. การปรับแต่ง
  • 6. การบริจาค
  • 7. เครดิต

0. ตู้โชว์

ภาพหน้าจอเหล่านี้อาจล้าสมัย ดูที่ไซต์สาธิตสำหรับสิ่งใหม่ล่าสุด

มืด แสงสว่าง

1. คุณสมบัติ

  • การออกแบบที่เรียบง่าย ( tối giản ) ได้รับแรงบันดาลใจอย่างมากจาก mellow.dev
  • ใช้พาเลทสี Rosé Pine สไตล์มินิมอลลิสต์ที่มีระดับ
  • ปรับแต่งได้
  • รองรับโหมดแสง / มืด
  • เคาน์เตอร์ซ้อนกันสำหรับมุ่งหน้าไป
  • สารบัญลอยด้านข้าง
  • รหัสย่อที่มีประโยชน์
  • การสนับสนุนความคิดเห็น
  • การเน้นไวยากรณ์: ใช้โซลูชันฝั่งเซิร์ฟเวอร์ (Chroma, Hugo ในตัว) ฉันได้เพิ่มสไตล์ Rosé Pine ให้กับ Chroma ดังนั้นทุกอย่างจึงมีความรู้สึกเหมือนกัน

2. ข้อกำหนดเบื้องต้น

  • git ติดตั้ง npm แล้ว
  • เวอร์ชัน Hugo "ขยาย" ขั้นต่ำคือ v0.93.0 ขึ้นไป 
snap install hugo --channel=extended
  • PostCSS ของ Hugo Pipe กำหนดให้ติดตั้งแพ็คเกจ postcss-cli JavaScript ในสภาพแวดล้อม ( npm install -g postcss postcss-cli ) พร้อมกับปลั๊กอิน PostCSS ใดๆ ที่ใช้ (เช่น npm install -g autoprefixer ) หากคุณใช้แพ็คเกจ Hugo Snap จะต้องติดตั้ง PostCSS และปลั๊กอินภายในไดเร็กทอรีไซต์ Hugo ของคุณ เช่น npm install postcss-cli โดยไม่มีแฟล็ก -g

3. การติดตั้ง

  • ไปที่ไดเรกทอรีรากของเว็บไซต์ Hugo ของคุณ หรือสร้างเว็บไซต์ใหม่ด้วย: 
hugo new site hugo-example-site
cd hugo-example-site
git init
  • เพิ่มธีม 
git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian
  • ติดตั้งโมดูล Nodejs 
 cd themes/hugo-toigian
npm install
  • สุดท้าย อัปเดตธีมในไฟล์ config.toml การกำหนดค่าของคุณในไดเร็กทอรีรากของเว็บไซต์ Hugo ของคุณ 
 theme = " hugo-toigian "
  • เรียกใช้เซิร์ฟเวอร์เพื่อดูตัวอย่างสด 
hugo server -DF --disableFastRender
  • สร้างเพจแบบคงที่ 
hugo --environment production --minify

3. การกำหนดค่า

3.1. การกำหนดค่าไซต์

มีตัวเลือกการกำหนดค่าบางอย่างที่คุณสามารถเพิ่มลงในไฟล์ config.toml ได้ 

 baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"

[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true

[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "

[ markup ]
  defaultMarkdownHandler = " goldmark "
  # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
  # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
  [ markup . goldmark ]
    [ markup . goldmark . renderer ]
      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
  [ markup . highlight ]
    codeFences = true
    guessSyntax = true
    lineNos = false
    noClasses = false
    tabWidth = 4
  [ markup . tableOfContents ]
    startLevel = 2
    endLevel = 4
    ordered = true

# The left side navbar at the top
[ menu ]
  [[ menu . nav ]]
  name = " About "
  url = " /about "
  weight = 2

  [[ menu . nav ]]
  name = " Posts "
  url = " /posts "
  weight = 3

3.2. การกำหนดค่าหน้า

คุณสามารถระบุพารามิเตอร์เพิ่มเติมในส่วนด้านหน้าของแต่ละหน้าได้ 

 # Your posts tags

tags = [ ]

# If you have enabled comments for the site, you can disable it for specific pages

comment = true

4. รหัสย่อ

ตรวจสอบรหัสย่อ

5. การปรับแต่ง

  • บางส่วน: มีเค้าโครงบางส่วนเพื่อให้คุณแทนที่ส่วนประกอบของธีมใน layouts/partials/ ได้อย่างง่ายดาย
ว่างบางส่วน ตำแหน่ง การใช้งาน
layouts/partials/custom/head.html ก่อนปิดแท็ก <head> เพิ่ม CSS/js ที่กำหนดเอง
layouts/partials/custom/content-before.html ก่อนเนื้อหาหน้า
layouts/partials/custom/content-after.html หลังจากเนื้อหาหน้า
layouts/partials/font.html นำเข้าแบบอักษรที่กำหนดเอง
  • การปรับแต่งเพิ่มเติม:
ไฟล์ คำอธิบาย
assets/css/custom.css ปรับแต่งหรือแทนที่สไตล์ CSS

  • ตัวอย่างเช่น คุณไม่ชอบแบบอักษรที่เลือก (Inconsolata) และต้องการใช้ตัวเลือกของคุณเอง ให้ทำตามขั้นตอนเหล่านี้:

    • สร้าง layouts/partials/font.html เพื่อนำเข้าแบบอักษรของคุณ: 
     <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
  rel =" stylesheet "
/>
    • สร้าง assets/css/custom.css : 
     // change the default mono font to Overpass
:root {
  --font-mono : " Overpass " ;
  --font-serif : " Inter " ;
}

6. การบริจาค

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

เป้าหมายหลักคือ:

  • ทำให้มันง่าย
  • หลีกเลี่ยงการใช้ JS หาก CSS สามารถแก้ไขได้

อย่าลังเลที่จะเปิดปัญหาหากคุณพบว่าตัวเลือกการกำหนดค่าหรือการปรับแต่งหายไป

7. เครดิต

  • ฮิวโก้-บุ๊ค
  • dirkolbrich/hugo-tailwindcss-starter-theme
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด