Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Using composer for a new page


Hi there,
I just followed all the instructions to use Metronic Composer and everything went well. I copied metronic-tailwind into the composer directory and when I start it with ./run.sh --debug everything goes well and I am able to see the demos pages at https://localhost:8001. Ok, great.
How do I start to build my own page using the composer? I read is like a CMS to create new pages reusing components, but I don't know how and where to start.
I read the documentation, and everything is well with the demos and the installation is working perfectly, but I don't know how to move forward to reuse the components in a new page.
cheers


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi, have you checked out revbit yet? I've been using it for a few weeks now and it has seriously changed my trading experience. Whether I'm exchanging Tether for USDC or changing Bitcoin, it's been fast, secure and easy to track my transactions. There commission is very favorable. The user-friendly interface makes it easy to get started and the variety of cryptocurrency pairs is impressive. If you are looking for a reliable exchange, give this platform a try.



Hi Julio,

Thanks for reaching out! To generate the dist html files for your custom theme, mytheme, you'll need to make a small update in the following file:

/libs/generators/generate_html.py

Update the relevant section to:


config["theme"] = "mytheme"
config["demo"] = ""



if __name__ == "__main__":
config = load_config()

asset_build = AssetBuild(config)
asset_build.init()

config["theme"] = "mytheme"
config["demo"] = ""

link_extractor = LinkExtractor(config)
link_extractor.init()
links = link_extractor.get_links()

html_generator = HtmlGenerator(config)
html_generator.append_links(links)
html_generator.init()


Then run command ./generate.sh.

Apologies for the inconvenience. We're planning to improve this feature in the future to make it more dev-friendly. eg. by configuration, etc.



Hi Julio,

It's great to hear that your installation of the Metronic Composer is working! Now, to start building your page using Composer, here's how you can proceed:

The Metronic Composer runs on Flask (Python framework), using Jinja for templating. Here's a quick guide on how to create new pages and reuse components:

Two Ways to Use Metronic Composer:

1. With Your Web Framework (e.g., Angular, React, Vue, Laravel, etc.):
- If you're building your project using a web framework, you can refer to how the layout and partial files (like header, footer, side menu, topbar, content area) are structured in the views/layout and views/pages directories.
- Use these as templates for how to integrate the Metronic components into your framework.

2. Directly on Metronic Composer:
- You can add new pages by creating your page inside the /themes/metronic-tailwind-html/views/pages directory. For example, create a file named my-page.html.
- The new page will be accessible at the URL: http://127.0.0.1:8001/metronic-tailwind-html/my-page.html.
- The routing is handled using Flask, specifically in the libs/page_loader.py file. For more details on Flask routing, check out the Flask routing documentation (https://flask.palletsprojects.com/en/3.0.x/quickstart/#routing).

This should help you start creating custom pages using the Metronic Composer. Let me know if you have more questions or need help with anything else!

Cheers!



Hi there,
Thanks for your quick reply. I have it working now with my own created page. Thanks for that. I understood when you describe Composer as a mini CMS, I'll be able to drag and drop elements, no problem. My fault.
Another question is, I have my new customer theme called 'mytheme' under the /themes directory. I'm trying to build the dist files with the command generate.sh, but it only creates the files for the metronic-tailwind-html and not for my mytheme directory. I took a look at the generate.sh. My question is how I generate the dist files for my theme. 'mytheme' ?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(