تغییر منو از وبلاگ ROQ خود

ROQ ، مانند بسیاری از ژنراتورهای سایت استاتیک دیگر ، از یک موتور الگوی برای تولید HTML نهایی استفاده می کند. موتور الگوی مورد استفاده ROQ QUTE است. این یک موتور قدرتمند است که – در ادامه چیزهای دیگر – الگوی ارث را از آن استفاده می کند.

یک مقدمه کوچک در مورد IAMROC وجود دارد.

من آن را خواندم ، دوباره آن را خواندم ، فکر کردم فهمیدم. من درک نکرده بودم بنابراین شما مثل من هستید و دوست دارید بفهمید که اوضاع چگونه ساخته می شود ، مرا دنبال کنید.

اگر فقط می خواهید طرح منو را تغییر دهید ، می توانید دو فصل اول را پرش کنید

فرضیه

من فرضیات زیر را خواهم ساخت:

• شما یک وبلاگ ROQ دارید. این واضح به نظر می رسد ، اما حداقل ، اکنون می دانیم.
• وبلاگ تور از موضوع پیش فرض استفاده می کند: یک موضوع ROQ-Default

زیرا به طور پیش فرض هر پست وبلاگ بخشی از posts مجموعه ، تنظیم آن برای استفاده از :theme/post الگوی

آنچه می خواهیم به آن برسیم

ما می خواهیم در این پست وبلاگ انجام دهیم این است که منو را از سمت چپ صفحه به بالای صفحه منتقل کنیم.
به شرح زیر:
از این

به این

ارث

یک الگوی می تواند والدین داشته باشد اما همچنین می تواند فرزندان متعددی داشته باشد که ممکن است جزئی/قطعه باشند.

برای اینکه بتوانیم تعیین کنیم چه چیزی HTML پیش بینی می شود برای یک صفحه معین تولید شود ، موتور QUTE درخت میراث چیدمان خود را جستجو می کند ، آن را با محتوای صفحه ترکیب می کند و HTML نهایی را تولید می کند.

طرح درختی پیش فرض وراثت برای صفحات پست وبلاگ شما به شرح زیر است:

به طوری که خودتان این کار را انجام ندهید ، من جستجو کردم که در واقع ساختار اصلی صفحه در واقع کمک می کند. این در theme-layouts/roq-default/main.html پرونده

---
layout: roq-default/default
---

{@io.quarkiverse.roq.frontmatter.runtime.model.Site site}

 
 class="content-box clearfix">
  {#insert /} ③

1. {#insert syntax اجازه می دهد تا یک بخش جدید نامگذاری شده را تعریف کنید. در menu بخش ، در مورد ما
2. در این حالت ، الگوهای همچنین مقدار پیش فرض برای این بخش را ارائه می دهند ، که ما مجبور به غلبه بر آن خواهیم بود.
3. از syntax {#insert /} استفاده می شود تا محتوای صفحه فعلی را به ارث ببرد.

چه می شود اگر من می توانم غلبه کنم menu بخش؟

بله ، البته این امکان پذیر است و حتی راه درستی برای پیشبرد.

اگر پروژه ما فراخوانده شود ، می توانیم یک الگوی ایجاد کنیم Main.html و آن را در templates/layouts/rod-default پوشه این الگوی از theme-layouts/roq-default/main.html الگوی ، و غلبه بر menu بخش

---
layout: theme-layouts/roq-default/main
---

{#menu} {/} ①

{#include partials/roq-default/sidebar-menu menu=cdi:menu.items /} ②

{#insert /} ③

1. مجدداً menu بخش (برای حذف آن از نوار جانبی)
2. استفاده مجدد از همان قسمت ها اما تزریق در جای دیگر.
3. محتوای صفحه فعلی را که به ارث می برید وارد کنید.

درخت وابستگی مانند یک تزریق کوچک:

و تنها چیزی که اکنون به آن احتیاج دارم کمی از CSS است (در شما src\main\resources\web.app پوشه) ، و ما برای یک شروع خوب کار می کنیم:

.menu {
  border-radius: 10px;
  width: 100%;
  padding-top: 2rem;

  a {
    text-decoration: none;
  }

  ul {
    list-style-type: none;
    display: grid;
    grid-auto-rows: min-content;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    grid-auto-flow: column;
  }
}

پایان

درک وراثت کار سختی نیست ، اما باید کد تم خود را باز کنید تا مطمئن شوید که در کجا می توانید قلاب کنید و چگونه.

اگر می خواهید مستندات عمیق بیشتری داشته باشید ، می توانید مستندات 👉 qute را بررسی کنید.

من مطمئن هستم که شما ایده های زیادی دارید ، و من خوشحال می شوم که سایت ROQ شما را ببینم ، بنابراین دریغ نکنید که در نظرات به اشتراک بگذارید.