README

简介

此模块提供了一个接口，可以将内容区域内的外文单词与音频描述和可选的文本定义关联起来。默认情况下，此模块附带通过https://maoridictionary.co.nz API翻译Te Reo Maori单词和表达式的必要接口。

要求

SilverStripe 5
maoridictionary.co.nz API密钥（如果使用默认的Te Reo Maori API）

安装

composer require dnadesign/silverstripe-audio-definition

如何使用

创建定义

在CMS中，打开音频定义界面，然后单击添加新内容。输入术语（可能是一个或多个单词）并选择它们所在的语种（默认情况下，只有选项为毛利语）。

如果您正在使用API并且已正确设置，则在保存时应填充链接到音频文件和文本定义。如果没有提供API，您可以手动添加文本定义。

在内容区域中插入定义

此模块向默认的Silverstripe文本编辑器（目前为TinyMCE 6）添加了一个按钮，允许用户插入一个将渲染音频定义的短代码。要添加短代码，选择您希望与定义关联的单词，单击音频定义按钮并选择正确的术语。如果选定的文本与任何音频定义术语匹配，则默认选中。

自定义定义外观

默认情况下，渲染的定义是一个具有正确lang属性的span。此外，如果提供了音频文件，则按钮将位于单词之前，单击时将播放音频。

建议您覆盖DNADesign\AudioDefinition\AudioDefinition模板以满足您的需求。例如，您可以在用户将鼠标悬停在单词上时显示的提示框中添加文本定义。

以下是一个使用tippy.js的示例

<%-- Keep outer span for accessibility, aria-expanded will be added to it by tippy --%>
<% if $DefinitionsToDisplay %>
<span class="audiodef-wrapper">
    <span tabindex="0" role="button" class="audio-definition-button" lang="$LangAttr" data-tooltip-trigger aria-expanded="false">$Content.RAW</span>
    <span class="tooltip-template audiodef-tooltip" style="display: none;" data-tippy-theme="wreda-theme--light">
        <button class="tooltip-close button-close" data-tooltip-close aria-label="close">$SVG('cross')</button>
        <span class="audiodef-tooltip__title">
            <% if $LinkToAudioFile %><button class="audiodef-trigger button-speaker" aria-controls="audiodef-player-{$ID}" type="button" aria-label="pronounce">$SVG('speaker')</button><% end_if %>
            <dfn>$Term</dfn>
        </span>
        <% if $DefinitionsToDisplay %>
            <% loop $DefinitionsToDisplay %>
                <span class="audiodef-tooltip__definition">
                    <span class="audiodef-tooltip__definition-content">$Content.RAW</span>
                    <span class="audiodef-tooltip__definition-type">$Top.LanguageName | $Type</span>
                </span>
            <% end_loop %>
        <% end_if %>
    </span>
<span>
<%-- Keep audio player outside the tippy template as it gets duplicated --%>
<% if $LinkToAudioFile %>
    <audio id="audiodef-player-{$ID}" crossorigin="anonymous">
        <source src="$LinkToAudioFile" type="audio/mpeg">
    </audio>
<% end_if %>
<% else %>
    $Content.RAW
<% end_if %>

添加不同的语言/翻译者

如果您想在创建定义时选择不同的语言，您可以通过配置在音频定义源中添加一个新的区域设置。

DNADesign\AudioDefinition\Models\AudioDefinition:
  sources:
    es_ES: 'SpanishTranslationServiceClass'

翻译服务是可选的。如果您选择使用，则可以创建一个新的服务，该服务必须实现DNADesign\AudioDefinition\Services。此类必须定义一个返回数组的getDefinitionAndAudio方法，该数组必须包含

$data = [
    'audioSrc' => 'Link to audio file',
    'definitions' => [
        [
            'id' => 'Unique id of the definition (optional),
            'type' => 'Eg: noun, verb (optional),
            'content' => 'The text definition'
        ]
    ]
]

扩展

上下文扩展

某些语言可以根据上下文对同一个单词有多个文本定义。要使用关键词标记不同的文本定义以表示上下文，请按以下方式激活该地区的上下文扩展

DNADesign\AudioDefinition\Models\TextDefinition:
  use_context_for_locales:
    - mi_NZ

激活后，用户可以在“音频定义”>“上下文”选项卡中创建上下文，然后使用一个或多个上下文标记文本定义。这不会影响默认情况下定义的显示方式，但如果您实现了显示文本定义的方法，则可以按上下文进行筛选。

注意：如果至少有一个文本定义被标记了上下文，WYSIWYG 下拉菜单将提供带有上下文的单词选项。如果需要显示所有定义的单词，则每个定义都需要标记为“默认”上下文。

注意：在安装模块后运行 dev/build 之前添加上下文配置，您需要运行 dev/build 两次才能创建所有表。

注意事项

图标由Pixel perfect在www.flaticon.com创作

dnadesign / silverstripe-audio-definition

维护者

详细信息