使用RemarkJS内容类实现HTML+Markdown演示文稿的国际化

· 日常编程 · 145284

本教程详细阐述了如何利用RemarkJS的“内容类”功能，在单个HTML+Markdown文件中实现多语言演示文稿的国际化。通过为不同语言内容标记特定的CSS类，结合CSS样式控制和JavaScript逻辑，可以高效地在不同语言版本之间切换，从而避免多文件同步的难题，确保内容的一致性与维护便捷性。

在构建多语言演示文稿时，开发者常常面临一个挑战：如何高效地管理和同步不同语言版本的内容。尤其当演示文稿基于html和markdown（如使用remarkjs）时，为每种语言创建单独的文件（例如slides_fr.html和slides_en.html）会导致内容更新不同步、维护成本高昂的问题。remarkjs提供了一个优雅的解决方案——“内容类”（content classes），它允许我们在单个markdown源文件中集成多种语言的内容，并通过css和javascript实现动态切换。

RemarkJS内容类（Content Classes）解析

RemarkJS的“内容类”是其Markdown扩展语法的一部分，旨在为Markdown中的文本片段应用自定义的CSS类。其基本语法为：.className[文本内容]。

当RemarkJS解析包含这种语法的Markdown时，它会将其转换为带有指定CSS类的标签（或其他合适的HTML元素，取决于上下文）。例如：

  • Markdown: .highlight[重要信息]
  • HTML输出: 重要信息

这一特性是实现多语言的关键。我们可以为每种语言定义一个独特的CSS类（例如lang_en代表英语，lang_fr代表法语），然后将不同语言的文本分别包裹在对应的类中。

多语言内容的标记实践

利用内容类，我们可以将所有语言版本的文本内容都写在同一个Markdown源文件中。以下是一个示例，展示如何在RemarkJS的

.lang_en[# First Slide]
.lang_fr[# Première Diapositive]

.lang_en[Welcome to my presentation on **Internationalization** with RemarkJS!]
.lang_fr[欢迎观看我关于RemarkJS**国际化**的演示文稿！]

---

.lang_en[# Second Slide]
.lang_fr[# Seconde Diapositive]

.lang_en[This approach uses RemarkJS **Content Classes**.]
.lang_fr[这种方法利用了RemarkJS的**内容类**功能。]

.lang_en[It allows you to keep all language versions in a **single Markdown file**.]
.lang_fr[它允许您将所有语言版本保存在**一个Markdown文件**中。]

通过这种方式，所有语言的内容都集中在一个文件中，极大地简化了内容的管理和未来的同步更新。

CSS与JavaScript实现语言切换

内容标记完成后，我们需要通过CSS规则和JavaScript逻辑来控制不同语言内容的显示与隐藏。

CSS样式规则

首先，设置CSS规则以默认隐藏所有带有语言前缀的文本内容，然后仅显示当前选定语言的内容。

/* 默认隐藏所有带有 lang_ 前缀的元素 */
[class^="lang_"] {
    display: none;
}

/* 示例：默认显示英语内容。
   当JavaScript未加载或执行前，用户将看到此语言。 */
.lang_en {
    display: inline; /* 或 block，取决于文本的原始显示类型 */
}

/* 语言切换按钮的基本样式，可选 */
.lang-switcher {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100; /* 确保按钮在幻灯片之上 */
}
.lang-switcher button {
    margin-left: 5px;
    padding: 5px 10px;
    cursor: pointer;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    border-radius: 3px;
}
.lang-switcher button:hover {
    background-color: #e0e0e0;
}

JavaScript语言切换逻辑

JavaScript负责监听用户的语言选择，并动态地更新页面元素的显示状态。这通常涉及一个语言选择器（如按钮或下拉菜单）和一个处理切换逻辑的函数。

function setLanguage(langCode) {
    // 隐藏所有语言内容
    document.querySelectorAll('[class^="lang_"]').forEach(el => {
        el.style.display = 'none';
    });

    // 显示指定语言的内容
    document.querySelectorAll(`.lang_${langCode}`).forEach(el => {
        // 将 display 属性设置为空字符串，让元素恢复其默认的 display 行为
        // 例如，会是 inline，
会是 block
        el.style.display = '';
    });

    // 可选：更新UI以反映当前语言
    // 例如，高亮当前选中的语言按钮
    document.querySelectorAll('.lang-switcher button').forEach(button => {
        if (button.id === `lang${langCode.charAt(0).toUpperCase() + langCode.slice(1)}`) {
            button.style.fontWeight = 'bold';
            button.style.backgroundColor = '#d0d0d0';
        } else {
            button.style.fontWeight = 'normal';
            button.style.backgroundColor = '#f0f0f0';
        }
    });
}

// 页面加载完成后执行初始化和事件绑定
document.addEventListener('DOMContentLoaded', () => {
    // 默认设置语言（例如，从URL参数、浏览器设置或默认值获取）
    // 这里我们默认显示英语
    setLanguage('en');

    // 为语言切换按钮添加事件监听器
    document.getElementById('langEn').addEventListener('click', () => setLanguage('en'));
    document.getElementById('langFr').addEventListener('click', () => setLanguage('fr'));
});

整合示例

以下是一个将上述概念整合到完整RemarkJS演示文稿中的HTML结构示例：



    国际化RemarkJS演示文稿
    
    
        /* RemarkJS幻灯片内容的基本样式 */
        .remark-slide-content {
            font-family: 'Droid Serif';
            font-size: 20px;
            padding: 1em 2em;
        }

        /* 语言切换样式 */
        [class^="lang_"] {
            display: none; /* 默认隐藏所有语言内容 */
        }

        /* 默认显示英语内容，确保在JS加载前有内容可见 */
        .lang_en {
            display: inline;
        }

        /* 语言切换按钮样式 */
        .lang-switcher {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 100;
        }
        .lang-switcher button {
            margin-left: 5px;
            padding: 5px 10px;
            cursor: pointer;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            border-radius: 3px;
        }
        .lang-switcher button:hover {
            background-color: #e0e0e0;
        }
    


    
    

    
    

        
        
    


    
    
    
        // 初始化 RemarkJS 幻灯片
        var slideshow = remark.create();

        // 语言切换函数
        function setLanguage(langCode) {
            document.querySelectorAll('[class^="lang_"]').forEach(el => {
                el.style.display = 'none';
            });
            document.querySelectorAll(`.lang_${langCode}`).forEach(el => {
                el.style.display = ''; // 恢复元素默认的 display 属性
            });

            // 更新按钮样式
            document.querySelectorAll('.lang-switcher button').forEach(button => {
                if (button.id === `lang${langCode.charAt(0).toUpperCase() + langCode.slice(1)}`) {
                    button.style.fontWeight = 'bold';
                    button.style.backgroundColor = '#d0d0d0';
                } else {
                    button.style.fontWeight = 'normal';
                    button.style.backgroundColor = '#f0f0f0';
                }
            });
        }

        // 页面加载后设置默认语言并绑定事件
        document.addEventListener('DOMContentLoaded', () => {
            setLanguage('en'); // 默认显示英语

            document.getElementById('langEn').addEventListener('click', () => setLanguage('en'));
            document.getElementById('langFr').addEventListener('click', () => setLanguage('fr'));
        });

注意事项

  • 粒度选择： 内容类可以应用于任何粒度的文本，从单个单词到整个段落甚至幻灯片。根据内容的复杂性和重用性，合理选择标记的粒度。
  • 默认语言： 在CSS中设置一个默认显示的语言（如.lang_en { display: inline; }），以确保在JavaScript加载或执行失败时，用户至少能看到一个版本的幻灯片。
  • 性能考量： 对于包含大量文本和多种语言的超大型文档，频繁的DOM操作可能会对性能产生轻微影响。但对于一般的演示文稿，这种影响通常

以上就是使用RemarkJS内容类实现HTML+Markdown演示文稿的国际化的详细内容，更多请关注骃骐网【www.myinqi.com】。

相关推荐：

如何基于内容精准定位无标题的 ComboBox 控件

本文介绍在 pywinauto（uia 后端）中，当多个 combobox 缺乏唯一标识（如 title、automationid）时，如何通过索引定位并验证目标下拉框，避免 elementambiguouserror。 本文介绍在 pywinauto（uia 后端）中，当多个 combobox 缺乏唯一标识（如 title、automationid）时，如何通过索引定位并验证目标下拉框，避免 e...

使用 JavaScript 高效输出 HTML 内容

本文介绍了在 JavaScript 中避免重复使用 document.write() 输出 HTML 内容的几种方法，包括使用模板字符串和自定义函数。通过这些技巧，可以简化代码，提高可读性，并避免常见的引号和标签大小写错误，从而更高效地生成动态网页内容。 在 JavaScript 中，document.write() 方法用于将内容直接写入到 HTML 文档中。然而，当需要输出大量 HTML 结构...

JS如何提取字符串内容

答案：JS中提取特定模式字符串的最佳实践是使用正则表达式，因其能高效处理复杂模式匹配。对于结构化字符串，优先采用JSON.parse()等解析方法；面对嵌套结构，可结合栈或递归实现精准提取。 JavaScript里要从字符串里抠出想要的那部分内容，方法其实挺多的，核心无非就是定个范围、找个标志，或者干脆用模式匹配。最常用的就是 substring、slice、substr 这几个直接截取的，还有 ...

js 如何读取文件内容

浏览器中javascript无法直接访问本地文件系统，必须通过用户主动选择文件的方式，结合和filereader api来读取文件内容，确保安全性；2. 读取文本文件时使用reader.readastext()，读取图片等二进制文件可使用reader.readasdataurl()或reader.readasarraybuffer()；3. 在node.js环境中，可通过fs.readfile()...

解决CSS max-height 无法完全隐藏内容的问题

本文针对CSS中max-height属性在隐藏内容时可能出现的无法完全隐藏问题，提供了一种解决方案。通过移除隐藏状态下的padding，并在显示状态下重新添加padding，可以有效解决内容溢出的问题。此外，本文还提供了一段优化的JavaScript代码，用于简化“Read More”功能的实现。 在使用CSS的max-height属性来实现“Read More”或手风琴效果时，开发者可能会遇到一...

JS如何实现国际化？i18n的方案

JavaScript实现国际化的关键是将文本内容与代码逻辑分离，通过独立的资源文件（如JSON）存储多语言字符串，并利用成熟的库（如react-i18next、vue-i18n）动态加载和渲染对应语言的内容。这些库不仅支持基本的字符串替换，还基于ICU MessageFormat标准处理复数形式、变量插值，并封装JavaScript的Intl API来实现日期、数字的本地化格式化，确保不同语言环境...

春节手抄报内容素材

春节手抄报应融合年俗文化、传统故事与个人创意，选取贴春联、吃年夜饭、生肖故事等内容，搭配红金配色、剪纸、福字等传统元素，辅以诗词吉祥话，通过合理布局、手绘插图和深度聚焦某一主题，如地方年俗或春节美食，增强内容深度；结合家庭故事、新年愿望等个性化内容，融入互动设计或独特艺术形式，使手抄报兼具文化韵味与个人情感，真正展现独一无二的年味。 春节手抄报内容素材的选择，核心在于融合传统文化元素与个人创意，让...

如何程序化创建和管理 FancyBox 5 模态框的内容

本文详细介绍了如何使用 FancyBox 5 库以编程方式创建模态框并动态管理其内容。内容涵盖了通过引用现有 DOM 元素或直接传递 HTML/DOM 对象来初始化模态框，以及在模态框打开后更新其内容的常用方法，并提供了实用的代码示例和注意事项，帮助开发者有效利用 FancyBox 5 实现灵活的交互式弹窗。1. 程序化创建 FancyBox 模态框并设置初始内容 FancyBox 5 提供了 F...

国庆节手抄报内容素材

国庆节手抄报核心是庆祝祖国生日、展现爱国情怀，内容涵盖国庆由来（1949年10月1日新中国成立）、庆祝方式（升旗、阅兵、游行等）、爱国主题（英雄人物、名言诗歌）及对祖国的美好祝愿，通过图文并茂的设计培养孩子爱国主义精神与动手能力。 国庆节手抄报的核心是庆祝祖国生日，展现爱国情怀。内容围绕国庆节的由来、意义、庆祝方式以及对祖国的美好祝愿展开。 国庆节手抄报内容素材： 国庆节的由来与意义 1949年1...

JS如何读取文件内容

浏览器中JavaScript无法直接读取硬盘文件，需通过用户选择文件后使用FileReader API读取；Node.js中则可用fs模块直接操作。 在浏览器里，JavaScript想直接读取你硬盘上的文件？别想了，出于安全考量，浏览器根本不给这个权限。但也不是完全没辙，通常得靠用户自己点个按钮，选择文件后，我们才能通过FileReader API来摸到文件的内容。至于在Node.js这种服务端环...