问题描述
一些 discord 服务器没有图标,discord 将图标呈现为公会名称中每个单词的第一个字符。我正在尝试使用 express 在车把中做到这一点。我执行了以下操作,但出错了。
<h1>Welcome,{{username}}!</h1>
<ul>
<h2>Your guilds</h2>
{{#each guilds as |key value|}}
<li>
{{#if key.icon}}
<img src="https://cdn.discordapp.com/icons/{{key.id}}/{{key.icon}}?size=64" alt="profile"> </p>{{key.name}}</p>
{{else}}
<div>
<h3>{{ key.name.match(/\b\w/g).join('') }}</h3>
<p>{{key.name}}</p>
</div>
{{/if}}
</li>
{{/each}}
</ul>
Error: Parse error on line 10:
... <h3>{{ key.name.match(/\b\w/g).join(
-----------------------^
Expecting 'ID',got 'INVALID'
解决方法
在 Handlebars 中,您可以使用自定义辅助函数来处理模板外的 javascript 逻辑。您应该在您的项目中进行两项更改以实现这一目标:
- 使用自定义帮助程序创建一个文件,通常位于项目的
helpers
文件夹中:
./helpers/hbs.js
function getFirstLetter(name) {
return name.match(/\b\w/g).join("");
}
module.exports = { getFirstLetter };
- 修改
app.js
中的把手中间件配置以使用您创建的自定义帮助程序:
./app.js
/**
* Import Handlebars
*/
const exphbs = require("express-handlebars");
/**
* Import Custom Helpers
*/
const hbs = require("./helpers/hbs");
/**
* Template Engine
*/
app.engine(
".hbs",exphbs({
... all configuration here...
helpers: hbs,// add custom helpers.
})
);
现在您可以像这样在模板中使用自定义助手:
<h1>Welcome,{{username}}!</h1>
<ul>
<h2>Your guilds</h2>
{{#each guilds as |key value|}}
<li>
{{#if key.icon}}
<img src="https://cdn.discordapp.com/icons/{{key.id}}/{{key.icon}}?size=64" alt="profile"> </p>{{key.name}}</p>
{{else}}
<div>
<h3>{{getFirstLetter key.name}}</h3>
<p>{{key.name}}</p>
</div>
{{/if}}
</li>
{{/each}}
</ul>