如何将Algolia记录中的项目转换为模板

时间:2018-03-05 18:42:43

标签: mustache algolia hugo instantsearch.js

您好我正在尝试为点击小工具创建模板。

这里的示例是我的项目记录结构

categories  [xxx]
date    1445165400
description "blah blah blah"
image   "/image/content/2015/10/xxx.jpg"
lastmod 1519151656
objectID    "xxx"
permalink   "http://example.com/xxx/"
publishdate "2015-10-18T10:50:00Z"
relpermalink    "/xxx/"
section "blog"
summary "blah blah blah"
tags    […]
title   "Lorem Ipsum"
type    "blog"
url "/xxx/"
weight  0

我使用instantsearch.js和mustache.js进行模板化。

这是我的点击模板

<script type="text/html" id="hit-template">
  <div class="hit">
    <div class="hit-image">
      <img src="{{ "{{image}}" }}">
    </div>
    <div class="hit-content">      
      <a class="hit-url" href="{{url}}">
      <h2 class="hit-name">{{ "{{title}}" }}</h2>
      </a>
      <p class="hit-description">{{ "{{{_highlightResult.summary.value}}}" }}</p>
    </div>
  </div>  
</script>

我使用雨果所以我必须用括号和双引号包裹musctahe

标题和说明应该是,但不是图像和网址。

这是结果

<div class="ais-hits--item">
  <div class="hit">
    <div class="hit-image">
      <img src="%7b%7bimage%7d%7d" alt="">
    </div>
    <div class="hit-content">      
      <a class="hit-url" href="%7b%7burl%7d%7d">
      <h2 class="hit-name">My Post Title</h2>
      </a>
      <p class="hit-description">lorem blah blah blah <em>highlihted keyword</em> <em>highlihted keyword</em> blah blah blah</p>
    </div>
  </div>  
</div>

我想知道如何获取图片和网址价值?

更新

我希望小胡子模板能够呈现应有的值,从上面的示例中,胡子无法在hrefsrc内呈现值,但经过一些试验后我发现没有回忆关于Mustache模板中的HTML属性,所以我假设Mustache和Hugo之间存在冲突,这使得Mustache模板无法呈现值。

我最终在Hugo中意识到(特别是在href内部和src atributes的情况下)我必须用奇怪的方式包装HTML标签和小胡子。

如果某人有相同的经历(使用Hugo和Mustache),这里有解决方法

{{ safeHTML "<a href=\"{{permalink}}\">" }} 

干杯

0 个答案:

没有答案