4
我试图弄清楚如何将有针对性的CSS样式应用于博客列表输出中的ODD和EVEN博客文章。特别是，奇数上的白色背景和偶数上的浅灰色背景。有没有办法做到这一点？对不起，什么是可能对提供的代码矫枉过正（我是小白）向（Shopify）中的ODD/EVEN博客文章应用不同的类
<!-- /templates/blog.liquid -->
{% comment %}
Loop through a defined number of articles with the 'paginate' tag.
Don't forget to close the tag after your loop.
{% include 'blog-slider' %}
{% include 'blog-grid' %}
{% endcomment %}
{% paginate blog.articles by 9 %}
<section class="collection blog">
<div class="wrapper">
<header class="content-util">
{% include 'breadcrumb' %}
{% include 'social-icons' %}
</header>
<div class="grid">
<div class="collection-container blog-container">
{% comment %}
<header class="collection-header">
<div class="container">
{% if current_tags %}
<h1>{{ blog.title | link_to: blog.url }} — {{ current_tags.first }}</h1>
{% else %}
<h1>{{ blog.title }}</h1>
{% endif %}
</div>
</header>
{% endcomment %}
{% comment %}
<div class="mobile-aside-container">
<a href="#" class="button simple">{{ 'layout.navigation.blog_menu' | t}}</a>
<aside>
{% include 'blog-sidebar' %}
</aside>
</div>
{% endcomment %}
<div class="blog-list">
{% for article in blog.articles %}
<article>
<header>
<h2><a href="{{ article.url }}">{{ article.title }}</a></h2>
{% capture author %}<strong>{{ article.author }}</strong>{% endcapture %}
{% capture date %}<time datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: format: 'month_day_year' }}</time>{% endcapture %}
<p class="byline">{{ 'blogs.article.author_on_date_html' | t: author: author, date: date }}</p>
</header>
{% if article.image %}
<div class="article-image">
<a href="{{ article.url }}"><img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.title }}"></a>
</div>
{% endif %}
<section>
{% comment %}
Add a surrounding div with class 'rte' to anything that will come from the rich text editor.
Since this is just a listing page, you can either use the excerpt or truncate the full article.
{% endcomment %}
<div class="rte">
{% if article.excerpt.size > 0 %}
{{ article.excerpt }}
<p class="read-more"><a href="{{ article.url }}" class="button outline">{{ 'blogs.article.read_more' | t }}</a></p>
{% else %}
<p>{{ article.content }}</p>
{% endif %}
</div>
{% comment %}
Show off meta information like number of comments and tags.
{% endcomment %}
<div class="post-meta">
{% if blog.comments_enabled? %}
<a href="{{ article.url }}#Comments" class="comments">{{ 'blogs.comments.comments_with_count' | t: count: article.comments_count }}</a>
{% endif %}
{% include 'tags-article' %}
</div>
</section>
</article>
{% endfor %}
</div>
{% if paginate.pages > 1 %}
<footer class="collection-footer">
{% include 'pagination' %}
</footer>
{% endif %}
</div>
<div class="aside-container">
<aside>
{% include 'blog-sidebar' %}
</aside>
</div>
</div>
</div>
</section>
{% endpaginate %}/*============================================================================
#Blog
==============================================================================*/
.recent-posts-collection {
padding: $verticalContainerPadding 20px;
background-color: $blogBackgroundColor;
{% if settings.homepage_show_borders %}
border-bottom: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
{% endif %}
@include mediaQuery($max, $mobile) {
padding: 20px;
}
.wrapper {
@if $blogFullWidth {
@include outer-container();
} @else {
@include outer-container($siteWidth);
}
}
.wrapper > header {
@include clearfix();
position: relative;
margin-bottom: 20px;
border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%);
h4 {
//float: left;
margin: 0;
line-height: 2;
font-size: em(28px);
text-transform: $primaryTitleTextTransform;
font-weight: $primaryTitleTextWeight;
}
a.button.outline {
position: absolute;
top: 50%;
right: 0;
@include transform(translateY(-50%));
@include buttonOutline;
}
@include mediaQuery($max, $mobile) {
text-align: center;
a.button.outline {
position: relative;
@include transform(translateY(0));
}
padding-bottom: 20px;
}
}
.recent-posts-container {
@include grid();
}
&.layout-2 {
article {
@include grid-item(6);
@include mediaQuery($max, $mobile) {
@include grid-item(12);
}
}
}
&.layout-3 {
article {
@include grid-item(4);
@include mediaQuery($max, $tablet) {
@include grid-item(6);
&:nth-of-type(3n){
display: none;
}
}
@include mediaQuery($max, $mobile) {
@include grid-item(12);
&:nth-of-type(3n){
display: block;
}
}
}
}
article {
@extend %blog-article;
header {
text-align: center;
}
.article-image {
margin-bottom: 4px;
}
section {
font-size: 15px;
}
time {
position: relative;
top: -6px;
font-family: $navFontStack;
//font-weight: $siteHeaderNavTextWeight;
text-transform: $siteHeaderNavTextTransform;
font-size: em(11px);
}
@include mediaQuery($max, $mobile) {
@include grid-item(12);
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid mix($primaryTitleColor, $primaryBackgroundColor, 10%);
&:last-of-type {
padding-bottom: 0;
border-bottom: 0;
}
}
}
}
.blog-list,
.blog-permalink {
article {
@extend %blog-article;
margin: $verticalContainerPadding 0 0;
&:last-of-type {
border-bottom: 0;
padding-bottom: 0;
}
header {
text-align: center;
margin-bottom: 20px;
}
a.button.outline {
display: inline-block;
@include buttonOutline;
margin-top: 10px;
}
footer {
.pagination {
margin-top: 20px;
}
}
}
}
.blog-list {
article {
margin: $verticalContainerPadding 0 20px;
padding-bottom: 40px;
}
}
// Extend Product Thumbnail
%blog-article {
header {
h1,
h2 {
font-weight: $blogTitleTextWeight;
font-size: em(40px);
margin-bottom: 0;
font-weight: normal;
a {
color: $primaryTitleColor;
&:hover,
&:focus {
color: $primaryHoverColor;
}
}
@include mediaQuery($max, $tablet) {
font-size: em(28px);
}
@include mediaQuery($max, $mobile) {
font-size: em(24px);
}
}
h5 {
font-weight: $blogTitleTextWeight;
font-size: em(22px);
margin-bottom: 0;
a {
color: $primaryTextColor;
&:hover {
color: $primaryHoverColor;
}
}
}
p.byline {
font-family: $navFontStack;
//font-weight: $siteHeaderNavTextWeight;
text-transform: $siteHeaderNavTextTransform;
font-size: em(11px);
}
}
.article-image {
margin: 0 0 ($gutter/2) 0;
img {
display: block;
margin: 0 auto;
}
}
section {
img {
display: block;
max-width: 100%;
margin: 0 auto 26px;
height: auto;
}
p {
img {
margin: 0 auto;
}
}
p:last-of-type {
margin-bottom: em(8px);
}
a.button.outline {
margin-top: 0px;
}
.post-meta {
margin-top: 20px;
padding-top: 10px;
border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
display: table;
width: 100%;
a.comments {
color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
font-family: $navFontStack;
//font-weight: $siteHeaderNavTextWeight;
text-transform: $siteHeaderNavTextTransform;
font-size: em(12px);
text-decoration: none;
min-width: 120px;
display: table-cell;
&:hover {
color: $primaryHoverColor;
}
}
ul.tags {
text-align: right;
display: table-cell;
li {
display: inline-block;
color: mix($primaryTextColor, $primaryBackgroundColor, 70%);
font-family: $navFontStack;
text-transform: $siteHeaderNavTextTransform;
font-size: em(12px);
&:last-child {
a {
margin-right: 8px;
}
}
a {
@include buttonOutline;
padding: 4px 0;
font-size: 0.875em;
border: none;
box-shadow: 8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%), -8px 0 0 mix($primaryTextColor, $primaryBackgroundColor, 10%);
background-color: mix($primaryTextColor, $primaryBackgroundColor, 10%);
margin-right: 8px;
margin-left: 10px;
&:hover {
color: $primaryTextOnAccentColor;
background-color: $primaryAccentColor;
border-color: $primaryAccentColor;
box-shadow: 8px 0 0 $primaryAccentColor, -8px 0 0 $primaryAccentColor;
}
}
}
}
}
}
footer {
margin-top: 40px;
.comments-container {
margin: 40px 0 0;
padding: 40px;
border-top: 1px solid mix($primaryTextColor, $primaryBackgroundColor, 10%);
@include mediaQuery($max, $mobile) {
padding: 40px 0;
}
h3 {
text-align: center;
text-transform: $siteHeaderTitleTextTransform;
}
p.form-success {
text-align: center;
font-size: em(14px);
}
.comment {
padding: 20px;
background: $contentBoxBackgroundColor;
{% if settings.primary_dropshadow %}
box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
{% endif %}
font-size: em(14px);
margin-bottom: 20px;
p.author {
margin-bottom: .5em;
font-size: em(15px);
span {
font-weight: bold;
}
time {
font-style: italic;
}
}
}
.pagination {
margin-top: 0;
}
}
.add-comment {
padding: 0 40px;
margin: 20px auto 0;
max-width: 600px;
h3 {
text-align: center;
}
@include mediaQuery($max, $mobile) {
padding: 0;
}
}
}
}
[在列表项中使用CSS：even和：odd伪类]（http://stackoverflow.com/questions/5080699/using-css-even-and-odd-pseudo-classes-with-列表项） – Phil