Customize Locale
This cookbook guides you to customize @waline/client
multilingual and display text.
Introduction
@waline/client
provides the locale
option, through which you can customize multiple languages and display text.
By default it uses the built-in multilingual literals and falls back to en-US
(English US) if the language is not supported.
You can pass a completed multilingual configuration to the locale
option to add language support, or set several of these to override existing UI text.
Locale Options
Level related:
level${number}
: Label for level number
Tips
For example, you can customize the labels for 6 levels like this:
Waline.init({ locale: { level0: '炼体', level1: '炼气', level2: '筑基', level3: '金丹', level4: '元婴', level5: '化神', }, });
Reaction related:
reactionTitle
: Reaction titlereaction0
: Reaction 1 textreaction1
: Reaction 2 textreaction2
: Reaction 3 textreaction3
: Reaction 4 textreaction4
: Reaction 5 textreaction5
: Reaction 6 textreaction6
: Reaction 7 textreaction7
: Reaction 8 textreaction8
: Reaction 9 text
UI related:
nick
: nicknamemail
: Emaillink
: Linkplaceholder
: Default text of comment boxsofa
: Display text when the comment area is emptysubmit
: Submit button textcomment
: Comment button textrefresh
: Refresh button textmore
: Load more button textuploading
: display text when uploadinglogin
: login button textadmin
: The label of the administratorsticky
: Sticky textword
: wordanonymous
: anonymous user default nameoptional
: text indicating optional optionsgifSearchPlaceholder
: emoji search placeholder textoldest
: oldest commentlatest
: latest commenthottest
: hottest comment
Info
The above text will be displayed in page.
Prompt information related:
nickError
: Error message that the nickname does not meet the conditionsmailError
: The error message that the mailbox does not meet the conditionswordHint
: Error prompt for comment word count, where$0
$1
$2
will be automatically replaced with the lower limit of the allowed word count, the upper limit of the allowed word count, and the current word count.
Comment time related:
seconds
: seconds agominutes
: minutes agohours
: hours agodays
: days agonow
: just now
Management related:
approved
: Button which marks comment as approvedwaiting
: Button which marks comment waiting for reviewspam
: Button which marks comments as spamunsticky
: Button which unsticky comment
Accessibility related:
like
: the label text of like buttoncancelLike
: the label text of the cancel like buttonreply
: the label text of the reply buttoncancelReply
: the label text of the cancel reply buttonpreview
: Preview button label textemoji
: the label text of the emoji buttongif
: The label text of Gif buttonuploadImage
: the label text of the upload image buttonprofile
: The link title of profile pagelogout
: the label text of the logout button
Info
These texts are only for accessibility purpose and will not be displayed on the page.
Example
// en default
const locale = {
nick: 'NickName',
nickError: 'NickName cannot be less than 3 bytes.',
mail: 'E-Mail',
mailError: 'Please confirm your email address.',
link: 'Website',
optional: 'Optional',
placeholder: 'Comment here...',
sofa: 'No comment yet.',
submit: 'Submit',
like: 'Like',
cancelLike: 'Cancel like',
reply: 'Reply',
cancelReply: 'Cancel reply',
comment: 'Comments',
refresh: 'Refresh',
more: 'Load More...',
preview: 'Preview',
emoji: 'Emoji',
uploadImage: 'Upload Image',
seconds: 'seconds ago',
minutes: 'minutes ago',
hours: 'hours ago',
days: 'days ago',
now: 'just now',
uploading: 'Uploading',
login: 'Login',
logout: 'logout',
admin: 'Admin',
sticky: 'Sticky',
word: 'Words',
wordHint:
'Please input comments between $0 and $1 words!\n Current word number: $2',
anonymous: 'Anonymous',
level0: 'Dwarves',
level1: 'Hobbits',
level2: 'Ents',
level3: 'Wizards',
level4: 'Elves',
level5: 'Maiar',
gif: 'GIF',
gifSearchPlaceholder: 'Search GIF',
profile: 'Profile',
approved: 'Approved',
waiting: 'Waiting',
spam: 'Spam',
unsticky: 'Unsticky',
oldest: 'Oldest',
latest: 'Latest',
hottest: 'Hottest',
reactionTitle: 'What do you think?',
};
Waline.init({
el: '#waline',
path: location.pathname,
serverURL: 'YOUR_SERVER_URL',
// ...
locale,
});