教会最新消息
此工程包含 JavaScript 来显示特定主题的最新博客文章 .
使用量
使用节点包管理器安装此组件,然后在模板下连接JS文件,并设置.
- 通过纱线或 npm 安装
yarn add @canonical/latest-news
或者说...
npm install @canonical/latest-news --save
- 然后可以通过直接链接或通过ES6导入来安装库.
要直接消耗库, 请在 JS 文件上添加一个包含 IIFE 的链接, 并运行 `canonicalLatestNews. fetchLatestNews () 函数 :
<script src="/node_modules/@canonical/latest-news/dist/iife.js"></script>
<script>
canonicalLatestNews.fetchLatestNews({
/* options */
});
</script>
要导入它,只需从你全网站的JS文件中调用:
import { fetchLatestNews } from "@canonical/latest-news";
fetchLatestNews({
/* options */
});
模板
您需要一个遵循此结构的模板来显示最新的新闻种子 :
<div id="latest-news-container">
Loading...
</div>
<template style="display:none" id="articles-template">
<div class="article-image"></div>
<h4><a class="article-link article-title"></a></h4>
<p>
<em><time datetime="" class="article-time"></time></em>
</p>
<p class="article-author"></p>
</template>
脚本会寻找以下类名作为模板内内容的钩子:
article-time: 文章格式化为 2020年5月2日 (中文(简体) )article-link: 文章的永久链接article-title: 文章标题article-image:文章的外景图像article-excerpt:文章节选article-group: 文章的组article-author: 文章的作者
您可以选择要显示的内容, 以及它如何通过使用上述类来显示 。 如果您不想要某一部分的内容, 例如文章图像, 那么不包含一个包含类名的元素 article-image。 。 。 .
博客模式
您也可以使用 Jinja 模式将本模块获取的博客文章调用 Blog。关于该模式及其使用情况的更多信息可在 香草文档。 。 。 .
选项
您需要将一些选项传递到脚本上, 以便它知道模板的位置和应该向何处提供 。 它们是:
articlesContainerSelector: 字符串 - 显示物品的容器articleTemplateSelector: 字符串 - 文章将使用的模板allArticles: Boolean - 无论粘度状况如何, 都在同一列表中获取最新帖子, 因此所显示的( 粘度) 帖子包含在主容器中, 而不是被分割到聚光灯插槽中( 可选)groupId: 整数 - 返回特定组内的员额(可选)gtmEventLabel: String - Google 分析( 可选) 所用的事件标签hostname: String - 用于永久链接的可选主机名. 默认链接是相对的( 可选的)imageClasses: 矩阵 - 图像元素将添加的类列表(可选)limit: 整数 - 需要返回的员额数(可选)linkImage: Boolean - 将缩略图图像包入链接(可选)spotlightContainerSelector: 字符串 - 显示聚光灯文章的容器(可选)spotlightTemplateSelector: 字符串 - 用于聚光灯文章的模板(可选)tagId: 整数 - 有特定标记的返回站点(可选)tagIds: String(comma 已分出标签,即"id1",id2,id3") - 返回后所有标签的帖子(可选)excerptLength: 整数 - 指定节选(可选)中包含的字符的大致数量lazyLoadImage: Boolean - 为图像启用懒惰的加载功能来提高页面性能,只在图像进入取景口时才加载. 默认为真实( 可选)url: 字符串 - 默认的 API URL 是/blog/latest-news,但如果它应该是别的东西,你可以通过这个可选参数(可选参数)
大楼
将联署材料纳入 /dist 文件夹, 运行 :
yarn build
监视已更改的文件
yarn watch
运行测试
yarn test
释放过程
软件包使用 语义版本 并公布于国家预防机制登记册.
要剪切新发布运行 :
npm version [patch|minor|major]
这将触发 prepublishonly 脚本将确保在出版前建立必要的手工艺品.
代码许可LGPLv3 由Canonical Ltd.
和来自Canonical的..