markdown 集成Pattern Lab和WordPress（Timber / Twig）

Posted 2021-05-05

<?php
/**
 * Template Name: Listing Page
 */
$context = Timber::get_context();
$post = new TimberPost();
$context['post'] = $post;
$context['title'] = $post->get_title();

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

$listing_args = array(
    // 'posts_per_page' => -1,
    'posts_per_page' => (get_field('posts_per_page')) ? (int)get_field('posts_per_page') : 12,
    'post_type' => get_field('post_type'),
    'paged' => $paged,
    'orderby' => (get_field('orderby')) ? get_field('orderby') : 'date',
    'order' => (get_field('sort')) ? get_field('sort') : 'ASC',
    'ignore_sticky_posts' => true,
    'has_password' => FALSE,
);


// This stuff needs to happen before the query
if (get_field('post_type') == 'post') {
    $tax_slug = 'category';
    if (get_field('stories_switch') == 'true') {
        // echo("we're looking for stories");
        if (!empty($_GET['category'])) {
            $queryCategory = $_GET['category'];
            $tax_term = $queryCategory;
            $tax_field = 'slug';
            $context['current_category'] = get_category_by_slug($queryCategory);
        }
    } else {
        // echo("we're looking for posts");
        $tax_term = get_field('post_cat');
    }    
} elseif (get_field('post_type') == 'faq') {
    // echo("we're looking for faqs");
    $tax_slug = 'post_tag_inm';
    $tax_term = get_field('faq_tag');
   
} elseif (get_field('post_type') == 'partner') {
    // echo("we're looking for partners");
    $tax_slug = 'partner_type';
    $tax_term = get_field('partner_cat');

} elseif (get_field('post_type') == 'person') {
    // echo("we're looking for people");
    $tax_slug = 'person_role';
    $tax_term =get_field('person_cat');
}

if (!empty($tax_term)) {
    // echo("hey, the tax_term isn't empty!");
    $listing_args['tax_query']  = [
        [
            'taxonomy' => $tax_slug,
            'terms' => $tax_term,
            'field' => !empty($tax_field) ? $tax_field : 'term_id'
        ]
    ];
} 


if (get_field('post_type') != 'video') {
    // Here's the QUERY!!!
    // $context['listing_items'] = Timber::get_posts($test_args);
    $context['listing_items'] = Timber::get_posts($listing_args);
} else {
    $context['listing_items'] = get_field('videos');
}

// And the pagination:
// query_posts($test_args);
query_posts($listing_args);
$context['pagination'] = Timber::get_pagination();


// Ok, now we need to translate the query data for our dumb templates. Some stuff is specific per post type...

if (get_field('post_type') != 'video') {
    // Get all the category names and links for each item and format them for the twig template :)
    foreach($context['listing_items'] as &$listing_item) {
        // Do whatever processing is needed to display the item.
        
        $terms = get_the_terms( $listing_item->id, $tax_slug );
        if(!empty($terms)) {
            $listing_item->labels = [];
            if (get_field('post_type') == 'post' && get_field('stories_switch') == 'true') {
                foreach($terms as $term) {
                    $listing_item->labels[] = [
                        'label' => $term->name, 
                        'link' => get_page_link() . '?category=' . $term->slug
                    ];
                }
            } else {
                foreach($terms as $term) {
                    $listing_item->labels[] = [
                        'label' => $term->name
                    ];
                }
            }
        }
        if (!empty($listing_item->get_field('social_media_links'))) {
            $listing_item->social_links = $listing_item->get_field('social_media_links');
        }
        $listing_item->teaser = $listing_item->preview();
        if(get_field('post_type') == 'partner') {
            $listing_item->image = wp_get_attachment_image( get_post_thumbnail_id($listing_item->id), 'logo');  
        } else {
            $listing_item->image = wp_get_attachment_image( get_post_thumbnail_id($listing_item->id), 'squarish', null , [ "sizes" => "(min-width: 992px) 25vw, (min-width: 768px) 33vw, (min-width: 576px) 50vw, 100vw"]);
        }
    }
} 
else {
    foreach ($context['listing_items'] as &$listing_item) {
        $listing_item['post_type']  = 'video';
    }
}

// We HAVE to unset the reference from our foreach loop or it will overwrite the last item in the results with the 2nd to last item!
// http://schlueters.de/blog/archives/141-References-and-foreach.html 
unset($listing_item);



// the story page gets post categories in the place of the local menu
if (get_field('post_type') == 'post' && get_field('stories_switch') == 'true') {
    $categories = get_categories( array(
        'orderby' => 'name',
        'order'   => 'ASC',
        'hide_empty' => '1'
        ) );
    
    $local_menu = [[
        'title' => 'All',
        'link' => get_page_link()
    ]];
    
    foreach($categories as $category) {
        $local_menu[] = [
            'title' => $category -> name,
            'link' => get_page_link() . '?category=' . $category -> slug
        ];
    }

} else {
    // other pages get to choose a menu
    if($post->get_field('local_menu')) {
        $local_menu_items = new TimberMenu($post->get_field('local_menu'));

        $local_menu = [];
    
        foreach($local_menu_items->items as $local_menu_item) {
            $local_menu[] = [
            'title' => $local_menu_item->name,
            'link' => $local_menu_item->url
            ];
        }
    }
}

if (!empty($local_menu)) {
    $context['local_menu'] = $local_menu;
}

$context['listing_page_description'] = $post->get_field('listing_page_description');

Timber::render( array( 'page/page-listing.twig'), $context );

1.   Create a patterns directory in the theme directory.
2.   Install Pattern Lab into that directory.    
    a. `composer install`   
    b. `npm install`
3.   Pattern Lab will create all kinds of sub-directories, such as public and _patterns.
4.   Add the _patterns directory as a source in your gulpfile, so that gulp will check the js and scss. (Use globbing so the scss and js files can live in their appropriate atomic folders.) Also add css and js outputs so gulp is outputting both to the regular theme folder (for WP) and to the _patterns folder (for PL).
5.   Add the generated css and js files to _meta/_00-head.twig so PL can see them.
6.   In templates, don't include the header and footer in the homepage template.
7.   In examples, create a template (we call it lab base) that has blocks for the header, footer, sidebars, etc (all the WordPress-y things we know and love)
8.   In examples, create a homepage template that extends lab-base.