twig,Code片段,代码实例,代码示例,代码片段库

twig 在Twig中包含带变量的文件

include-with-variables.twig

{% include 'partials/banner-page.twig' with { 'page_title': page_title, 'page_banner': page_banner } %}

twig 在Bootstrap和Foundation中连续切换列数

clearfix-visible-sm.twig

{# BOOTSTRAP #}
 
{# clearfix every two columns on small screens #}
{% if loop.index is even %}
  <div class="clearfix visible-sm"></div>
{% endif %}
 
{# clearfix every 3 columns on medium+ screens #}
{% if loop.index % 3 == '0' %}
  <div class="clearfix hidden-sm"></div>
{% endif %}
 
 
{# FOUNDATION #}
 
{# clearfix every two columns on small-medium screens #}
{% if loop.index is even %}
  <div class="clearfix hide-for-large"></div>
{% endif %}
 
{# clearfix every 3 columns on large+ screens #}
{% if loop.index % 3 == '0' %}
  <div class="clearfix show-for-large"></div>
{% endif %}
 
{# Look up Bootstrap & Foundation visibility classes for more classes. (Make sure you're looking at the correct documentation for the verison of Foundation you're using.) #}

twig 在Twig中每隔X和X次交换一些东西（例如类）的简单方法

在Twig中每隔X和X次交换一些东西（例如类）的简单方法

teasers.twig

{# Example: 2/6/2/6/2/6... #}
{# first batch + second batch sum #}
{% for batch in posts|batch(8) %}
      
  {% for item in batch %}

    {% set size = 'class-A' %}
    
    {# first batch + 1 #}
    {% if loop.index < 3 %}
      {% set size = 'class-B' %}
    {% endif %}
    
    {% include 'partials/teaser-partial.twig' with {'post':item, 'size':size} %}
  {% endfor %}

{% endfor %}

twig 基地布局

将始终保留的主文件，导航栏位于的位置。

base.html.twig

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{% block title %}AquaNote!{% endblock %}</title>

    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}">
        <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
        <link rel="stylesheet" href="{{ asset('vendor/fontawesome/css/font-awesome.min.css') }}">
    {% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
</head>
<body>
<div class="search-bar">
    <form method="GET" action="" class="js-sea-search sea-search">
        <input type="search" name="q" placeholder="Search Sea Creatures" autocomplete="off" class="search-input">
    </form>
</div>
<header class="header">
    <img class="logo-icon" src="{{ asset('images/aquanote-logo.png') }}">
    <h1 class="logo">AquaNote</h1>
    <ul class="navi">
        <li class="search"><a href="#" class="js-header-search-toggle"><i class="fa fa-search"></i></a></li>
        <li><a href="#">Login</a></li>
    </ul>
</header>

<div class="main-content">
    {% block body %}{% endblock %}
</div>

<div class="footer">
    <p class="footer-text">Made with <span class="heart"><3</span> <a href="https://knpuniversity.com">KnpUniversity</a></p>
</div>

{% block javascripts %}
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="{{ asset('js/main.js') }}"></script>
{% endblock %}
</body>
</html>

twig 简单的树枝形式

simple_form.html.twig

{{ form_start(form, {
    'attr': {
        'class': 'form-inline',
        'novalidate': 'novalidate'
    }
}) }}
    {{ form_errors(form) }}
    {{ form_row(form.item, {
        'label': 'What did you lift?',
        'label_attr': {'class': 'sr-only'}
    }) }}
    {{ form_row(form.reps, {
        'label': 'How many times?',
        'label_attr': {'class': 'sr-only'},
        'attr': {'placeholder': 'How many times?'}
    }) }}
    <button type="submit" class="btn btn-primary">I Lifted it!</button>
{{ form_end(form) }}

twig Anouncement Banner

announcement.scss

.block-views-blockemergency-announcement-block-1 {
  position: relative;
  margin: -2rem -1rem 0;
}

.block-announcement {
  background-color: $coolidge-red;
  padding: 1rem;

  &__title {
    @include one-element-size(h4);
    color: $coolidge-white;
    display: inline-block;
    font-family: $font-rawson-bold;

    .fa {
      margin-right: .5rem;
    }
  }

  &__body {
    @include one-element-size();
    color: $coolidge-white;
    display: inline-block;
  }
}

announcement.html.twig

{#
/**
 * @file
 * Theme file to display Announcements
 *
 * Available variables:
 * - announcement_title: The title of this block
 * - announcement_body: The content of this block
 */
#}

<div class="block-announcement">
  <div class="block-announcement__title"><i class="fa fa-bullhorn" aria-hidden="true"></i>{{ announcement_title }}:</div>
  <div class="block-announcement__body">{{ announcement_body }}</div>
</div>

twig 自定义社交媒体共享按钮

使用自定义图标进行Facebook和Twitter的简单解决方案，同时仍然使用弹出共享界面<br/> <br/>来源：kat@pixeldesigns.ca

script.js

function windowPopup(url, width, height) {
    var left = (screen.width / 2) - (width / 2),
        top = (screen.height / 2) - (height / 2);

    window.open(
        url,
        "",
        "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
    );
}

$(".js-social-share").on("click", function(e) {
  e.preventDefault();
  windowPopup($(this).attr("href"), 500, 300);
});

social-links.twig

<a class="js-social-share blog-post__share-link blog-post__share-link--facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ post_share_url }}" target="_blank">
  <span class="icon-facebook"></span>
</a>

<a class="js-social-share blog-post__share-link blog-post__share-link--twitter" href="https://twitter.com/intent/tweet/?text={{ post_share_title }}&url={{ post_share_url }}&via=janellemorrison" target="_blank">
  <span class="icon-twitter"></span>
</a>

twig 在Twig中包含带变量的文件

include-with-variables.twig

{% include 'partials/banner-page.twig' with { 'page_title': page_title, 'page_banner': page_banner } %}

twig 在木材中获取随机ACF中继器字段行

random-repeater-row.twig

{% set testimonial = random( options.testimonials ) %}

twig 自定义社交媒体共享按钮

使用自定义图标进行Facebook和Twitter的简单解决方案，同时仍然使用弹出共享界面<br/> <br/>来源：kat@pixeldesigns.ca

script.js

function windowPopup(url, width, height) {
    var left = (screen.width / 2) - (width / 2),
        top = (screen.height / 2) - (height / 2);

    window.open(
        url,
        "",
        "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,width=" + width + ",height=" + height + ",top=" + top + ",left=" + left
    );
}

$(".js-social-share").on("click", function(e) {
  e.preventDefault();
  windowPopup($(this).attr("href"), 500, 300);
});

links.twig

<a class="js-social-share blog-post__share-link blog-post__share-link--facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ post_share_url }}" target="_blank">
  <span class="icon-facebook"></span>
</a>

<a class="js-social-share blog-post__share-link blog-post__share-link--twitter" href="https://twitter.com/intent/tweet/?text={{ post_share_title }}&url={{ post_share_url }}&via=janellemorrison" target="_blank">
  <span class="icon-twitter"></span>
</a>