๐ English README | ็ฎไฝไธญๆ่ฏดๆ
A component for website automatic translation base on translate.js.
Whether the original site is multilingual or single-language, you can add automatic translation feature through this component.
- Multilingual Hugo site: fixit.lruihao.cn
- Single-language Hugo site: lruihao.cn
- FixIt v0.3.16 or later.
The installation method is the same as installing a theme. There are several ways to install, choose one, Here are two mainstream ways.
First make sure that your project itself is a Hugo module.
Then add this theme component to your hugo.toml
configuration file:
[module]
[[module.imports]]
path = "github.com/hugo-fixit/FixIt"
[[module.imports]]
path = "github.com/hugo-fixit/cmpt-translate"
On the first start of Hugo it will download the required files.
To update to the latest version of the module run:
hugo mod get -u
hugo mod tidy
Clone FixIt and this git repository into your theme folder and add it as submodules of your website directory.
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
git submodule add https://github.com/hugo-fixit/cmpt-translate.git themes/cmpt-translate
Next edit hugo.toml
of your project and add this theme component to your themes:
theme = ["FixIt", "cmpt-translate"]
In order to Inject the partial cmpt-translate.html
into the custom-assets
through the custom block opened by the FixIt theme in the layouts/partials/custom.html
file, you need to fill in the following necessary configurations:
[params]
[params.customPartials]
head = []
menuDesktop = [
"inject/translate-menu-desktop.html",
]
menuMobile = [
"inject/translate-menu-mobile.html",
]
profile = []
aside = []
comment = []
footer = []
widgets = []
assets = [
"inject/cmpt-translate.html",
]
postFooterBefore = []
postFooterAfter = []
In addition, you can customize the translated language through the following configuration:
[languages]
[languages.en]
languageCode = "en"
languageName = "English"
[params]
[params.autoTranslate]
enable = true
service = 'client.edge'
languages = []
ignoreID = []
ignoreClass = []
ignoreTag = []
detectLocalLanguage = false
enable
: Whether to enable automatic translation.service
: The translation service provider, optional values areclient.edge
andtranslate.service
, see: Translation Service Provider.languages
: List of language ID to translate to, e.g.["english", "chinese_simplified", "chinese_traditional", ...]
, see the full language list: Full Language List.ignoreID
: Element IDs that needs to be ignored for translation.ignoreClass
: Class names that need to be ignored for translation.ignoreTag
: Tag names that need to be ignored for translation.detectLocalLanguage
: Whether to detect the local language.
Note
To avoid translation language acquisition failure, even if your site itself is single-language, you need to configure languageCode
and languageName
, for example:
[languages]
[languages.zh-cn]
languageCode = "en"
languageName = "English"
-
local
: Used to specify the local language of the current page, e.g.local: english
.The default local language is the same as the Hugo site configuration. If the actual language of a page is different from the site configuration, you can specify it through the
local
parameter.
If you can help implement the following features, please submit a PR.