How do I conditonally extend a twig layout template?
If it is a blog type entry, then extend layout
If it is NOT a blog type then do nothng, do not extend layout
{% extends entry.type == 'blog' ? '_src/pages/resource/_resourceLayout' : '' %}
You cannot extend or not extend from a template dynamically. A possible solution would be to create an empty template to extend from instead of the blog layout one
main.twig
{% extends false ? 'foo.twig' : 'bar.twig' %}
{% block content %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent scelerisque pulvinar enim eu vestibulum. Morbi risus ex, gravida quis gravida quis, porttitor id purus. Etiam magna odio, maximus dapibus turpis eget, porttitor luctus tortor. Cras auctor nisi et nunc condimentum sagittis. Sed lobortis mi nibh, euismod posuere lectus porttitor non.
{% endblock %}
foo.twig
<section>
<div>
<h1>Foo</h1>
<p>
{% block content %}
{% endblock %}
</p>
</div>
</section>
bar.twig
{% block content %}
{% endblock %}
demo
Related
Good morning.
I am working in my first real development project using Node/MongoDB stack.
Everything is working as expected except by rendering text in EJS engine when I retrieve a string from DB to show in the page: the text is shown with a lot of white spaces in front of it.
I am trimming the text before sending it to the DB, directly in the model. I also tried to trim the text after retrieving it, with no luck.
What makes me believe the problem is with EJS its the fact that the text, on MongoDB doesn't has any trailing white spaces, but it has in the HTML seen in the browser inspect window.
I've searched through a lot of questions related to undesired white spaces, but did not found anything that could help me, so here I am asking for help, which would be very appreciated.
Thank you in advance!
This is how the text is rendered:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida sem libero. Phasellus convallis tellus vitae imperdiet aliquam. Cras sollicitudin maximus augue, sit amet tincidunt felis. Mauris bibendum sollicitudin iaculis. Fusce eget magna tincidunt, porta lorem eu, semper nunc. Morbi at commodo mi. Aliquam feugiat, sem fringilla imperdiet porta, est nisl ultricies mauris, sed finibus orci odio eget quam. Praesent odio ex, suscipit luctus tempus posuere, suscipit ut nisi. Ut feugiat, velit vitae laoreet malesuada, ligula augue vulputate ligula, ut vulputate sapien neque ut dolor. Maecenas congue enim at nisi porttitor cursus. Etiam convallis neque vel urna molestie, et aliquet tortor congue...
This is how it appears in the Inspect Window:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida sem libero. Phasellus convallis tellus vitae imperdiet aliquam. Cras sollicitudin maximus augue, sit amet tincidunt felis. Mauris bibendum sollicitudin iaculis. Fusce eget magna tincidunt, porta lorem eu, semper nunc. Morbi at commodo mi. Aliquam feugiat, sem fringilla imperdiet porta, est nisl ultricies mauris, sed finibus orci odio eget quam. Praesent odio ex, suscipit luctus tempus posuere, suscipit ut nisi. Ut feugiat, velit vitae laoreet malesuada, ligula augue vulputate ligula, ut vulputate sapien neque ut dolor. Maecenas congue enim at nisi porttitor cursus. Etiam convallis neque vel urna molestie, et aliquet tortor congue.
Nullam suscipit dui turpis, non porta odio egestas at. Sed eu ex tristique, facilisis massa sit amet, eleifend erat. Curabitur eu tempus tellus, sed lacinia nunc. Sed aliquam gravida porta. Vivamus eu luctus leo. Vestibulum condimentum arcu sem, vitae vehicula ligula ultrices eget. Fusce pretium molestie pellentesque. Nam ultrices mattis sapien ut consectetur. Cras et vehicula felis. Suspendisse quis egestas nunc, id tempor tellus. Proin placerat accumsan tristique.
</p>
Here is how it is in MongoDB:
{
_id: ObjectId("624c9293e176a46912503d36"),
title: 'Teste Novo Layout',
ages: '3-7',
sensiblePeriod: 'Matemática',
category: 'Visualização de Dados',
theme: 'Testagem',
description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida sem libero. Phasellus convallis tellus vitae imperdiet aliquam. Cras sollicitudin maximus augue, sit amet tincidunt felis. Mauris bibendum sollicitudin iaculis. Fusce eget magna tincidunt, porta lorem eu, semper nunc. Morbi at commodo mi. Aliquam feugiat, sem fringilla imperdiet porta, est nisl ultricies mauris, sed finibus orci odio eget quam. Praesent odio ex, suscipit luctus tempus posuere, suscipit ut nisi. Ut feugiat, velit vitae laoreet malesuada, ligula augue vulputate ligula, ut vulputate sapien
neque ut dolor. Maecenas congue enim at nisi porttitor cursus. Etiam convallis neque vel urna molestie, et aliquet tortor congue.\r\n' +
' \r\n' +
' \r\n' +
' \r\n' +
' Nullam suscipit dui turpis, non porta odio egestas at. Sed eu ex tristique, facilisis massa sit amet, eleifend e
rat. Curabitur eu tempus tellus, sed lacinia nunc. Sed aliquam gravida porta. Vivamus eu luctus leo. Vestibulum condimen
tum arcu sem, vitae vehicula ligula ultrices eget. Fusce pretium molestie pellentesque. Nam ultrices mattis sapien ut co
nsectetur. Cras et vehicula felis. Suspendisse quis egestas nunc, id tempor tellus. Proin placerat accumsan tristique.',
owned: 'Sim',
picture: 'fatherhood.svg',
date: ISODate("2022-04-05T18:59:49.801Z"),
reviews: [],
user: ObjectId("624c8dfdd0c88d172dfeebee"),
__v: 0
}
This is my Model
//File Requirements
const mongoose = require('mongoose');
const Review = require('./review');
const Schema = mongoose.Schema;
//Local variables
const sensiblePeriods = ['Movimento', 'Linguagem', 'Detalhes', 'Ordem', 'Desenvolvimento dos Sentidos', 'Refinamento dos Sentidos', 'Graça e Cortesia', 'Música e Ritmo', 'Escrita', 'Leitura', 'Matemática']
//Activity Schema
const ActivitySchema = new Schema({
title: {
type: String,
required: true
},
ages: {
type: String,
required: true
},
sensiblePeriod: {
type: String,
//enum limits the options to those inside the array
enum: sensiblePeriods,
required: true
},
category: {
type: String,
},
theme: {
type: String,
},
description: {
type: String,
required: true,
trim: true
},
owned: {
type: String,
required: true,
default: 'Não'
},
picture: {
type: String,
default: 'fatherhood.svg'
},
user: {
type: Schema.Types.ObjectId,
ref: 'User'
},
date: {
type: Date,
default: Date.now()
//required: true
},
reviews: [
{
type: Schema.Types.ObjectId,
ref: 'Review'
}
]
})
ActivitySchema.post('findOneAndDelete', async function (doc) {
if (doc) {
await Review.deleteMany({
_id: {
$in: doc.reviews
}
})
}
})
//"Compile" Schema
const Activity = mongoose.model('Activity', ActivitySchema);
//Export module to be used elsewhere
module.exports = Activity;
This is the controller taking the information for the route:
module.exports.details = async (req, res, next) => {
const activity = await Activity.findById(req.params.id).populate({
path: 'reviews',
populate: {
path: 'user'
}
}).populate('user');
if (!activity) {
req.flash('error', 'Atividade não encontrada!')
return res.redirect('/atividades')
}
res.render('atividades/detalhes', { activity });
}
And, finally, this is my EJS file:
<%- include('../partials/head') %>
<div class="row mb-3">
<div class="col-md-6">
<div class="card mb-3">
<img src="/public/img/<%=activity.picture%>" alt="" class="card-img-top">
<div class="card-body">
<h3 class="card-title">
<%=activity.title%>
</h3>
<p class="card-text">
<!-- This is the line which renders the text -->
<%=activity.description%>
<!-- ----------------------------- -->
</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><b>Dono: </b>
<%=activity.user.username%>
</li>
<li class="list-group-item"><b>Idades: </b>
<%=activity.ages%>
</li>
<li class="list-group-item"><b>Período Sensível: </b>
<%=activity.sensiblePeriod%>
</li>
<li class="list-group-item"><b>Categoria: </b>
<%=activity.category%>
</li>
<li class="list-group-item"><b>Tema: </b>
<%=activity.theme%>
</li>
</ul>
</div>
<% if(currentUser && activity.user.equals(currentUser._id)) {%>
<div class="card mb-3">
<div class="card-body">
<h4 class="card-text mb-3">Área de Risco</h4>
Editar Atividade
<form class="d-inline" action="/atividades/<%=activity._id%>/?_method=DELETE" method="POST">
<button class="btn btn-danger">Excluir Atividade</button>
</form>
</div>
</div>
<% } %>
<p><a class="card-link" href="/atividades">Voltar à todas as atividades</a></p>
</div>
<div class="col-md-6">
<!-- <h2 class="text-center card-title mb-2">Comentários</h2> -->
<% if(currentUser) {%>
<div class="card mb-3">
<div class="card-body">
<h4 class="card-title text-center mb-3">Incluir Comentário
</h4>
<form action="/atividades/<%=activity._id%>/reviews" method="POST">
<div class="row mb-3">
<div class="col">
<div>
<label class="form-label" for="title">Título</label>
</div>
<div>
<input class="form-control" type="text" name="review[title]" id="title" size="26">
</div>
</div>
<!-- <div class="col">
<div class="form-outline">
<div>
<label class="form-label" for="date">Data</label>
</div>
<div>
<input class="form-control" type="date" name="review[date]" id="date">
</div> -->
<!-- </div>
</div> -->
</div>
<div class="mb-3">
<div><label class="form-label" for="body">Comentário</label></div>
<div><textarea class="form-control" name="review[body]" id="body" cols="42" rows="5"></textarea>
</div>
</div>
<button class="btn btn-success">Incluir Comentário</button>
</form>
</div>
</div>
<% } %>
<% const reviews=activity.reviews %>
<% for(let review of reviews) { %>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">
<%= review.title %>
</h5>
<h6 class="card-subtitle">
Autor: <%= review.user.username %>
</h6>
<% const dbDate=review.date.toISOString()%>
<% const day=dbDate.substring(8,10)%>
<% const month=dbDate.substring(5,7)%>
<% const year=dbDate.substring(0,4)%>
<% const lastUpdated=`${day}/${month}/${year}` %>
<p class="text-secondary">
Última Atualização: <%= lastUpdated %>
</p>
<p>
<%= review.body %>
</p>
<% if(currentUser && review.user.equals(currentUser._id)) {%>
<a href="/atividades/<%= activity._id %>/reviews/<%=review._id%>"
class="btn btn-sm btn-info">Editar Comentário</a>
<form class="d-inline"
action="/atividades/<%= activity._id %>/reviews/<%=review._id%>?_method=DELETE "
method="post">
<button class="btn btn-sm btn-danger">Excluir Comentário</button>
</form>
<% } %>
</div>
</div>
<%}%>
</div>
</div>
</div>
<%- include('../partials/foot') %>
Line breaks contained in my strings merely render as <br> instead of actual line breaks.
I tried to use back-ticks to no avail. Is there a simple way to have line breaks rendered on the page, ideally without modify my code too deeply?
Markup:
<div
v-for="item in faqItems"
:key="item.id"
>
<span class="faq-item-title">
{{ item.title }}
</span>
<span class="faq-item-details">
{{ item.text }}
</span>
<svg-icon name="chevron-down"></svg-icon>
</div>
JS:
faqItems: [
{
title: 'Nullam vehicula arcu ipsum',
text: 'Donec sit amet nisl finibus, pharetra orci ut, aliquet diam.<br><br>Nunc cursus libero luctus nunc vestibulum placerat. Mauris vel dolor sit amet orci rutrum sollicitudin.<br><br>Donec neque leo, porttitor a diam et, sodales volutpat libero.'
},
{
title: 'In iaculis egestas nisl',
text: 'Etiam a elementum diam. Praesent lobortis pulvinar lacus, sit amet vehicula tortor.'
}
One way is to replace your <br>s with text line breaks (\n) and keep using it as text in layout:
{
title: 'Nullam vehicula arcu ipsum',
text: 'Donec sit amet nisl finibus, pharetra orci ut, aliquet diam.\n\nNunc cursus libero luctus nunc vestibulum placerat. Mauris vel dolor sit amet orci rutrum sollicitudin.\n\nDonec neque leo, porttitor a diam et, sodales volutpat libero.'
}
As Daniel pointed out, literal line breaks don't work in <span>. Unless you map it to .innerText property of the <span> => Example - which, under the hood, transforms all literal breaks into <br>s and divides the text into different text nodes, accordingly).
The other way is to use the dedicated Vue directive for this purpose, which parses the string as html: v-html.
<span class="faq-item-details" v-html="item.text" />
Use backticks and then add css entries as follows:
<div
v-for="item in faqItems"
:key="item.id"
>
<span class="faq-item-title" style="white-space: pre-wrap;">
{{ item.title }}
</span>
<span class="faq-item-details" style="white-space: pre-wrap;">
{{ item.text }}
</span>
<svg-icon name="chevron-down"></svg-icon>
</div>
I would like to implement a News Headline banner.
The HTML code for that headline banner is this:
<!-- hot news start -->
<div class="col-sm-16 hot-news hidden-xs">
<div class="row">
<div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
<ul id="js-news" class="js-hidden">
<li class="news-item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor</li>
<li class="news-item">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium</li>
<li class="news-item">Donec quam felis, ultricies nec, pellentesque eu</li>
<li class="news-item">Nulla consequat massa quis enim. Donec pede justo, fringilla</li>
<li class="news-item"> Donec pede justo, fringilla vel, aliquet nec, vulputate eget ultricies nec, pellentesque</li>
<li class="news-item">In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo</li>
<li class="news-item">Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis </li>
</ul>
</div>
<div class="col-sm-1 shuffle text-right"><span class="ion-shuffle"></span></div>
</div>
</div>
<!-- hot news end -->
I would like to make this so it can be used in a modular page. The idea is that the user could just type something similar to this:
news:
text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
url: foo.com/lorem
news:
text: Sed ut perspiciatis unde omnis iste natus error sit voluptatem
url: foo.com/sedut
...
And the whole block would be rendered. I would like to know how to implement that in Grav/Twig. If someone answers please bear in mind that I am relatively new to Grav, so a verbose answer is more appreciated than a concise one.
I will begin with the simplest solution that would achieve your goal.
At first, I will treat this as a regular page, not a modular page.
In your user file, let's define a new template within your current template. Antimatter is the default one, so I'll work with this one. Create news.html.twig in user - templates - antimatter folder and paste in the following code block.
{# user/templates/antimatter/news.html.twig #}
<div class="col-sm-16 hot-news hidden-xs">
<div class="row">
<div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
<ul id="js-news" class="js-hidden">
{% for news in page.header.news %}
<li class="news-item">{{news.text}}</li>
{% endfor %}
</ul>
</div>
<div class="col-sm-1 shuffle text-right"><span class="ion-shuffle"></span></div>
</div>
This is a twig way how to loop through the frontmatter content which we'll create now.
All the pages in Grav are stored in user - pages folder. The name of the folder specifies among others the relative address of the page, the number is just for ordering purposes and irrelevant for now, the markdown file inside specifies which template to use.
Let's create in pages a folder called 02.news and inside a file called news.md. Therefore, it'll use news template we created earlier. Paste this into the news.md
<!-- user/pages/02.news/news.md -->
---
news:
-
text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
url: foo.com/lorem
-
text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
url: foo.com/lorem
-
text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
url: foo.com/lorem
---
Doing this we create a news array and each entry has text and url. Now you have access to it through page.header.news and you can retrieve it's attributes.
I'm not all too sure how would you imagine turning this into a modular design. One way that comes to mind is to have a parent page and within have modular pages for various topics such as business news or politics. Let's try that.
Start with a parent template, let's call it a newscontainer.html.twig. In it we need to specify that grav should retrieve all it's modular children and iterate over. Grav calls these children a collection of pages. We'll just want to spit out their content.
{# user/templates/antimatter/newscontainer.html.twig #}
{% for module in page.collection() %}
{{module.content}}
{% endfor %}
Now in the 02.news folder, change the markdown file name to newscontainer so it uses our new template. Now it serves as a parent container for all the news. Inside, specify that it should load into it's page.collection all it's modular children. The limit means that maximum 20 modular pages will be loaded.
<!-- user/pages/02.news/newscontainer.md -->
---
title: News
content:
items: '#self.modular'
limit: 20
---
In the templates folder, create a new one called modular and move the news.html.twig template we made earlier into it. Modular pages look for templates in this folder.
Almost there. Lastly, in 02.news folder, we can now create modular pages. You can do that by creating new folders that start with _ instead of numbers, so for example create _politics and _business. You can copy now the news.md we made earlier into each and change the content as you wish. It should display correctly if you go to whateverpage.com/news
In the end, the pages structure looks like this
pages
01.Home
default.md
02.News
newscontainer.md
_business
news.md
_politics
news.md
As additional comment to Dan's answer, here is what I finally did:
Defined a partial twig template
<!-- hot news start -->
<div class="col-sm-16 hot-news hidden-xs">
<div class="row">
<div class="col-sm-15"> <span class="ion-ios7-timer icon-news pull-left"></span>
<ul id="js-news" class="js-hidden">
{% set items = page.find('/ticker').children %}
{% for item in items %}
<li class="news-item">{{ item.title }} </li>
{% endfor %}
</ul>
</div>
<div class="col-sm-1 shuffle text-right"><span class="ion-shuffle"></span></div>
</div>
</div>
<!-- hot news end -->
Populated empty pages with just titles under /ticker folder (invisible).
The template can be used anywhere with {% include %} and the user just needs to add or delete empty pages and set up the title he wants to display as headline/news.
I found this approach was easier than any other one.
I have a fully functioning prototype of an HTML5 news card, and I need to populate 50 or so cards with unique content. I am asking for suggestions for a more efficient way to add content to each card other than copying, cutting, and pasting from the Excel spreadsheet. The spreadsheet's columns contain each card's news category, date, title, and external URL. I have also just been asked to include the image from the news article that the card links to - I cannot imagine how that could be automated. This project uses Bootstrap styling, data-category attribute on a tag in each card, and is a Laravel website; it does not include Angular, Mustache, Handlebars, or a templating pattern. Is there a way I could create a custom template for these news cards without needing to install a framework or template engine? Could I use data attributes?
Here is the HTML for one card:
<div class="col-lg-4 col-md-6">
<section class="news-box" data-category="blog">
<figure>
<img src="/material-icons/ic_recent_actors_black_24dp/web/ic_recent_actors_black_24dp_2x.png" class="img-responsive opacity-3">
<figcaption>Blog</figcaption>
</figure>
<h3 class="h6">Title of Blog Post</h3>
<figure>
<img src="images/news/pic2.jpg" class="img-responsive">
</figure>
<p>luctus et ultrices posuere cubilia Curae; quam erat volutpat. Phasellus dignissim euismod luctus.In leo mauris, blandit quismalesuada lobortis, fringilla a ipsum.</p>
</section>
</div>
So this might not be the best answer, but these are my 2 cents.
You will first have to convert your Excel sheet to csv and then to a json object. I think this can be easily achieved with online converters like this: http://www.convertcsv.com/csv-to-json.htm (haven't tried that myself, just pasted the first google result). Your json object will then look like var foo = [{...},{...},...] (see snipet)
Create your "card template" with dummy placeholders like card_title card_img. Hide it.
In your js file, iterate over all the elements in your json object and use the template you just created to replace all the placeholders. (var newItem = myTemplate.replace('blog_title',val.blog_title)...)
Append the resulting html snippet to the cards container.
$(document).ready(function(){
var template = $(".card-template").html(); //get the card template html
$.each(foo, function(idx, val){ //iterate over the json object
var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data
$(".cards-container").append(newCard); //append the card to the container row
});
});
var foo = [
{
'title':'Gotta catch em all',
'img':'http://i.imgur.com/tmgWXUP.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Trumpers trumping Trump',
'img':'http://i.imgur.com/C7z53mE.gif',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Aint no hacker',
'img':'http://i.imgur.com/vQGnFD4.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
}
]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row cards-container">
<!-- inject cards here -->
</div>
<div class="card-template hide">
<div class="col-xs-3">
<h2>card_title</h2>
<img src="card_image" class="img-responsive">
<p>card_content</p>
</div>
</div>
You could also try to do it with vanilla js, but it's up to you.
$(document).ready(function(){
var template = $(".card-template").html(); //get the card template html
$.each(foo, function(idx, val){ //iterate over the json object
var newCard = template.replace('card_title',val.title).replace('card_image',val.img).replace('card_content',val.content); //make a copy of the template and replace the placeholders with the real data
$(".cards-container").append(newCard); //append the card to the container row
});
});
var foo = [
{
'title':'Gotta catch em all',
'img':'http://i.imgur.com/tmgWXUP.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Trumpers trumping Trump',
'img':'http://i.imgur.com/C7z53mE.gif',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
},
{
'title':'Aint no hacker',
'img':'http://i.imgur.com/vQGnFD4.jpg',
'content':'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua'
}
]
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row cards-container">
<!-- inject cards here -->
</div>
<div class="card-template hide">
<div class="col-xs-3">
<h2>card_title</h2>
<img src="card_image" class="img-responsive">
<p>card_content</p>
</div>
</div>
I am not sure as to why this is complex.
1> Load the foundation.css
2> Load the foundation.min.js
3> Add the following code for Foundation Tabs:
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active">Tab 1</li>
<li class="tabs-title">Tab 2</li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
4> Initialize foundation and tabs as:
$(document).foundation();
$(document).foundation('tab', 'reflow');
Why doesn't this work?
Your snippet isn't referencing any of the required files and you're not calling $(document).foundation(); in the javascript section. Also, you don't need to call reflow upon initialization.
You only need the one snippet. You're using multiple snippets and all of the content has been separated, which is why your example is broken.
This is what your code snippet should be like (all of the content is is one snippet):
$(document).foundation();
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active">Tab 1
</li>
<li class="tabs-title">Tab 2
</li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
Fiddle Demo showing what your snippet should look like.