Universal – DEV Community را اعمال کنید

بیاموزید که چگونه از تم “جهانی” هوگو استفاده کنید.

هدف

در زیر اجزای یک محیط وبلاگ نویسی با صفحات Hugo + GitLab آورده شده است.
هدف در اینجا تغییر بدنه تم در مخزن تم/محتوای GitLab Hugo به یونیورسال، جایگزینی تنظیمات/محتوای تم با نمونه یونیورسال، تغییر تنظیمات CI/CD برای یونیورسال، و ساخت/انتشار سایت نمونه است.

فرض

این توضیح فرض می‌کند که شما «Server with Hugo + GitLab Pages»، «Dev Client with VSCode» را دنبال کرده‌اید و یک محیط سرور ساخته شده با GitLab Pages/Hugo و یک محیط کلاینت توسعه با استفاده از کد ویژوال استودیو آماده کرده‌اید.

روش کاربرد

بدنه تم، تنظیمات/محتوای تم را در کد ویژوال استودیو تغییر دهید

1. تمام دارایی های مخزن Hugo که توسط Visual Studio Code مدیریت می شود به جز برای /.gitlab-ci.yml.

2. یک پیوند نمادین به مخزن جهانی در زیر ایجاد کنید /themes در دارایی های مخزن Hugo که توسط Visual Studio Code مدیریت می شود، با اجرای موارد زیر در ترمینال Visual Studio Code.

   > cd (the root directory of the Git project)
   > mkdir themes
   > git submodule add https://github.com/devcows/hugo-universal-theme.git themes/hugo-universal-theme
   

3. کپی 🀄 /themes/hugo-universal-theme/* در دارایی های مخزن هوگو که توسط کد ویژوال استودیو مدیریت می شود /.

   Hugo repository assets
   ├ content           ← copy from exampleSite
   ├ data              ← copy from exampleSite
   ├ static            ← copy from exampleSite
   ├ themes
   ├ .gitlab-ci.yml
   ├ .gitmodules
   └ config.toml       ← copy from exampleSite
   

4. باز کن /config.toml در ویژوال استودیو کد و تغییر دهید baseurl به ریشه URL سایت نمونه.

احتیاط
: “”خطا: بارگذاری ماژول ها انجام نشد:…” هنگام اعمال تم” ممکن است نیاز به رسیدگی داشته باشد.

تنظیمات CI/CD را در Visual Studio Code تغییر دهید تا با تم مطابقت داشته باشد

1. حذف /.gitlab-ci.yml در دارایی های مخزن Hugo که توسط Visual Studio Code مدیریت می شود.

2. gitlab-ci.yml را برای قالب GitLab Pages/Hugo در مرورگر خود باز کنید، آن را دانلود کنید و در آن کپی کنید. / از دارایی های مخزن Hugo که در کد ویژوال استودیو مدیریت می کنید.

3. باز کن /.gitlab-ci.yml در Visual Studio Code را تغییر دهید image به غیر hugo_extended، نظر دهید hugo mod توضیحات و یک توضیحات زیر ماژول git اضافه کنید.

   ...
   image: registry.gitlab.com/pages/hugo:latest                   ← change
   
   variables:
     HUGO_ENV: production
     #THEME_URL: "github.com/theNewDynamic/gohugo-theme-ananke"   ← comment out
   
   default:
     before_script:
       - apk add --no-cache go curl bash nodejs
       - git submodule update --init --recursive                  ← add
       #- hugo mod get -u $THEME_URL                              ← comment out
       ## Uncomment the following if you use PostCSS...
       #- npm install postcss postcss-cli autoprefixer
   ...
   

تغییرات ایجاد شده در Visual Studio Code را در GitLab آپلود کنید

“آپلود دارایی های مخزن Hugo اصلاح شده در کد ویژوال استودیو را در سرویس گیرنده GitLab – Dev با VSCode” اجرا کنید.

نتایج ساخت/انتشار به صورت خودکار در GitLab را بررسی کنید

“بررسی نتایج ساخت/انتشار خودکار در GitLab – Dev Client با VSCode” را اجرا کنید.

عیب یابی

“خطا: بارگیری ماژول ها انجام نشد:…” هنگام اعمال تم

پدیده

هنگام اعمال یک تم با استفاده از /themes/hugo-universal-theme/exampleSite/config.toml، خطای زیر رخ می دهد.

: Error: failed to load modules: module "universal" not found in "/builds/universal"; either add it as a Hugo Module or store it in "/builds".: module does not exist

علت

خطا در themesDir که در config.toml. مقدار روی تنظیم شده است "../..".

درمان

مقدار را تصحیح کنید themesDir که در config.toml به "themes".

    ...
    themesDir = "themes"
    ...