在基于 Jekyll 的博客中加入文字的注音

2020/07/24 日语 linux 共 1705 字,约 5 分钟

越来越多的人选择将博客托管在 GitHub page 或是国内的 Coding page,通过 Jekyll 将 markdown 排版的文章渲染为静态网页。 当一个 repo 被你设定为 GitHub page 时,GitHub 将检测 repo 的目录结构,如果符合 Jekyll 的特征,例如根目录下包含 _config.yml 配置时,GitHub 将在你 push 后自动进行在线构建。

查看 repo 的提交历史将能看到构建成功的消息,如果构建失败则会收到一封邮件报告。因此理论上我们在本地甚至不需要配置 Jekyll 环境,只需要保证 push 的内容具备让 GitHub 进行在线构建的条件即可。

在线构建的局限性

将构建的任务交给 GitHub 确实十分方便,也能满足绝大部分用户的需求。但我们注意到 GitHub 提供的在线构建服务并不支持所有 Jekyll 插件,支持列表可以在这里查询:https://pages.github.com/versions/

而很不幸的是,有一个插件对我来说是必不可少的,而它却不在支持列表中。这个插件是 jekyll-furigana,用于给文本注音,主要应用场景有:

日本語(にほんご ) 漢字(かんじ )() 仮名(がな ) 編集(へんしゅう )する

(zhōng )(wén )拼音注音

奇奇怪怪的用法(😀😁🤣😑🤨😮😶 )

幸运的是 GitHub page 支持关闭在线构建,代价则是用户必须在本地配置好 Jekyll 环境,构建、推送构建完成的静态网页到 GitHub page repo。

GitHub Pages cannot build sites using unsupported plugins. If you want to use unsupported plugins, generate your site locally and then push your site’s static files to GitHub.

配置 jekyll-furigana 插件

配置 Jekyll 插件的前提当然是配置好本地 Jekyll 环境。这里默认大家已经配置好了,如果还没配置的可以跟着官方文档做,这里只描述插件的配置方法。

  1. 在 Gemfile 中配置 jekyll-furigana 插件
     source 'https://rubygems.org'
     gem 'github-pages', group: :jekyll_plugins
     gem 'tzinfo-data'
     gem 'jekyll-furigana', group: :jekyll_plugins
    
  2. 安装
     $ bundle
    
  3. 在 Jekyll 配置文件 _config.yml 中的 plugins: 部分配置插件
     plugins:
         - jekyll-github-metadata
         - rouge
         - jekyll-paginate
         - jekyll-sitemap
         - jekyll-feed
         - jemoji
         - jekyll-furigana
    
  4. 在需要启用注音功能的 markdown 博客文件头中加入 furigana: true
     ---
     layout: post
     title: 在基于 Jekyll 的博客中加入文字的注音
     categories: [日语]
     furigana: true
     ---
    
  5. 修改 _layouts/post.html 中的 content 过滤器,加入 furigana 过滤器
    • 默认情况下是修改 post.html 文件,如果你的 markdown 文件头中的 layout 属性不是 post 那就要去修改对应的文件。

使用方法

jekyll-furigana 插件有多种使用格式,可选用下面任意一种。

他们在启用了插件的页面上,都将被渲染为:

日本語(にほんご)

编译静态网页推送到 GitHub page repo

在根目录下编译静态网页,输出到 ./docs

jekyll build --destination ./docs

docs 文件夹内的内容推送到 GitHub page repo

cd ./docs

git init

git add -A

git commit -m "test furigana"

git remote add origin https://your-repo-url.git

git push origin master

大约 2 分钟之后,即可打开网页检查插件是否生效。

最后,感谢你阅读文章。

文档信息

Search

    Table of Contents