菜单-一个bar.html

Question

我正在尝试创建一个下拉菜单，当用户在我的导航中悬停显示帐户信息（例如之前的订单）时。

我正在使用Stencil / Cornerstone。我已尝试使用

在page.html上声明一个Front Matter对象

---
customer: 
    orders: 
        limit 5
---

但这似乎不起作用，菜单拉客户订单的唯一地方是用户是否在帐户页面上。我需要在所有页面上都可以使用它，因为它是网站的主要导航。

菜单-一个bar.html

（摘录）

{{#if customer}}
    <li class="nav-page"><a href="/account.php">My Account</a>
        <div class="sub-menu">
            <div class="nav-col">
                <h4>Hello, {{customer.name}}</h4>
            </div>
            <div class="nav-col">
                <!-- orders -->
                <h5>Orders</h5>
                <ul class="account-order-list">
                    {{#if customer.orders}} {{#each customer.orders}}
                    <li><a href="{{details_url}}"><i class="fa fa-tag" aria-hidden="true"></i> Order #{{id}}</a>
                        <div class="order-details-list">
                            <a class="details" href="{{details_url}}">
                                <span><strong>Date:</strong> {{date}} </span>
                                <span><strong>Amount:</strong> {{total.formatted}} </span>
                                <span><strong>Status:</strong> {{status}}</a></span>

                        </div>
                    </li>
                    {{/each}} {{else}}
                    <span>You have no orders.</span> {{/if}}
                </ul>
            </div>
            <div class="nav-col">
                <h5></h5>
            </div>
        </div>
    </li>
    {{else}}
    <li class="nav-page"><a href="/login.php">Sign In</a></li>
    {{/if}}
</ul>

Answer 1

从jekyll / liquid的角度来看，如果你想要一个全局变量，你可以声明它：

1 - 在_config.yml

<html>
<head>
<style>
table {
    border-collapse: collapse;
}

table, td, th {
    border: 1px solid black;
}
</style>
</head>
<body>
	
	<table>
		<tr>
			<th rowspan="3">col1</th>
			<th rowspan="3">col2</th>
			<th>col3</th>
			<th>col4</th>
			<th>col5</th>
		</tr>
		<tr>
			<td>data1</td>
			<td>data2</td>
			<td>data3</td>
		</tr>
		<tr>
			<td>data1</td>
			<td>data2</td>
			<td>data3</td>
		</tr>
	</table>
	
</body>
</html>

并像这样使用它：customer: orders: limit: 5 # and not "limit 5"

2 - 或共同（对所有页面）布局，例如_layouts / default.html

它将在任何页面中显示：{{ site.customer.orders.limit }}

BigCommerce主题中所有页面上的Front Matter全局变量

菜单-一个bar.html

1 个答案: