How do I use template inheritance in QUIQQER?

<p dir="auto"><center><br /> <img src="https://images.hive.blog/768x0/https://steemitimages.com/640x0/https://github.com/QUIQQER/QUIQQER/raw/master/bin/images/Readme.png" srcset="https://images.hive.blog/768x0/https://steemitimages.com/640x0/https://github.com/QUIQQER/QUIQQER/raw/master/bin/images/Readme.png 1x, https://images.hive.blog/1536x0/https://steemitimages.com/640x0/https://github.com/QUIQQER/QUIQQER/raw/master/bin/images/Readme.png 2x" /><br /> <p dir="auto">In version 1.3 QUIQQER appears with the possibility of template inheritance. Through template inheritance you are now able to inherit your created template from another template. <p dir="auto">You are now able to overwrite individual parts / blocks of the parent template in your own template package. If the child template does not have certain HTML / CSS files, these are obtained from the parent template. So you don't have to start templates from scratch. <h4>Repository <ul> <li><span><a href="https://github.com/quiqqer" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/quiqqer <h4>What Will I Learn? <p dir="auto">In this tutorial we will show you how to quickly create a template using the new inheritance in QUIQQER 1.3. As described in the <a href="https://steemit.com/utopian-io/@pcsg-dev/quiqqer-template-inheritance" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">last post we have implemented a template inheritance which allows you to specify a kind of parent template for your template. <h4>Requirements <ul> <li>You need a QUIQQER System <li>You need a new QUIQQER Package <li>You need to know from which Template you want to inherit <li>The parent template should include Asset URL's with <code>{$Template->getTemplateUrl('URL')}and should uses <code>{fetch} to include HTML files. <li>You need to know whats a <code>composer.json file is <h4>Difficulty <ul> <li>Intermediate <h4>Tutorial Contents <p dir="auto">I assume that your package is available and that you have created the first files for your package. This means you have a <code>composer.json file and a <code>package.xml. <p dir="auto">If not then please create this, if yes, then we will start now. <p dir="auto"><strong>First of all you have to define your dependency in your <code>composer.json so that the parent template is available in the system. If you want to inherit from <code>quiqqer/template-cologne, you have to add this template to the require part of the package <code>composer.json file. <p dir="auto">In this tutorial I assume that we want <code>quiqqer/template-cologne as a dependency. This is a quite complicated template and shows super that small parts can be overwritten even in complicated templates quickly and easily. <pre><code>"require": { "quiqqer/template-cologne": "1.*|dev-master|dev-dev" } <p dir="auto">A complete <code>composer.json could look something like this:<br /> <center><br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmUu8mkC9qs68VMMEVdr6G83anGPRX5HwLDbqYV8bjK5q6/composer-json.png" alt="composer-json.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmUu8mkC9qs68VMMEVdr6G83anGPRX5HwLDbqYV8bjK5q6/composer-json.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmUu8mkC9qs68VMMEVdr6G83anGPRX5HwLDbqYV8bjK5q6/composer-json.png 2x" /><br /> <p dir="auto">After that you have to tell your template package that it has a parent template. You do this in the <code>package.xml of your package by adding a <code><template_parent> entry. <p dir="auto">A complete <code>package.xml could look something like this:<br /> <center><br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmRnnVponyrLRrWUojrY2wTXKYQX7j6DH9zRxJMTcr1M54/package.png" alt="package.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmRnnVponyrLRrWUojrY2wTXKYQX7j6DH9zRxJMTcr1M54/package.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmRnnVponyrLRrWUojrY2wTXKYQX7j6DH9zRxJMTcr1M54/package.png 2x" /><br /> <p dir="auto">Once these two things are done, you can start overwriting the templates. So that you can overwrite individual files of the parent template, you only have to create the same folder structure as in your source template. <p dir="auto">So that you know which things you can overwrite in the template there are two ways. The developer has documented this or you can see for yourself which areas can be overwritten. <p dir="auto">Most of the time the documentation is a bit incomplete, so you should have a look at the Parent Template.<br /> For example, what you need to pay attention are all {fetch} functions in HTML. The Smarty <code>{fetch} function inserts another HTML template exactly at this point. <p dir="auto">In the Cologne Template, for example, there are the following code lines:<br /> <center><br /> <img src="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmUKgVi2N8B3QGB5vsvJBn7fSBokJ524LCz7tt2JyZ8yHn/footer-html.png" alt="footer-html.png" srcset="https://images.hive.blog/768x0/https://cdn.steemitimages.com/DQmUKgVi2N8B3QGB5vsvJBn7fSBokJ524LCz7tt2JyZ8yHn/footer-html.png 1x, https://images.hive.blog/1536x0/https://cdn.steemitimages.com/DQmUKgVi2N8B3QGB5vsvJBn7fSBokJ524LCz7tt2JyZ8yHn/footer-html.png 2x" /><br /> <p dir="auto">If we now want to customize the template <code>footerCopyright.html for us, we just have to create a template folder and a new HTML file called <code>footerCopyright.html. Now we can write everything we want into it. <p dir="auto"><span>Of course, we prepared the whole thing to show you what it looks like. Examples always clarify the whole thing a lot better. (<a href="https://github.com/QUIQQER/template-inheritance-example/tree/master/template" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/QUIQQER/template-inheritance-example/tree/master/template) <p dir="auto">From now on you can overwrite templates and quickly offer completely new templates. Look forward to more tutorials in the near future. We will explain to you how to build your e-commerce shop or your SaaS quickly and easily. <h4>Curriculum <ul> <li><em>More coming soon ;-) <h4>Proof of Work Done <ul> <li><span><a href="https://github.com/QUIQQER/template-inheritance-example" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/QUIQQER/template-inheritance-example <p dir="auto">We wish you a lot of fun with QUIQQER <p dir="auto">Thanks for reading,<br /> Hen, for PCSG Developers