Can you clarify the purpose and importance of utilizing tags {{ , }} in HTML?

I am looking to implement a Jekyll theme on Github. I decided to clone this repository, but encountered an issue where the CSS files were not included.

Some of the code snippets from the repository appear as follows:

<link href="{{ "/assets/css/style.css" | prepend: site.baseurl }}" rel="stylesheet">

I'm confused about the use of {{ and }}. What do they signify?

When I attempted to include these in my editor, it resulted in an error message stating 'Tag start is not closed'.

Although I have tried the following as well:

   <link href="assets/css/style.css" rel="stylesheet">

I am seeking clarification on why I need to format the code in this particular manner.

Answer №1

Within this HTML code, the symbols {{ and }} represent liquid syntax, a language used in Jekyll for dynamic content creation. Liquid can be thought of as an alternative to PHP.

In this case, the code snippet

{{ "/assets/css/style.css" | prepend: site.baseurl }}
instructs to insert the string "/assets/css/style.css" with the value of site.baseurl prepended to it (this variable should be defined in your _config.yml).

To avoid conflicts between quotation marks in the expression and the HTML code, consider using:

<link href="{{ '/assets/css/style.css' | prepend: site.baseurl }}" rel="stylesheet">

Once interpreted by Jekyll, this could generate the following HTML code:

<link href="http:/www.baseurl.of.mysite.com/assets/css/style.css" rel="stylesheet">

For more on liquid, check out this introduction.

To see a preview, run the Jekyll engine on your cloned repository using the appropriate command:

jekyll build

This will create the HTML pages in ./_site. Alternatively, you can use:

jekyll serve

This command launches a test server with auto regeneration of HTML pages for preview at http://localhost:4000/.

Find more jekyll commands here.

Assuming you've installed Jekyll following the documentation, when satisfied with the preview, push your repository to your GitHub account. GitHub will then run the Jekyll engine to generate HTML pages on its server.

If your username is "popcorn" on GitHub, you can push your Jekyll files to either:

  • a repository named "popcorn.github.io": your user site accessible at https://popcorn.github.io/.
  • in an existing project "foo", push to a branch named "gh-pages" (default for GitHub Pages) for your project site available at https://popcorn.github.io/foo/.

Refer to the GitHub tutorial for more details.

Answer №2

Jekyll utilizes expansion points to inject essential values during the build process, akin to C/C++ Preprocessor Macros. The errors you're encountering are a result of this:

<link href="{{ '/assets/css/style.css' | prepend: site.baseurl }}"
      rel="stylesheet"> <!-- Remember to use single quotes within double quotes -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to find information in a multi-page table?

I've implemented a table with pagination and search functionality to look up data within the table. However, currently the search only works within the current page of the table rather than searching the entire dataset. Is there a way to modify the se ...

Managing the load more feature with a Selenium script using Python

As a newcomer to Python, I am experimenting with automating clicks on the "load more" button found in the comment section of Instagram using Selenium and Python. Despite being able to click once successfully, the button disappears after the first click. ...

When floating divs with varying heights are wrapped, they may become stuck in place

Hey there! Let's tackle a challenge: I've got a few divs, each with varying heights. These divs contain portlets that can expand in height. Here's a basic example: .clz { float: left; } <div class="container"> <div class="cl ...

What is the best way to include a new css class in the surrounding tag when using Sitecore's MVC HtmlHelper for fields?

My goal is to display the content of @Html.Sitecore().Field(TPage.Headline) within an <h1 class="page-heading"> tag only if it contains a value. I do not want to render the surrounding <h1 class="page-heading"> tag when the field is empty. Alt ...

Is it possible for CSS in React to cause the vanishing of all buttons

I'm encountering an issue where the CSS styling applied to every button in my NavBar is causing a specific button labeled 'Search' to disappear when it shouldn't. The problem stems from NavBar.css, which contains a media query that unin ...

Struggling to retrieve dynamic information from innerHTML in Angular

I am extracting live data from my view or HTML and displaying it on my page to visualize the output of that information. I need to follow this approach because I am designing a custom print page with this real-time data. The technique I am currently using ...

GWT integration for TinyMCE

I've been attempting to incorporate TinyMCE with GWT's RichTextBox, but so far I haven't had any luck. The issue seems to be that GWT turns the Rich text area into a #document, rather than a standard textarea in HTML. Does anyone know how to ...

transmit static information using a form

I'm currently working on sending data from one page of my website to another. It seems like using an HTML form with the action attribute set to the destination would be the way to go. <form method="POST" action="/destination"> <input ty ...

Why is the updated index.html not loading with the root request?

I'm currently working on an Angular app and facing an issue with the index.html file not being updated when changes are made. I have noticed that even after modifying the index.html file, requests to localhost:8000 do not reflect the updates. This pro ...

Bootstrap is causing issues with unidentified div elements

I recently embarked on creating a slideshow using HTML, CSS, and jQuery. After completing the slideshow, I decided to add an interactive page beneath it. To streamline the layout process, I opted to utilize Bootstrap. However, upon loading Bootstrap, I en ...

Tips for Optimizing Navigation with Jquery Integration

I have implemented a dynamic navigation system using jQuery, where I load the navigation from a separate nav.html file to avoid updating it on every page manually. However, I am facing an issue with targeting elements in the loaded navigation to make them ...

Struggling with pagination problems in Bootstrap 4 and looking to integrate QR code functionality into your blade template?

I am currently facing an issue with generating a batch of QR codes using the SimpleQR code generator in Laravel blade template on the fly for printing. The problem arises when a page break occurs, as it breaks the QR code. I attempted to use the break-insi ...

Is there a way to send a Python list to Django?

I'm in the process of setting up a website where I can retrieve a JSON list from my PRTG. Currently, I have successfully implemented code in the console that filters out sensors with a status of DOWN. However, I am facing difficulties in posting this ...

Is there a way to verify the presence of a meta description in Selenium IDE?

Currently, I am utilizing the Command & Target provided by Selenium IDE to validate the precise text of a meta description verifyelementpresent : //meta[@name='description' and @content='description here'] I want to ensure tha ...

Creating variables in JavaScript for background positions can be done by utilizing the backgroundPosition property

I'm a beginner in programming and I'm currently working on creating a variable for my background-position in Javascript/CSS. A developer friend of mine initially wrote the code, but I'm having difficulty assigning my background-position to a ...

Utilizing property validation in your codebase

How can I set up my code to display a warning in the console if the value of the Prop is not a string? The player-name prop should always be a string. If this: <greet :player-name="5"></greet> contains a number, I want my code below to generat ...

What is the best way to replace input fields with processed values?

I'm struggling to restrict the characters permitted in a number input field. Currently, I am unable to figure out how to remove invalid characters from the inputfield. Below is the code snippet that I am experimenting with: <template> <di ...

Extract content from a label with jQuery

Snippet var $eContainer = $('<div/>', { id: "eContainer", class: 'eList' }).appendTo($injectTo); for (var i in navProps) { var np = navProps[i]; var npName = np.name; var npId = containerId + "_" + npN ...

A header with two divs taking up the entire screen

I am trying to create a full-screen header with 2 div elements, similar to the design in this example. So far, I have attempted to implement this layout, but the div elements are not spanning 100% width, and I also need to add an overlay to the right div ...

Enhancing JavaScript code to display an HTML table instead of a PNG image loading

I'm having trouble updating my code to load HTML tables instead of images. Can you assist me with this task? I have some queries regarding the possibility of combining an image name, stored as a PNG file, with my new source which will consist of simpl ...