README

维基百科预览

维基百科预览是一个JavaScript组件，允许您在任何网站上提供关于单词或短语的维基百科上下文。它允许您在读者悬停在链接上时显示一个包含维基百科简短摘要的弹出卡片。

任务和问题在 Phabricator 上跟踪。

Storybook: https://wikimedia.github.io/wikipedia-preview/main/storybook

兼容性

功能

与任何在维基百科上有文章的链接兼容
支持LTR和RTL语言
适用于带有或没有引言图片的文章

入门指南

将维基百科预览集成到您的网站包括三个步骤

加载wikipedia-preview.js（作为独立脚本、WordPress插件或npm依赖项）
调用 wikipediaPreview.init( <options> )
相应地注释文章

您可以在下面了解更多关于每个步骤的信息。一旦维基百科预览设置正确，您应该在JS控制台中看到版本信息被记录。您也可以在JS控制台中调用 wikipediaPreview.version() 以在任何时间查看版本信息。

WordPress插件

一个提供维基百科预览的WordPress插件，简化了在WordPress中的集成和使用，可在 GitHub 和 WordPress.org 上获得。

独立脚本

<script src="wikipedia-preview.umd.cjs"></script>
<script type="text/javascript">
  wikipediaPreview.init()
</script>

您可以直接提供文件或从 unpkg 中包含它（由于一个 MIME类型不匹配问题，库版本1.9.0及以后版本不能从Unpkg加载，目前的解决方案是添加?module参数以获取正确的内容类型）。

NPM

$ npm install wikipedia-preview --save

const wikipediaPreview = require('wikipedia-preview')
wikipediaPreview.init()

init函数的选项

init函数接受以下选项

示例（自定义选择器）

<p class="content">
	You can learn about <span class="wiki">Chat</span> and <span class="wiki">Chien</span> from Wikipedia.
</p>
<div class="popup-container"></div>

wikipediaPreview.init({
	root: document.querySelector('.content'),
	selector: '.wiki',
	popupContainer: '.popup-container',
	lang: 'fr'
});

示例（检测维基百科链接）

<p class="content">
	You can learn about <a href="https://en.wikipedia.org/wiki/Chat">Chat</a> and <a href="https://en.wikipedia.org/wiki/Chien">Chien</a> from Wikipedia.
</p>

wikipediaPreview.init({
	detectLinks: true
});

示例（自定义事件处理器）

wikipediaPreview.init({
	events: {
		onShow: function(title, lang, type) {
			// call custom instrumentation here
		},
		onWikiRead: function(title, lang) {
			// call custom instrumentation here
		}
	}
});

属性

data-wikipedia-preview

要指示一个单词或表达式应显示文章预览弹出窗口，请使用data-wikipedia-preview属性（只要您使用上述描述的selector选项即可）标记它。

data-wp-title

当文章标题与节点的textContent属性不同时，请使用data-wp-title属性来指定文章标题。

请注意，文章标题可以包含一个部分ID。例如：欧洲#古典时代

data-wp-lang

要使用与选项中指定的语言不同的语言，请使用data-wp-lang属性。

.wmf-wp-with-preview

要使用默认触发链接样式

将以下链接添加到页面标题中

<link href="wikipedia-preview-link.css" rel="stylesheet">

将类wmf-wp-with-preview添加到节点

如果您更喜欢以对您的上下文更有意义的方式对它们进行样式化，只需不在标题中包含wikipedia-preview-link.css链接，并将自己的类添加到节点即可。这两种方法都是有效的

[data-wikipedia-preview] {
	background-color: yellow;
}

.my-own-css-style {
	background-color: yellow;
}

CSS自定义属性

如果您想调整浅色/深色主题的样式，可以根据以下示例覆盖您喜欢的以下CSS自定义属性，以下是在适当的prefers-color-scheme查询下。

@media (prefers-color-scheme: dark) {
	.wikipediapreview {
		--wikipediapreview-primary-background-color: #202122;
		--wikipediapreview-secondary-background-color: #202122;
		--wikipediapreview-primary-color: #eaecf0;
		--wikipediapreview-filter-setting: invert(1);
	}
}

致谢/贡献者

此功能灵感主要来源于jquery.wikilookup和页面预览。

wikimedia / wikipedia-preview

维护者

详细信息