الصفحة الرئيسية>كود مصدر 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 "الموسع" للإصدار 0.93.0 وما فوق. 
snap install hugo --channel=extended
  • يتطلب PostCSS الخاص بـ Hugo Pipe تثبيت حزمة JavaScript postcss-cli في البيئة ( 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
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل