What is a solution to prevent style.css from being recognized as the Jekyll Page?

Currently, I am utilizing an expression

{% assign mypages = site.pages | sort: "order" %} {% for page in 
mypages %}
{% unless page.exclude %}

<a href="{{page.url|absolute_url}}"> {{ page.shortname }} <span 
class="rate">{% include indexmod.html %}</a></span> <span class="rex"> 
| </span>
{% endunless %}
{% endfor %}

in the layout, but I am experiencing an issue where style.css is being mistaken as a Jekyll Page.

I have attempted various techniques from a discussion on GitHub titled "/css/main.css considered as a Jekyll:Page? #3151", however, none of them seem to work. At times, I have had to remove all styles completely.

Please provide guidance on how to ensure that the styles function correctly without being generated as a link to a Jekyll Page.

Answer №1

For optimal results, it is advised to utilize site.html_pages in place of site.pages. This way, only pages that produce output in the form of .html will be included, omitting pages like style.css. Both options can be found listed here:

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 process for creating a parent container in which clicking anywhere inside will cause a child container (built with jQuery UI draggable) to immediately move to that location?

This is a rundown of tasks that I am struggling to code more effectively: When the bar is clicked anywhere, I want the black dot button to instantly move there and automatically update the displayed percentage below it. Additionally, when I drag the butt ...

Incorrect color change on button triggered by onMouse actions and state fluctuations

While creating a user profile on my app, I encountered an issue with button coloring. When I try to add color functionality to the button, it turns red instead of green and remains red even when the mouse is not hovering over it. My goal is to have the but ...

Having trouble aligning two divs horizontally on the same line in Bootstrap 4

I am facing an issue with my HTML code where I have two div elements that are supposed to be horizontally aligned, but the second div is appearing underneath the first one. To fix this, I tried using bootstrap classes for alignment. <div class="c ...

Can someone please explain the purpose of row-sm and row-cols-sm-n (where n<12)? I've come across the col-sm-n (where n<12) but I'm unsure about how row-sm is used

From my understanding, when using col-sm-n in Bootstrap, the columns in a row will stack on top of each other when the device screen width is less than the specified size for sm. But what about row-sm? Does it function similarly to col-sm? And what exactly ...

"Unexpected discrepancy: Bootstrap Glyphicon fails to appear on webpage, however, is visible

I am having some trouble getting the glyphicon to display properly in my side nav. The arrow head should rotate down, which is a pretty standard feature. Here is the link to the page: The glyphicon should be visible on the "Nicky's Folders" top leve ...

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

How can I create additional white space at the end of my webpage with CSS grid?

Looking for some help with CSS as a beginner here. I'm facing an issue where my CSS is creating excessive blank space at the bottom of my document, almost 60% of it. Could this be due to incorrect parent parameters or the children elements? This is m ...

What steps are necessary to alter the background color of a jumbotron?

Can someone help me figure out how to change the background-color of the 'jumbotron' class in Bootstrap? The default color set in bootstrap.css is #eee. I've tried various methods like replacing it with none, none !important, or transparent ...

Correcting W3C validation issues is essential

I am encountering errors in my W3C validation process. Even though I have set <!DOCTYPE HTML> for my page, I continue to experience issues as shown in the image below. I have been trying to troubleshoot and resolve these errors without much success ...

Understanding the percentages of CSS in relation to other elements

Can you define a CSS dimension in a percentage relative to an element other than its parent? Specifically, I want the border-radius of a div to be 10% of its width. However, using border-radius: 10% creates an elliptical border when the height and width ...

The boundary extends fully to the right

Recently, I created a calculator to convert kilograms to pounds and encountered an issue when trying to add a border to a p element. The problem was that the border extended all the way to the right side of the page. Here is the corresponding HTML code: &l ...

What is the process for implementing custom CSS styles in Cognos?

I've been working on creating Cognos reports and I'm looking to change the overall design of some specific ones (prompt pages and report pages). Is there a way for me to use different custom CSS files for each individual report? If that's ...

Tips for positioning label/input box/button on Internet Explorer 7

Here is a Fiddle example you can check out, along with the corresponding code : <div class="menu-alto"> <ul> <li> <a title="Link" href="#">Link</a> </li> <li class="newsletter ...

Creating a Bootstrap 4 table that utilizes the full width while maintaining responsiveness

Is it feasible to implement a table-responsive solution that adjusts column width based on the length of data within each column, while still allowing the thead to occupy the entire canvas width? For Example: (the last column with no content should take u ...

Incorporate a new style into several previous slides using the Slick carousel feature

I'm attempting to utilize the Slick carousel to create a timeline. My goal is for the previous slides to remain colored as you progress through the timeline, and turn grey when you go back. I've tried using onAfterChange and onBeforeChange, but I ...

Error: Syntax error detected. Unexpected blank space found. Expecting either "-" symbol, identifier, or variable

Error: Syntax error: unexpected '' (T_ENCAPSED_AND_WHITESPACE), expecting '-' or identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\xampp\htdocs\Source Code\displaysalesdetailed.php on line ...

How can I extract information from an HTML table using AngleSharp?

Seeking a way to extract song data from a playlist on a music streaming website This table contains song information: <tr class="song-row " data-id="ef713e30-ea6c-377d-a1a6-bc55ef61169c" data-song-type="7" data-subscription-links="true" data-index="0" ...

optimal application of css with jquery

I have a question about using jQuery to set the padding of a class or id. I am able to successfully change the height of an element with this code: $('.menu').css({ height: '90px' }); But now, I need to apply a specific CSS rule in jQ ...

Guidelines on centering an AJAX spinning animation within a parent div

Below is the basic structure of an HTML document for a webpage. <div class="grand-parent"> <div class="header">Heading</div> <div class="parent-div"> <div class="child-div-1"></div> ...

"Creating a HTML Table with Merged Cells using colspan and rowspan

Creating an HTML table with a unique layout is my latest project. I envision it to look like this: +-------+---+ | | | +-------+ + | | | +-----+-----+ | | | +-----+-----+ To achieve this, I'm utilizing a colgroup to split t ...