npm 包 ember-fr-markdown-file 使用教程

前言

在 web 应用中，以 markdown 格式来展示文本已经是习以为常的做法之一。而在 ember.js 中，使用 ember-cli-markdown-file-contents 插件可以轻松地实现这个功能。

但是该插件在加载远程 markdown 文件时可能存在一些性能问题，对于一些大型的文档网站而言，这是不可接受的。为了优化这些场景下的性能，我们可以使用 ember-fr-markdown-file 这个 npm 包来实现更优秀的加载体验。

安装

使用以下命令安装 ember-fr-markdown-file 包：

npm install --save-dev ember-fr-markdown-file

使用

在模板中使用

要在模板中使用 ember-fr-markdown-file，我们需要将 markdown-file 组件导入：

{{markdown-file path='sample.md'}}

path 属性指定了 markdown 文件的位置。相对于应用根目录的位置（类似于 app/templates）。在该位置下，我们可以创建任意数量的 markdown 文件，并在需要展示的位置指定路径即可。

markdown 文件的加载和缓存

ember-fr-markdown-file 会自动缓存已经加载的 markdown 文件，以减少每次文件加载的性能消耗。

如果你需要强制重新加载 markdown 文件，可以通过传递 reload=true 属性的方式来实现：

{{markdown-file path='sample.md' reload=true}}

使用 Yaml Front Matter

如果在 markdown 文件开头添加了 Yaml Front Matter，ember-fr-markdown-file 会自动提取该信息并将其注入到组件的 frontMatter 属性中。以下是一个例子：

---
title: "My Blog Post"
date: "2019-05-31"
---

# This is my blog post

在程序中，我们可以像这样访问 frontMatter 对象：

<h1>{{frontMatter.title}}</h1>
<p>{{frontMatter.date}}</p>

文件不存在的错误处理

当指定的 markdown 文件不存在时，ember-fr-markdown-file 组件会自动显示一个简单的错误消息。如果我们想要自定义这个消息，可以将 not-found 描述符传递给组件，比如：

{{markdown-file not-found="@import 'my-custom-file-not-found'"}}

// my-custom-file-not-found.scss
@import "my-components";

.error-message {
  color: red;
  font-weight: bold;
}

在程序中，我们可以像这样使用：

<div class="no-data-display">
  {{markdown-file path='missing-file.md' not-found="@import 'my-custom-file-not-found'"}}
</div>

其他

为了更好的设计 ember-fr-markdown-file 的界面，我们可以使用以下组件：

• markdown-file-content 表示已经解析的 markdown 文件内容，可以获得 markdown 文件内容的 HTML 格式。
• markdown-file-loading 表示正在加载中的 UI 界面。
• markdown-file-error 表示 markdown 文件加载失败后的错误信息。

以下是一个完整的代码示例：

-- -------------------- ---- -------
----- --- ----- ------------
  ---------------------------------- -------- -- ---------------------------------
------ -- --- ----- -----------
  ---- ----------------------
    -------------------------
  ------
------ -- --- ----- ----------
  ------------------------------ -- ---- -------- ---------------------------------
-------

结论

通过使用 ember-fr-markdown-file 这个 npm 包，我们可以轻松优化并改善 Web 应用中的加载性能体验，以及在展示 markdown 文件时获得更强大的功能支持。同时，优秀的组件化设计也让我们能够自由定制界面，具备更好的可扩展性。

参考资料：

• ember-fr-markdown-file GitHub 仓库
• Yaml Front Matter
• Creating a markdown component in ember.js
• Introduce frontend-markdown-files-addon

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb4d