i created a repo on github fr my blog alireza.one and now i want to create a Persian blog and i have two problems:
First: font face doesn't load. i put an import line on my css but it doesn't load.
#import url('https://alireza.one/farsi/assets/type.css');
My Farsi (Persian) blog loads my main css but the font isn't loaded. My repository: alirezahy/farsi. My webpage: alireza.one/farsi
Second: My index.html (both in Farsi repo and alirezahy.github.io) is like this:
---
layout: default
title: Index
---
<div class="listing">
{% for post in paginator.posts %}
<div class="post other link">
<h2></span> {{ post.title }}</h2>
<p class="post-date">{{ post.date | date_to_string }}</p>
</div>
{% endfor %}
</div>
How can i make it to a normal index.html so my front page appears like a normal weblog not as a site page.
If you want to add a font, you would need to add it like this in your css file:
#font-face {
font-family: "myFont";
src: url(fontofallknowledge.woff);
}
And then you can use the font by using it like this
body{
font-family: "myFont";
}
You would use the #import to import stylesheets.
To answer your second question, you seem to be using php in your .html file. You cannot do this.
Related
I usually put these below code in order to do additional styling for my product page. But I am looking for a way where I would like to link CSS style sheet in the product page and do the CSS designing in a different directory, example: "assets/custom.css".
So how do I link the below styles made under .
<style>
.checkmarks li {
list-style-type: none;
background: url("https://i.imgur.com/FqEWdiJ.png") 0px 5px no-repeat;
background-size: 20px;
padding-left: 30px;
line-height: 200%;
}
</style>
<ul class="checkmarks">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
If you have a file in the assets folder, you can access it using the asset_url filter in Liquid. (Reference: https://shopify.dev/docs/themes/liquid/reference/filters/url-filters#asset_url)
If you create your stylesheet as assets/custom.css you can get the URL using:
{{ 'custom.css' | asset_url }}
Since it's a stylesheet, you can add on the stylesheet_tag filter to also have Shopify automatically make it into an appropriate HTML tag for you:
{{ 'custom.css' | asset_url | stylesheet_tag }}
One further possible improvement would be to make your stylesheet a scss file rather than a standard css file. This allows you to use some fancy features that help keep longer CSS files more readable/maintainable. Additionally, Shopify will minify a scss file when it compiles everything into a final css file - which means the file size will be slightly smaller because all of the whitespace gets stripped out. If you decide to do this, the compiled (browser-friendly) version of the file is accessed as <filename>.scss.css - so custom.scss could be put in as:
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}
Finally, if you want this file to only appear on your product pages, you can either:
Place this code inside your templates/product.liquid file, or
Place this code in the layout/theme.liquid file, wrapped in a simple template check to see if we are on a product page:
{% if template.name == 'product' %}
{{ 'custom.scss.css' | asset_url | stylesheet_tag }}
{% endif %}
I'm making a site using this theme: Github repo; theme demo.
The theme is built with the blog feed on the homepage (index.html). What I would like to do instead is:
make a static homepage (i.e. no blog feed on the homepage), and
have the blog feed live on a separate page called "Blog", with the link "/blog" or "/blog.html".
The code for the blog feed lives in _includes/blog.html and is included in the home layout using {% include blog.html %}.
What I've tried
changed the layout of index.html to a static layout like page, and created a new page in the root called blog.html with the layout home - this succeeded in creating a static homepage, but the blog page yields a home-like header but no blog feed (essentially a page with no content).
created a new page in the root called blog.html with the layout default, and pasted the content of the home layout (including {% include blog.html %}) into that page - this yielded the same result as above.
created a new layout called blog, which is a copy of the current home layout. I deleted the line {% include blog.html %} from the home layout. Then I gave index.html the home layout and created a new page in the root called blog.html with the layout blog. This yielded the same result as above.
In short, it seems like the blog feed isn't able to generate in any file other than index.html, and I haven't been able to figure out why. Is it something I'm missing in the theme's configuration? Apologies if this turns out to be a dumb question - I'm rather new to this. Thank you for any help you can give me!
EDIT: Turns out it was an issue with the paginator, which by default paginates from home.
The index.html uses the home layout:
---
layout: home
---
This lives in _layouts/home.html and contains a header and includes blog.html. It looks like this:
---
layout: default
---
<div class="home">
<div id="main" class="call-out"
style="background-image: url('{{ site.header_feature_image | relative_url }}')">
<h1> {{ site.header_text | default: "Change <code>header_text</code> in <code>_config.yml</code>"}} </h1>
</div>
{% include blog.html %}
</div>
The blog.html file loops over all (blog) posts:
<div class="posts">
{% for post in paginator.posts %}
...
To solve your issue, you need to define your own home page as an include like this:
Create your-custom-homepage.html with html of your choice.
Include it in home.html as {% include your-custom-homepage.html %} instead of {% include blog.html %}. Just replace the line in _layouts/home.html.
Then it will contain the header and your content.
The Jekyll documentation, e.g. https://jekyllrb.com/docs/step-by-step/04-layouts/ and https://jekyllrb.com/docs/includes/ will hopefully explain the details.
As a novice starting out on GitHub Pages, I am lost among the sea of materials on the web that seem to help with my following problem:
I am using Jekyll to build my blog hosted via GitHub Pages and would like to add a background image in my default homepage like this.
So, how do I do it? I have started out, but have little to no knowledge of HTML / CSS and would thus be grateful for a simple way to do the same.
I am currently using the default minima theme! :)
Minima doesn't have a provision to easily render a "cover photo" like you expect to. But that doesn't mean, it is impossible to render one.
When using Minima, your homepage is rendered via the file ./index.md and layout file _layouts/home.html. So, if your working directory doesn't contain the home layout, create the _layouts directory with a file named home.html.
The home layout in Minima
I'll explain what the layout contains so that you'll be able to use that knowledge in other areas.
The layout contains the following code. Copy the entire code below into the _layouts/home.html file you just created in the above step:
---
layout: default
---
<div class="home">
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
{{ content }}
{%- if site.posts.size > 0 -%}
<h2 class="post-list-heading">{{ page.list_title | default: "Posts" }}</h2>
<ul class="post-list">
{%- for post in site.posts -%}
<li>
{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
<span class="post-meta">{{ post.date | date: date_format }}</span>
<h3>
<a class="post-link" href="{{ post.url | relative_url }}">
{{ post.title | escape }}
</a>
</h3>
{%- if site.show_excerpts -%}
{{ post.excerpt }}
{%- endif -%}
</li>
{%- endfor -%}
</ul>
<p class="rss-subscribe">subscribe via RSS</p>
{%- endif -%}
</div>
Let's dissect the layout chunk by chunk:
---
layout: default
---
This is a front matter block that tells Jekyll the 'home' layout is a subset of the 'default' layout.
<div class="home">
This opens up a container for everything else on the home page and is closed by the </div> on the very last line.
{%- if page.title -%}
<h1 class="page-heading">{{ page.title }}</h1>
{%- endif -%}
This a template instruction that would render the home page's title if it was provided in the front matter inside file ./index.md.
{{ content }}
This is another template instruction that pulls in content (anything apart fron the front matter) from the file using this layout. In our case, that would be ./index.md.
The remaining chunk {%- if site.posts.size > 0 -%} cycles through the posts in your site and renders a list of those posts.
The cover image
We now have a fair idea regarding what our template is made of. But there is no mention of the code to render the cover-photo.
Agreed. So, let us code that in then. Insert the code from the following steps before the line with {{ content }} in the layout
First, add a container for the image.
<div class="hero">
</div>
Then insert the HTML markup to render the image of your choice (say, ./assets/home-feature.jpg) within it:
<div class="hero">
<img class="feature-img" src="{{ 'assets/home-feature.jpg' | relative_url }}" />
</div>
With just the above markup, your image would perhaps be too big for your page. So we should constrain the size with some CSS styling.
Minima uses Sass partials to generate the CSS for your site. Therefore, we'll need to overwrite a partial with some custom code.
Create a new directory named _sass with a subdirectory named minima and finally a file inside the _sass/minima directory named _layout.scss. Copy the contents at this link into that file.
Now add the following custom code towards the end of the file:
/* Cover Image */
.hero {
.feature-img: {
max-width: 100%;
}
}
Rendering background image
All of the above is to just render a cover-photo. To render the image as a proper background-image, you can do the following..
First, we need to adjust the markup to render text in the foreground and image only as the background:
<div class="hero">
{{ page.hero_text }}
</div>
With the above in place you are now able to control the text over your background-image via front matter in ./index.md.
And then bring back the image using CSS:
/* Cover Image */
.hero {
background: url('../home-feature.jpg');
}
Getting the url to your image is a little tricky since we can't use Liquid instructions inside sass partials in vanilla Jekyll. So you'll have to experiment with it for your particular site.
For more tips regarding CSS backgrounds, check this link
Have you look into the inspector tool? Another easy way is to look at the code snippet of that website which you can find here: https://github.com/mnp-club/mnp-club.github.io
I'm pulling up the exact code for what they do to achieve that effect this will :
https://github.com/mnp-club/mnp-club.github.io/blob/master/_layouts/page.html
<div id="main" role="main">
<article class="entry">
{% if page.image.feature %}<img src="{{ site.url }}/images/{{ page.image.feature }}" class="entry-feature-image" alt="{{ page.title }}"{% endif %}
// Alternatively a simpler way will be to just include the img src code.
// <img src="insert-image-url.jpg" class="entry-feature-image"/>
// Whole bunch of code for body here
</article>
</div>
And to make it a full-width header image, just give it a css of
.entry-feature-image {
width: 100%;
}
My blog run on jekyll minima and github pages as well and I have a default header for certain pages. Making it full width is just a matter of CSS.
https://github.com/wing-puah/thegeekwing-jekyll/blob/master/_layouts/default.html
What you can do is just add the html code for the image to the _layouts/default.html file.
There are different ways to achieve what you want. Understand that you have little experience with html and css but I will suggest to pull up the inspector tools and see the code to identify which code does what. Hope that helps!
I have the following code in an html page and am trying to use jinja logic to embed html somewhere specific (in the blog/about me section of the html)
Code that doesn't work (see specifics below)
<!-- About Section (Blog)-->
<section class="bg-primary text-white mb-0" id="about">
<div class="container">
<h2 class="text-center text-uppercase text-white">Blog</h2>
<hr class="star-light mb-5">
<div class="row">
<div class="col-lg-4 ml-auto">
<p class="lead">This is the blog section</p>
{%block content%}
{%endblock %}
</div>
<div class="col-lg-4 mr-auto">
<p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
</div>
It's these two lines that ordinarily produce an htmlsnippet output:
{%block content%}
{%endblock %}
In another place on the site (right at the bottom) I've used the same logic, and the snippet output has displayed fine.
Code that works fine
<!-- Custom scripts for this template -->
<script src="/static/js/freelancer.min.js"></script>
<div>
{%block content%}
{%endblock %}
</div>
</body>
</html>
The error I get is:
'block' tag with name 'content' appears more than once
141 <div class="col-lg-4 ml-auto">
142 <p class="lead">This is the blog section</p>
143 {%block content%}
144 {%endblock %}
145 </div>
146 <div class="col-lg-4 mr-auto">
147 <p class="lead">The blogs outlined in the models section and stored in the database, are going to be displayed here.</p>
148
149 </div>
150 <div>
151 {%block content%}
152 {%endblock %}
153 </div>
Of course, I note the error that says: 'block' tag with name 'content' appears more than once ...but my question is
Noting that I know how to fix the error (use the content just once), What is then the best way to include an html snippet, and more importantly, an html snippet that say, has posts, which are generated from the database? Is Jinja logic as shown below using block contents the only way, or is there a better way?
For instance, I have other html snippets in other apps in the same django project (e.g. in blog/templates/blog/post.html) ...this also extends the home page, but how do I include this in the home page? I don't quite understand the structure and how to reference things from different directories. Even if they have to be in the same directory, if you can only include one html snippet, how is it checking the folder it's referenced from?
Structure:
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates
This is where the header.html and home.html live (header is where the main bootstrap index page has been put for now)
there is another folder here called 'includes' which has all the html snippets such as 'mysnippet.html'.
Important: ** it is THIS 'aboutme.html' that is being referenced in the jinja logic above.**
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates\aboutme\includes\mysnippet.html
Other apps such as blog:
C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\blog\templates\blog
is where I have
blog.html and post.html
How would I include the content of post.html or blog.html in the above shown snippet (main homepage)
Final note:
The home.html page includes this code, which I note points to the inclusion of the aboutme code snippet. But still the question remains, how do I include other snippets, and what is the best way to understand this structure and how things fit together. Tutorials or link references also welcome.
home.html (in: C:\Users\User\Desktop\Django Tutorials\understanding_html_setup\pythonsite\mysite\aboutme\templates\aboutme\home.html)
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website: </p>
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
I think any guidance on the optimal and simplest set up will be invaluable for SO Django beginners. Are there flow or diagrams that show clearly how things ought to be arranged from an html and display point of view?
UPDATE:
Based on the answer below, I changed the 'content' name to something else, and it does indeed allow other snippets to be included. Thank you!
I still don't know a) the best way to organise html pages and to include snippets and also how to include a page that is drawing from a database: e.g. posts:
I tried this - that seeks to include post.html but it doesn't work - it instead just messes up the formatting and repeats the blog section elsewhere on the bootstrap page.
{%extends "aboutme/header.html" %}
{%block content%}
<p>Welcome to this "about" page that is all about the website:</p>
{%include "aboutme/includes/mysnippet.html"%}
{% endblock %}
{%block moose%}
<p>This is test text that says moose</p>
{%include "blog/post.html"%}
{% endblock %}
The 'moose' text does show up, but not the blogs/posts.
post.html (in the blog app) is:
{% extends "aboutme/header.html" %}
{%block content %}
<h3>{{post.title}}</h3>
<h6>on{{post.date}}</h6>
{{post.body|safe|linebreaks}}
{% endblock %}
I am working on github pages with jekyll. I want to put the about me on my homepage by default.
I've searched a lot but found little help for this demand.
One easy method is to put the about.md file in the _posts directory with the first date. Then, when Jekyll indexes _posts, you can always assume that site.posts.first is the about.md.
Some sample code below:
---
layout: default
---
<section class="main-content">
{% assign post = site.posts.first %}
{% assign content = post.content %}
<article class="module color-3">
{{ content }}
</article>
</section>