Skip to content

Martini Defining Resources for Webpage Templates

In Martini, Web Page templates can be significantly enhanced by incorporating various resources such as CSS, JavaScript files, and images. These resources play a crucial role in defining the functionality and visual appeal of your web pages.

Storing Resources

Resources in Martini can be stored either externally (e.g., on a CDN) or internally within a Martini package's web directory.

  • External Storage: Ideal for resources that are widely used across various projects or for larger files. Utilizing a CDN can also lead to improved loading times.
  • Internal Storage: Best suited for project-specific resources. This approach offers advantages like better version control and straightforward access within the Martini environment.

Creating and Importing Resources

To create a new resource file within the web directory:

  1. Right-click the web directory within your Martini package.
  2. From the context menu, select New > File.
  3. Enter the name of your resource file (for instance, style.css or script.js).
  4. Click Finish.

Importing via Drag and Drop

Resources can be easily imported by dragging and dropping files into the package's web directory. This convenient method facilitates quick and effortless importation of resources.

Linking Resources to Web Page Templates

To link resources to your Web Page template, use the appropriate HTML tags. The format for referencing a resource in Martini is /<package-name>/<resource-path>.

Example Structure

Consider a package named todo-app with this structure:

1
2
3
4
5
6
todo-app
├── code
│   └── Index.gtpl
└── web
    ├── script.js
    └── style.css

To incorporate script.js and style.css in Index.gtpl, include the following tags in your HTML:

1
2
<link rel="stylesheet" type="text/css" href="/todo-app/web/style.css">
<script type="text/javascript" src="/todo-app/web/script.js"></script>

Best Practices and Tips

  • Resource Organization: Adopt clear naming conventions and organize files in subdirectories for better management.
  • Resource Optimization: Minify CSS and JS files for enhanced web performance.
  • Version Control: Maintain a record of changes to your resources, especially in collaborative environments.

Troubleshooting Common Issues

If you encounter issues like broken links or missing resources, check the following:

  • Confirm that the file path in your HTML tag correctly matches the resource's location in the web directory.
  • Make sure that the resource files have been properly uploaded or created within Martini.

Note

For more comprehensive information on HTML, CSS, and JavaScript best practices, you may refer to resources like MDN Web Docs.