Как добавить переводы для django сайта (python, js, шаблоны и модели) SearchResultParser ч. 5

Вступление

Как это вообще работает

1. Создать отдельный сайт с соответствующим доменом. По типу example.de. Это слишком дорого и не практично.
2. Добавить поддомен. По типу ru.example.com
3. Добавить директорию. По типу example.com/en/
4. Или использовать URL параметр example.com?loc=en

1. Помечаем(выделяем) необходимые строки для перевода.
2. Собираем все помеченные(выделенные) строки.
3. Пишем переводы для них
4. Компилируем специальный *.mo файл

Данные этапы не применимы при переводе и локализации django-моделей. У них своя специфика.

Базовая настройка

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

MIDDLEWARE = [

'django.middleware.security.SecurityMiddleware',

'django.contrib.sessions.middleware.SessionMiddleware',

'django.middleware.locale.LocaleMiddleware',

'django.middleware.common.CommonMiddleware',

'django.middleware.csrf.CsrfViewMiddleware',

'django.contrib.auth.middleware.AuthenticationMiddleware',

'django.contrib.messages.middleware.MessageMiddleware',

'django.middleware.clickjacking.XFrameOptionsMiddleware',

'corsheaders.middleware.CorsMiddleware',

# BY ALLAUTH

"allauth.account.middleware.AccountMiddleware",

]

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

LANGUAGE_CODE = 'en'

USE_I18N = True

LANGUAGES = [

('en', 'English'),

('ru', 'Russian'),

('de', 'German'),

('es', 'Spanish'),

('fr', 'French'),

('be', 'Belorussian')

]

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

from django.contrib import admin

from django.urls import path, include

from rest_framework import routers

from Backend import views

from django.conf.urls.i18n import i18n_patterns

router = routers.DefaultRouter()

router.register(r'results', views.BackendModelView, 'result')

urlpatterns = [

path('admin/', admin.site.urls),

path('api/', include(router.urls)),

# BY ALLAUTH

path('accounts/', include('allauth.urls')),

path("_allauth/", include("allauth.headless.urls")),

]

urlpatterns += i18n_patterns(

path('', include('Authentication.urls')),

path('', include('Frontend.urls')),

)

То, на какую версию локализации тебя перенаправит зависит от настроек твоего браузера. У меня вот стоит английская версия. Если у тебя браузер на языке, который не поддерживает сайт, например украинская мова, то перенаправление будет на ту локализацию, которая указана в LANGUAGE_CODE.

Выделяем строчки для перевода

Переводы в python коде

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

from django.utils.translation import gettext as _

from django.utils.translation import gettext_lazy as __

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

def translation_test():

str = _("Usual string")

var_for_str1 = "Variable for str1"

str1 = _(var_for_str1)

list_for_str2 = ['Variable', 'for', 'str2']

str2 = _("-".join(list_for_str2))

Переводы в шаблонах

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

{% load i18n %}

{% trans "YOUR TRANSLATION STRING" %}

{% blocktrans %}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis hendrerit arcu, vitae lacinia arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.

{% endblocktrans %}

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

{% extends 'Frontend/base.html' %}

{% load static %}

{% load i18n %}

{% block head %}

<title>SearchResultParser - {% trans "About this project" %}</title>

<meta name="description" content="">

<link rel="canonical" href="{% url 'about' %}">

{% endblock %}

{% block header %}

<div data-type="inner-link"><a href="{% url 'main' %}">{% trans "main" %}</a></div>

{% endblock %}

{% block main %}

<div class="flex flex-col w-full h-full justify-center items-center">

<div class="flex flex-col max-w-3xl text-justify gap-2 p-1">

<h1 class="text-5xl mb-4">{% trans "About search result parser webtool" %}</h1>

<p>

{% blocktrans %}

Hello guest, this online tool is a kind of Frankenstein. On the one hand, it is an excellent <b>SEO tool</b> with which you can collect ultimate data about websites on top of search results pages and the distribution of keywords in titles and descriptions. On the other hand, I made this tool with open-source code and a <a href="https://timthewebmaster.com/en/articles/series-of-articles-about-search-result-parser-webtool/">step-by-step guide</a> on my own site. That is, it is also a <b>training resource</b> for all those who want to put together something similar. I hope they will.

{% endblocktrans %}

</p>

<p>

{% blocktrans %}

This tool works on the following stack. <b>Django 5.1</b> is its backend, the place where all the magic of processing user requests, managing user credentials, rendering templates that you see, and parsing results takes place. <b>React 18.1</b> is its frontend; all animations, transitions, and logic that occur are already on your machine; all this is React. One of the most popular JavaScript frameworks in the world. Also, in order not to plunge into CSS madness, this site uses <b>TailwindCSS</b>—as a way to avoid the inevitable. As a backend add-on to Django 5.1 for managing user authentication, I use such a Django application as <i>django-allauth</i>. All parsing is possible thanks to my numerous bots, mini-parsers, such a wonderful tool as <i>Selenium</i>, and no less wonderful library <i>BeautifulSoup4</i>.

{% endblocktrans %}

</p>

<p>

{% blocktrans %}

Although I am attracted by the policy of the Google search engine, supposedly all site owners should pretend that they do not know about Google and SEO and should accept the flow of visitors to the site as a fact and should just make good content; this is not true. Some even say that Google is a mirror of the entire Internet. Yes, but the mirror does not distort the headings and titles; the mirror does not require site owners to look beautiful and convenient. Maybe this was true before, but not now.

{% endblocktrans %}

</p>

<p>

{% blocktrans %}

That is why it is worth considering and knowing which sites are higher in search results and which are lower. How exactly do they differ from each other, and why does Google, for example, consider these sites more relevant than others. And that's why I made this tool to detect and help find patterns in Google's behavior through its search results. And also, I wanted to show that anyone, if they want, can write a similar tool for themselves, and it will even work.

{% endblocktrans %}

</p>

<p>ヾ(￣▽￣)~~</p>

</div>

</div>

{% endblock %}

{% block scripts %}

{% endblock %}

Переводы в JS файлах, используя Django

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

from django.contrib import admin

from django.urls import path, include

from rest_framework import routers

from Backend import views

from django.conf.urls.i18n import i18n_patterns

from django.views.i18n import JavaScriptCatalog

router = routers.DefaultRouter()

router.register(r'results', views.BackendModelView, 'result')

urlpatterns = [

path('admin/', admin.site.urls),

path('api/', include(router.urls)),

# BY ALLAUTH

path('accounts/', include('allauth.urls')),

path("_allauth/", include("allauth.headless.urls")),

]

urlpatterns += i18n_patterns(

path("jsi18n/", JavaScriptCatalog.as_view(), name="javascript-catalog"),

path('', include('Authentication.urls')),

path('', include('Frontend.urls')),

)

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

<script src="{% url 'javascript-catalog' %}"></script>

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

function onRequestPasswordReset(req){

Wait()

var form_data = new FormData()

var email = document.querySelector('#password_email').value

form_data.append('email', email)

axios.post(URLs.REQUEST_PASSWORD_RESET, form_data, {

headers: {

"accept": "application/json",

"X-CSRFToken": getCSRFToken(),

'Content-Type': "application/json",

}

}).then((data)=>{

StopWait(gettext(`Successfully send an email to ${email}`), 'success')

req.setModal(false);

}).catch((err)=>{

StopWait(`${err}`, 'error')

req.setModal(false);

})

}

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

function fetchProfile(req){

updateSession()

return (

<div>

{ session.is_authenticated ?

<Box>

<Typography>

{gettext('You are logged in as')} <b>{session.username}</b>

</Typography>

<Box className="flex flex-row gap-4 items-center">

<Button onClick={()=>{fetchPasswordChange(req)}} variant='text'>{gettext('Change password')}</Button>

<Button onClick={()=>{fetchPasswordReset(req)}} variant='text'>{gettext('Reset password')}</Button>

</Box>

<Typography>

{gettext('Your email are:')} <b>{session.email.address}</b> | {session.email.verified}

</Typography>

{ session.email.verified === 'not verified' &&

<Box className="flex flex-row gap-4 items-center">

<Button onClick={()=>{onRequestConfirmEmail(req, session.email.address)}} variant='text'>{gettext('verify')}</Button>

</Box>

}

<Box className="flex flex-row gap-4 items-center">

<Button onClick={()=>{onSignout(req)}} variant='text'>{gettext('Sign out')}</Button>

</Box>

</Box>

:

<Box>

<Typography>

{gettext('You are not logged in')}

</Typography>

<Box className="flex flex-row gap-4 items-center">

<Button onClick={()=>{fetchLogin(req)}} variant='text'>{gettext('Log in')}</Button>

<Typography>{gettext('or')}</Typography>

<Button onClick={()=>{fetchSignup(req)}} variant='text'>{gettext('Sign up')}</Button>

</Box>

</Box>

}

</div>

)

}

Собираем, Переводим и Компилируем переводы

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

python .\manage.py makemessages -l ru

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

python .\manage.py makemessages -d djangojs -l ru -i node_modules/*

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

#: .\Frontend\templates\Frontend\base.html:25

msgid "profile"

msgstr "Profil"

#: .\Frontend\templates\Frontend\base.html:39

msgid "TimTheWebmaster ➥"

msgstr "TimTheWebmaster ➥"

#: .\Frontend\templates\Frontend\base.html:42

msgid ""

"\n"

" Made by <div id=\"ref_to_place\" class=\"pl-1 pr-1\"></div> "

"Copyright © 2024\n"

" "

msgstr ""

"\n"

" Erstellt von <div id=\"ref_to_place\" class=\"pl-1 pr-1\"></div> "

"Copyright © 2024\n"

" "

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

python .\manage.py compilemessages

Переводы в JS файлах, через i18next фреймворк

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

npm install i18next-http-backend i18next-browser-languagedetector react-i18next i18next-parser i18next --save

1. i18next - функциональное ядро для переводов
2. react-i18next - связующее звено между React и i18next
3. i18next-browser-languagedetector - позволяет определять текущий язык пользователя в браузере и его изменение
4. i18next-http-backend - занимается тем, что доставляет переводы до конечного клиента
5. i18next-parser - собирает все строчки для переводов

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

module.exports = {

contextSeparator: '_',

createOldCatalogs: false,

defaultNamespace: 'translation',

defaultValue: '',

indentation: 2,

keepRemoved: false,

keySeparator: false,

lexers: {

hbs: ['HandlebarsLexer'],

handlebars: ['HandlebarsLexer'],

htm: ['HTMLLexer'],

html: ['HTMLLexer'],

mjs: ['JavascriptLexer'],

js: ['JsxLexer'], // if you're writing jsx inside .js files, change this to JsxLexer

ts: ['JavascriptLexer'],

jsx: ['JsxLexer'],

tsx: ['JsxLexer'],

default: ['JavascriptLexer'],

},

lineEnding: 'auto',

locales: ['en', 'ru', 'be', 'de', 'es', 'fr'],

namespaceSeparator: false,

output: './static/locales/$LOCALE/$NAMESPACE.json',

pluralSeparator: false,

input: undefined,

sort: false,

verbose: false,

failOnWarnings: false,

failOnUpdate: false,

customValueTemplate: null,

resetDefaultValueLocale: null,

i18nextOptions: null,

yamlOptions: null,

}

1. Во-первых, поменял лексер, lexers: для JS файлов.
2. Во-вторых добавил локали, locales:, для Английского, Русского, Белорусского, Немецкого, Испанского и Французского.
3. В третьих, я изменил путь сохранения результатов, output. Я помещаю все файлы переводов в директорию static. Спрашивается, почему? Когда я размещу на сервере этот сайт, все статические файлы должны обслуживаться этим сервером. Соответственно, все эти файлы должны будут перемещены в другую локацию. И у джанго уже есть встроенная команда для копирования всех статических файлов в эту локацию - collectstatic. Правильно, в том числе и наши локализации.
4. В четвёртых, я проставил все значения для сепараторов на false. Сделал я это потому, что не использую их функции переводов, как это демонстрируется в их туториале. Я оборачиваю строчки и предложения в соответствующую функцию для перевода, вместо того, чтобы придумывать некие особенные ключи для каждого случая.

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

import i18n from 'i18next';

import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';

const HttpApi = new Backend(null, {

loadPath: '/static/locales/{{lng}}/{{ns}}.json',

});

import LanguageDetector from 'i18next-browser-languagedetector';

const languageDetector = new LanguageDetector(null, {

order: ['path', 'cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag', 'subdomain'],

});

i18n

.use(HttpApi)

.use(languageDetector)

.use(initReactI18next)

.init({

debug: true,

fallbackLng: 'en',

});

export default i18n;

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

import i18n from './i18n';

import Header from './components/Header';

import Footer from './components/Footer';

import AppSettings from './components/AppSettings';

import AppUtils from './components/AppUtils';

import AppActions from './components/AppActions';

import AppQueries from './components/AppQueries';

import Message from './components/Msg';

import Hint from './components/Tutorial';

import Auth from './components/Auth';

import EmailVerify from './components/EmailVerify';

import PasswordReset from './components/PasswordReset';

import Contacts from './components/Contacts';

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

import { useTranslation } from "react-i18next";

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

export default function EmailVerify(){

  const { t } = useTranslation();

...

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

<Typography>{t('To finish email verification click the button below')}</Typography>

<Button onClick={()=>{onConfirmEmail(key, containerRef, t)}} variant='text'>{t('proceed')}</Button>

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

import * as React from 'react';

import axios from "axios";

import { createRoot } from 'react-dom/client';

import Box from '@mui/material/Box';

import Typography from '@mui/material/Typography';

import Button from '@mui/material/Button'

import {URLs, getCSRFToken} from './Auth'

import { Wait, StopWait, Msg } from './Waiter';

import { useTranslation } from "react-i18next";

function onConfirmEmail(key, container, t){

var form_data = new FormData()

form_data.append('key', key)

axios.post(URLs.VERIFY_EMAIL, form_data, {

headers: {

"accept": "application/json",

"X-CSRFToken": getCSRFToken(),

'Content-Type': "application/json",

}

}).then((data) => {

createRoot(container.current).render(

<Box className="flex flex-col gap-6 items-center justify-between">

<Typography>{t('You successfully verified your email')}</Typography>

</Box>

)

}).catch((err) => {

if (err.response.status === 401){

createRoot(container.current).render(

<Box className="flex flex-col gap-6 items-center justify-between">

<Typography>{t('You successfully verified your email')}</Typography>

</Box>

)

}

var errors = err.response.data.errors

const lines = []

errors.forEach((error) =>{

lines.push(<Typography>{error.message}</Typography>)

})

createRoot(container.current).render(

<Box className="flex flex-col gap-6 items-center justify-between">

<Typography>{t('The email verification token was invalid')}</Typography>

</Box>

)

});

}

export default function EmailVerify(){

const { t } = useTranslation();

const key = document.querySelector('#email-verify-block').dataset.key

const containerRef = React.useRef(null)

return(

<Box ref={containerRef} className="w-full h-full content-center">

<Box className="flex flex-col gap-6 items-center justify-between">

<Typography>{t('To finish email verification click the button below')}</Typography>

<Button onClick={()=>{onConfirmEmail(key, containerRef, t)}} variant='text'>{t('proceed')}</Button>

</Box>

</Box>

)

}

const email_verify_container = document.getElementById('email-verify-block')

if (email_verify_container){

const email_verify_root = createRoot(email_verify_container);

email_verify_root.render(<EmailVerify></EmailVerify>);

}

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

{

"name": "frontend",

"version": "1.0.0",

"main": "index.js",

"scripts": {

"dev": "webpack --mode development --watch",

"tail": "tailwindcss -i ./src/index.css -o ./static/css/zero.css --watch",

"prod": "webpack --mode production",

"trans": "i18next 'src/**/*.js'"

},

...

}

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

npm run trans

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

{

"You must \"check\" one of these title, url, description": "Вы должны \"выбрать\" один из этих title, url, description",

"Query string cant be empty": "Строка запроса не может быть пустой",

"At least 1 query must be": "Не менее 1 запроса должно быть",

"Saving preset": "Сохранение пресета",

"Preset name": "Имя пресета",

"Successfully saved preset": "Пресет успешно сохранен",

"Cant save a preset": "Немогу сохранить пресет",

"At least 3 character long": "Не менее 3 символов в длину",

"Save": "Сохранить",

"Successfully parsed a data": "Успешно спарсил данные",

"Cant parse data": "Не могу спарсить данные"

}

Переводы в django-моделях

Ну ладно, я немного приврал. Это возможно, но управлять и тем более верстать такие "переводимые странички" просто жуть как сложно и неудобно. Мой первый сайт про историю был так построен. Чтобы django мог обнаруживать шаблоны статей, приходилось создавать soft-ссылки на развёрнутой системе ... короче, это та ещё боль в ж**е.

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

pip install modeltranslation

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

INSTALLED_APPS = [

# model translation

'modeltranslation',

#

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

from modeltranslation.translator import translator, TranslationOptions

from .models import Post

class PostTranslationOptions(TranslationOptions):

fields = ('title', 'description', 'h1')

translator.register(Post, PostTranslationOptions)

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

python manage.py makemigrations

python manage.py migrate

PlainBashC++C#CSSDiffHTML/XMLJavaJavaScriptMarkdownPHPPythonRubySQL

from django.contrib import admin

from .models import Post

class PostAdmin(admin.ModelAdmin):

prepopulated_fields = {"slug": ("title_en",)}

exclude = ('title', 'description', 'h1')

list_display = (

'slug',

'title_ru',

'title_en',

'description_ru',

'description_en',

'h1_ru',

'h1_en'

)

list_display_links = (

'slug',

)

search_fields = ('title_ru', 'title_en',)

admin.site.register(Post, PostAdmin)

Эпилог

Внешние ссылки