What's a nice way to do master/application layouts with Erlydtl? With master/application layout I mean separating the main page layout template from template with the pagecontent, but rendering them as one. Think Ruby on Rails application layouts or ASP.NET Master Pages.
Are you trying to achieve something like:
main.dtl
<html>
<head></head>
<body>
<div id="menu">Menu</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
page.dtl
{% extends "main.dtl" %}
{% block content %}
Here's my content
{% endblock %}
Related
I am building a website using Jekyll and the W3.CSS Framework. I have a sidebar for navigation on large screens which collapses on smaller screens. The problem occurs on large screens. When content in the main div scrolls, the sidebar doesn't scroll with it. This leaves a white rectangle on top of the sidebar where the page header normally would be (the header scrolls up with the content).
I would like for the sidebar to scroll along with the content, or somehow hide the empty space. So far I've tried using the w3-top class, which anchors the sidebar to the top of the screen but covers up the header. I tried wrapping the sidebar and content divs with another div, which had no effect. I tried changing the background color of the sidebar which also had no effect. Here is my page layout:
<div class="w3-container w3-sidebar w3-bar-block w3-collapse w3-theme-light" style="width:250px" id="site-toc">
<button class="w3-button w3-large w3-hide-large w3-right" onclick="w3_close()">×</button>
<h4>Contents</h4>
{% assign section = site.data.contents[page.category] %}
{% for article in section.articles %}
{% if article.url == page.url %}
{% assign cls = "w3-bar-item w3-button w3-theme-l1" %}
{% else %}
{% assign cls = "w3-bar-item w3-button" %}
{% endif %}
{{ article.link-text }}
{% endfor %}
</div>
<article class="w3-container w3-main w3-theme-light" style="margin-left:250px">
<header">
<button class="w3-button w3-large w3-hide-large" onclick="w3_open()">☰</button>
<h2 style="color:#fff">{{ page.title }}</h2>
</header>
<section class="w3-text-theme">
{% if page.image %}
<img src="{{page.image}}" alt="{{ page.alt-text }}" class="w3-image" style="float:left;margin-right:16px;">
{% endif %}
{{ content }}
</section>
</article>
Any suggestions on how to fix this? This is my first web project in a decade and my javascript skills are non-existent at this point.
I decided to ditch the collapsible sidebar and try a different approach. I used the w3 fluid grid inside of a w3-row, which solved the scrolling problem.
---
layout: default
---
<div class="w3-row w3-theme-light">
<div class="w3-col l3 w3-hide-small w3-hide-medium" id="site-toc">
<div class="w3-bar-block w3-container">
<h4>Contents</h4>
{% assign section = site.data.contents[page.category] %}
{% for article in section.articles %}
{% if article.url == page.url %}
{% assign cls = "w3-bar-item w3-button w3-theme-l1" %}
{% else %}
{% assign cls = "w3-bar-item w3-button" %}
{% endif %}
{{ article.link-text }}
{% endfor %}
</div>
</div>
<div class="w3-col l6 w3-border">
<div class="w3-container w3-text-theme">
{{ content }}
</div>
</div>
<div class="w3-col l3 w3-hide-small w3-hide-medium">
<p></p>
</div>
</div>
I embedded a klaviyo form on shopify and it showed twice on the homepage of the shop I'm working on. I'm quite new to shopify development but know django and a little rails but still get confused on reading codes.
<div class="homepage-page {{ section.settings.homepage_page_color }}" data-section-id="{{ section.id }}" data-section-type="index-page">
<!-- form -->
<div id="shopify-section-1538847772051" class="shopify-section adjust--white">
<div class="klaviyo-form-LLvHeC"></div>
</div>
{% for block in section.blocks %}
<div class="wrapper">
<div class="grid">
{% case block.type %}
{% when 'page' %}
{% if block.settings.home_page_content != blank %}
{% assign page = pages[block.settings.home_page_content] %}
{% assign page_src = page.content | escape %}
{% if page_src contains '<img' %}
{% assign homepage_page_grid = 'one-whole' %}
{% else %}
{% assign homepage_page_grid = 'large--five-sixths push--large--one-twelfth' %}
{% endif %}
<div class="grid__item {{ homepage_page_grid }}">
{% if block.settings.home_page_show_title %}
<h4 class="home__subtitle">{{ page.title }}</h4>
{% endif %}
<div class="rte homepage-page__content">
{% unless page == blank or page.empty? %}
{{ page.content }}
{% else %}
{{ 'home_page.onboarding.no_content' | t }}
{% endunless %}
</div>
</div>
{% endif %}
{% when 'text' %}
<div class="grid__item large--five-sixths push--large--one-twelfth">
<div class="rte homepage-page__content">
{% if block.settings.home_page_richtext != blank %}
{{ block.settings.home_page_richtext }}
{% else %}
{{ 'home_page.onboarding.no_content' | t }}
{% endif %}
</div>
</div>
{% else %}
{% endcase %}
</div>
</div>
{% endfor %}
{% if section.blocks.size == 0 %}
<div class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="rte homepage-page__content">
{{ 'home_page.onboarding.no_content' | t }}
</div>
</div>
</div>
</div>
{% endif %}
</div>
{% schema %}
Which part of this piece of code is the one showing the second form?
This is the form on top
This is the form that I do not need which is near the footer
You have not added the full code for the section, but as you are adding it on homepage I am sure it is a dynamic section. You can read more about Sections and their types on Shopify Docs about Theme Sections.
In you particular scenario, it looks like you are using 2 different instances of same type of section. So for 2 instances, your section code is included and rendered twice, thus the multiple forms.
I don't know the exact use case, but you can fix it by adding another block type specifically for adding klaviyo form code or moving klaviyo form code in some other file included on homepage.
This code is included anytime that you are using that type of section. If you add another section of that type , you would see 3 forms.
<div id="shopify-section-1538847772051" class="shopify-section adjust--white">
<div class="klaviyo-form-LLvHeC"></div>
</div>
The solution is to move this code outside of the section, like in some code snippet or add it as a separate block so that it is only rendered where added.
In twig i can have a parent layout which defines some standard
<!DOCTYPE html>
<html>
<head>
{% block head %}
<link rel="stylesheet" href="style.css" />
<title>{% block title %}{% endblock %} - My Webpage</title>
{% endblock %}
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
© Copyright 2011 by you.
{% endblock %}
</div>
</body>
</html>
and then have a child layout which override some or all the blocks
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ parent() }}
<style type="text/css">
.important { color: #336699; }
</style>
{% endblock %}
{% block content %}
<h1>Index</h1>
<p class="important">
Welcome on my awesome homepage.
</p>
{% endblock %}
how can i do something similar in Rails 4?I looked around a bit but didn't find it.
You can create a layout for each controller. news.html.erb for NewsController etc.
You can then use content_for?, yield and render to nest the controller specific layouts inside application.erb.html
Here's an example from official rails guides.
In app/views/layouts/application.html.erb:
<html>
<head>
<title><%= #page_title or "Page Title" %></title>
<%= stylesheet_link_tag "layout" %>
<style><%= yield :stylesheets %></style>
</head>
<body>
<div id="top_menu">Top menu items here</div>
<div id="menu">Menu items here</div>
<div id="content"><%= content_for?(:content) ? yield(:content) : yield %></div>
</body>
</html>
In app/views/layouts/news.html.erb:
<% content_for :stylesheets do %>
#top_menu {display: none}
#right_menu {float: right; background-color: yellow; color: black}
<% end %>
<% content_for :content do %>
<div id="right_menu">Right menu items here</div>
<%= content_for?(:news_content) ? yield(:news_content) : yield %>
<% end %>
<%= render template: "layouts/application" %>
Source: http://guides.rubyonrails.org/layouts_and_rendering.html#using-nested-layouts
How do I get blocks inside a Liquid template snippet to render inside Rails? Currently, I am able to render plain text snippets, for example a layout might be:
<!DOCTYPE html>
<html>
<head>
{% include 'stylesheets' %}
</head>
<body>
</body>
</html>
If _stylesheets.liquid is plain text, this works fine. However, if I do something slightly more complicated, such as:
<!-- _stylesheets.liquid -->
{% for stylesheet in stylesheets %}
{{ stylesheet.file_url | stylesheet_tag }}
{% endfor %}
This will render nothing. When placing the exact code in the layout, it renders the expected results:
<!-- This Works -->
<!DOCTYPE html>
<html>
<head>
{% for stylesheet in stylesheets %}
{{ stylesheet.file_url | stylesheet_tag }}
{% endfor %}
</head>
<body>
</body>
</html>
Here is how I am rendering the liquid, in my rails view:
<%= Liquid::Template.parse(#theme.layout)
.render('stylesheets' => #theme.stylesheets)
.html_safe
%>
I was able to get the snippet partial working by changing the code to the following:
<!-- Layout -->
<head>
{% include 'stylesheets' %}
</head>
<!-- Partial: _stylesheets.liquid -->
{{ stylesheets.file_url | stylesheet_tag }}
This iterates through each stylesheet, but I cannot for the life of me find out why it does so without a liquid for loop.
Any ideas why this works?
With PHP using Twig I can do something like this:
layout.twig
<html>
<body>
{% block content %}{% endblock %}
</body>
</html>
form.twig
{% extends "layout.twig" %}
{% block content %}
<div class="form">{% block form %}{% endblock %}</div>
{% endblock %}
login.twig
{% extends form %}
{% block form %}
<form>
<input type="text" name="email" />
<input type="submit">
</form>
{% endblock %}
This way I have a layout for all pages, a layout for pages with forms and login page.
But with Slim I can specify only main layout that is parent for all templates:
layout.slim
html
body ==yield
and special layouts for every page on my site:
login.slim
div.form
form
input type="text" name="email"
input type="submit"
Is there a simple way to realize Twig-like inheritance with more than one level in Slim?
It looks that I found the solution for Slim with Sinatra:
layout.slim
html
body
== yield
form.slim
== slim :layout
div.form
== yield
login.slim
== slim :form
form
input type="text" name="email"
input type="submit"
I believe that in Rails it doesn't exist something like template inheritance, but I believe that it isn't necessary with yield and content_for methods.
For example, you can have a _form.html.slim layout:
.form
= yield
A _login.html.slim partial:
form
input type="text" name="email"
input type="submit"
And when you want to display a login with the form layout, you should do something like:
= render partial: "login", layout: "form"
login.html.slim
= render layout: 'form' do
form
input type="text" name="email"
input type="submit"