标签: liquid-layout

假设我有 3 个类别，分别称为Food,Fruit和Milk，每个类别都包含特定的帖子。

导航栏显示 3 个链接到 3 个页面，根据类别类型列出所有帖子。例如，如果我点击链接Food，它会将我重定向到仅显示类别文章的页面Food。

我正在考虑创建一个布局，称为category.html在Food、Fruit和之间共享Milk。唯一的区别是我想撤出的帖子类型。

调用布局时，有没有办法从页面传递信息？

例如，在Food类别页面中，我将调用category.html布局，但也会传递一个变量（例如type = 'Food'），并且在布局中我将设置条件检查以仅提取与变量匹配的帖子type。

谁能给我一些建议？

在 shopify 主题中，我想在theme.liquid文件中集成以下引导程序链接。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

如何将引导程序集成到我的主题中？

在这个问题中,最受欢迎的答案是:

使用液体布局

为什么这被认为是一种好习惯？我的观点是,设计液体布局更加困难,因为从一个窗口大小到另一个窗口大小可能会有很大变化......额外的复杂性值得吗？做出选择时我应该考虑什么？

我正在尝试构建一个自适应的多列布局(流畅,有弹性,无论你想要它),并构建了一个测试文档来尝试这个想法.

我做了一些计算来得出数字,这些数字可以让x列在页面中并排放置.2很容易(50%),4(25%)和10(10%)也是如此.如果你考虑一个保证金来留下一个阴沟并减去它,那么你得到你需要的列宽.

一切似乎进展顺利,我构建了CSS和HTML(见下文)并在Firefox中试用了它并且一切正常.但是,当我在Opera,Chrome和Safari中试用它时,我遇到了一个问题.当彼此相邻放置时,列似乎总计不超过100%,它们似乎略微缩短.列数越多,问题就越严重.通过10列,问题非常明显.

为什么会这样？Firefox的行为是正确的,还是在其他浏览器中发生的事情是什么意思？更重要的是,我如何解决它在所有浏览器中产生一致的结果？

我已经构建了一个下面代码的JSFiddle,可以在这里找到.完整的测试页面也可在此处获得.(JSfiddle只是相关代码,而整页还有其他内容)

用于执行列的CSS如下:

.columnHolder {
    overflow: hidden;
    background: #EFE; /* For layout testing only! */
    margin: .5em 0;
    padding: 0;
}
.columnHolder h1 {
    background: #EFF; /* For layout testing only! */
}
.column {
    float: left;
    margin: .5%;
    background: #FFE; /* For layout testing only! */
    text-align: justify;
}
.column.half {
    width: 49%;
}
.column.third {
    width: 32.33333%
}
.column.quarter {
    width: 24%;
}
.column.fifth {
    width: 19%;
}
.column.sixth {
    width: …

我们正在使用 Shopify，我们有一个发票页面，其中显示了产品名称和其他数据。

我的问题是 product.title<br>在发票页面上显示标签。
（在产品页面标题上显示无<br>标签）

这样做的原因是product.title只能通过 WYSIWYG 输入。
其中 WYSIWYG 编码product.title为 ASCII 码并product.title在发票页面上解码。

我正在尝试使用带有语句的Liquid 字符串过滤器查找和替换/隐藏<br>标签，但它不起作用。如果我将更改为代码将用空格替换Dress。 请在下面找到我的代码的一部分。product.title
{{ product.title | replace: 'Awesome', 'Mega' }}{% if %}{% if line.title contains '<br>'%}{% if line.title contains 'Dress'%}

{% if line.title contains '<br>'%} {{ line.title | replace: '<br>', ' ' }} {% endif %}

<td class="order-list__product-description-cell" style="width:100%">
  {% if line.product.title %} {% assign line_title = …