Weblate frontend

Frontend ໃນປັດຈຸບັນຖືກສ້າງຂຶ້ນໂດຍໃຊ້ Bootstrap, jQuery ແລະ ຫ້ອງສະໝຸດ (libraries) ຂອງພາກສ່ວນທີສາມຈຳນວນໜຶ່ງ.

ຕົວທ່ອງເວັບທີ່ຮອງຮັບ

Weblate ຮອງຮັບເວີຊັນລ່າສຸດທີ່ໝັ້ນຄົງຂອງຕົວທ່ອງເວັບ ແລະ ແພລດຟອມຫຼັກທັງໝົດ.

ຕົວທ່ອງເວັບທາງເລືອກທີ່ໃຊ້ WebKit, Blink, ຫຼື Gecko ເວີຊັນລ່າສຸດ, ບໍ່ວ່າຈະໂດຍກົງ ຫຼື ຜ່ານ web view API ຂອງແພລດຟອມ, ຈະບໍ່ຖືກຮອງຮັບຢ່າງເປັນທາງການ. ແນວໃດກໍຕາມ, Weblate ຄວນຈະ (ໃນກໍລະນີສ່ວນໃຫຍ່) ສະແດງຜົນ ແລະ ເຮັດວຽກໄດ້ຢ່າງຖືກຕ້ອງໃນຕົວທ່ອງເວັບເຫຼົ່ານີ້ເຊັ່ນກັນ.

ຕົວທ່ອງເວັບທີ່ເກົ່າກວ່ານັ້ນອາດຈະເຮັດວຽກໄດ້, ແຕ່ບາງຟີເຈີອາດຈະຖືກຈຳກັດ.

ການເຂົ້າເຖິງ (Accessibility)

Weblate ຕັ້ງເປົ້າໝາຍໄວ້ທີ່ WCAG 2.2 Level AA ສຳລັບຟີເຈີໃໝ່ ແລະ ຟີເຈີທີ່ມີການປ່ຽນແປງທີ່ຜູ້ໃຊ້ພົບເຫັນ ໃນຈຸດທີ່ສາມາດປະຕິບັດໄດ້. ໃຫ້ໃຊ້ Semantic HTML ແລະ Bootstrap components ກ່ອນທີ່ຈະເພີ່ມລະຫັດການໂຕ້ຕອບແບບກຳນົດເອງ.

ເມື່ອປ່ຽນແປງ frontend:

• ເຮັດໃຫ້ຕົວຄວບຄຸມການໂຕ້ຕອບທັງໝົດສາມາດເຂົ້າເຖິງ ແລະ ໃຊ້ງານໄດ້ດ້ວຍແປ້ນພິມ.

• ຮັກສາລຳດັບການໂຟກັສໃຫ້ມີເຫດຜົນ ແລະ ຮັກສາຮູບແບບການໂຟກັສທີ່ເບິ່ງເຫັນໄດ້.

• ມັກໃຊ້ປຸ່ມ, ລິງກ໌, inputs, selects, ແລະ tables ແບບດັ້ງເດີມຫຼາຍກວ່າ Widgets ທີ່ສ້າງຂຶ້ນເອງ.

• ເຊື່ອມໂຍງຕົວຄວບຄຸມຟອມແຕ່ລະອັນກັບປ້າຍກຳກັບ (label), ຂໍ້ຄວາມຊ່ວຍເຫຼືອ, ແລະ ຂໍ້ຜິດພາດຂອງການກວດສອບ (validation errors) ບ່ອນທີ່ສາມາດນຳໃຊ້ໄດ້.

• ຢ່າໃຊ້ສີ, ຮູບຮ່າງໄອຄອນ, ຫຼື ຕຳແໜ່ງເປັນວິທີດຽວໃນການສື່ສານສະຖານະ.

• ປະກາດການປ່ຽນແປງສະຖານະແບບໄດນາມິກທີ່ບໍ່ສາມາດເບິ່ງເຫັນໄດ້ດ້ວຍເທັກໂນໂລຍີຊ່ວຍເຫຼືອອື່ນໆ.

• ເຄົາລົບຄວາມມັກໃນການຫຼຸດການເຄື່ອນໄຫວ (reduced-motion) ສຳລັບພຶດຕິກຳການເຄື່ອນໄຫວ ຫຼື ການເລື່ອນໜ້າຈໍ.

• ທົດສອບ Workflow ທີ່ມີການປ່ຽນແປງດ້ວຍການນຳທາງດ້ວຍແປ້ນພິມເທົ່ານັ້ນ ແລະ, ໃນຈຸດທີ່ສາມາດປະຕິບັດໄດ້, ໃຫ້ກວດສອບດ້ວຍຕົວອ່ານໜ້າຈໍ (screen reader).

ຂໍ້ກຳນົດຂອງສ່ວນຕິດຕໍ່ຜູ້ໃຊ້

ລິ້ງເອກະສານ

ໃຫ້ໃຊ້ໄອຄອນຂໍ້ມູນສຳລັບລິ້ງທີ່ກ່ຽວຂ້ອງໄປຫາເອກະສານ Weblate ແທນທີ່ຈະໃຊ້ປຸ່ມ Documentation ທີ່ເປັນຂໍ້ຄວາມ. ໃນເທັມເພລດ Django, ໃຫ້ໃຊ້ແທັກເທັມເພລດ documentation_icon ເພື່ອໃຫ້ລິ້ງມີຮູບແບບ, ປ້າຍກຳກັບ, ແລະ ພຶດຕິກຳລິ້ງພາຍນອກທີ່ສະໝໍ່າສະເໝີ. ໄອຄອນເອກະສານແມ່ນລິ້ງທີ່ໂຕ້ຕອບໄດ້ ແລະ ຕ້ອງສາມາດໃຊ້ຄີບອດໂຟກັດໄດ້. ໃຫ້ຮັກສາລິ້ງເອກະສານທີ່ເປັນຂໍ້ຄວາມໄວ້ ເມື່ອພວກມັນເປັນສ່ວນໜຶ່ງຂອງເນື້ອໃນການອະທິບາຍ ແທນທີ່ຈະເປັນການດຳເນີນການຕາມບໍລິບົດ.

ການຈັດການ Dependency

ການຕິດຕັ້ງ ແລະ ຈັດການຫ້ອງສະໝຸດ ພາກສ່ວນທີສາມ ໃນ client ຂອງໂຄງການ Django ອາດຈະສັບສົນເລັກນ້ອຍ. ພາກສ່ວນນີ້ໃຫ້ຄຳແນະນຳແບບເປັນຂັ້ນຕອນກ່ຽວກັບວິທີການຕິດຕັ້ງ ແລະ ຈັດການຫ້ອງສະໝຸດພາກສ່ວນທີສາມ ທີ່ໃຊ້ໂດຍ client side ຂອງ Weblate ໂດຍໃຊ້ Webpack.

ສິ່ງທີ່ຕ້ອງມີກ່ອນ

ກ່ອນທີ່ຈະດຳເນີນການຕິດຕັ້ງ, ໃຫ້ແນ່ໃຈວ່າທ່ານມີສິ່ງທີ່ຕ້ອງມີກ່ອນດັ່ງຕໍ່ໄປນີ້:

• ເວີຊັນ Node.js ທີ່ຮອງຮັບ.

• ຕົວຈັດການແພັກເກດ yarn ໄດ້ຖືກຕິດຕັ້ງຢູ່ໃນລະບົບຂອງທ່ານແລ້ວ.

• ດຳເນີນການຄຳສັ່ງ cd client.

• ດຳເນີນການຄຳສັ່ງ yarn install --check-files.

ການຕິດຕັ້ງ

ເພື່ອຕິດຕັ້ງຫ້ອງສະໝຸດ, ກ່ອນອື່ນໃຫ້ດຳເນີນການຄຳສັ່ງຕໍ່ໄປນີ້:

yarn add <lib-name>

ການນຳເຂົ້າຫ້ອງສະໝຸດ

ຈາກນັ້ນ, ມີສອງວິທີໃນການນຳເຂົ້າຫ້ອງສະໝຸດ:

1. ຖ້າມັນເປັນຫ້ອງສະໝຸດລະດັບໂຄງການ (ໃຊ້/ຈຳເປັນໃນທຸກ/ສ່ວນຫຼາຍຂອງໜ້າ):

   • ນຳເຂົ້າຫ້ອງສະໝຸດໃນ src/main.js.

   • ແລະ ປະກາດມັນໃນຂອບເຂດທົ່ວໂລກ (Global scope) (ຖ້າຈຳເປັນ).

2. ຖ້າມັນເປັນຫ້ອງສະໝຸດສະເພາະໜ້າ (ຫ້ອງສະໝຸດຖືກໃຊ້ໃນໜ້າ ຫຼື ແມ່ແບບສະເພາະ):

   • ສ້າງໄຟລ໌ໃໝ່ຊື່ src/<lib-name>.js.

   • ນຳເຂົ້າຫ້ອງສະໝຸດໃນນັ້ນ. ຈາກນັ້ນໃສ່ມັນເຂົ້າໄປໃນ window object ເພື່ອໃຫ້ສາມາດເຂົ້າເຖິງໄດ້ໃນທົ່ວໂລກ.

   • ເພີ່ມລາຍການໃນ webpack.config.js: <lib-name>: "src/<lib-name>.js".

   • ເພີ່ມຊື່ຫ້ອງສະໝຸດໃນ excludePrefixes array ໃນ mainLicenseTransform ໃນ webpack.config.js.

   • ເພີ່ມຊື່ໄຟລ໌ສັນຍາອະນຸຍາດໃນ additionalFiles ໃນ LicensePlugin ໃນ plugins array ໃນ webpack.config.js.

   • ສ້າງຟັງຊັນ <lib-name>LicenseTransform ສຳລັບໄຟລ໌ສັນຍາອະນຸຍາດທີ່ແນະນຳໃນຂັ້ນຕອນກ່ອນໜ້ານີ້ ແລະ ໃຊ້ງານມັນ.

   ໝາຍເຫດ: ແທນທີ່ <lib-name> ດ້ວຍຊື່ທີ່ແທ້ຈິງຂອງຫ້ອງສະໝຸດພາກສ່ວນທີສາມ.

ການສ້າງຫ້ອງສະໝຸດ

ສ້າງຫ້ອງສະໝຸດທີ່ໂຄງການໃຊ້, ໂດຍການດຳເນີນການຄຳສັ່ງຕໍ່ໄປນີ້:

yarn build

ການລວມຫ້ອງສະໝຸດ

ຕອນນີ້ຫ້ອງສະໝຸດຖືກສ້າງຂຶ້ນ ແລະ ພ້ອມໃຊ້ງານແລ້ວ. ເພື່ອລວມມັນເຂົ້າໄປ ໃຫ້ເຮັດຕາມຂັ້ນຕອນເຫຼົ່ານີ້:

1. ຖ້າຫ້ອງສະໝຸດຖືກນຳເຂົ້າໃນ src/main.js, ບໍ່ຈຳເປັນຕ້ອງມີຂັ້ນຕອນເພີ່ມເຕີມ (ເພາະມັນຖືກລວມຢູ່ໃນ base.html ແລ້ວ).

2. ຖ້າຫ້ອງສະໝຸດຖືກນຳເຂົ້າໃນໄຟລ໌ສະເພາະຂອງມັນ src/<lib-name>.js, ໃນ weblate/templates ໃຫ້ໃຊ້ include tags ເພື່ອລິງກ໌ໄປຍັງໄຟລ໌ JavaScript static ທີ່ສ້າງຂຶ້ນ:

{% load static %}
<script src="{% static 'js/vendor/<lib-name>.js' %}"></script>

ຮູບແບບການຂຽນລະຫັດ

Weblate ເພິ່ງພາ Biome ສຳລັບການຈັດຮູບແບບ ແລະ ກວດສອບ (linting) ລະຫັດ JavaScript ແລະ CSS. Django templates ຈະຖືກຈັດຮູບແບບ ແລະ ກວດສອບແຍກຕ່າງຫາກໂດຍ djade ແລະ djlint.

ການແປພາສາ

ຖ້າທ່ານຕ້ອງການຂໍ້ຄວາມໃດໆທີ່ຜູ້ໃຊ້ເບິ່ງເຫັນໃນລະຫັດ frontend, ມັນຄວນຈະສາມາດແປໄດ້. ໃນກໍລະນີສ່ວນໃຫຍ່, ສິ່ງທີ່ທ່ານຕ້ອງການແມ່ນຫໍ່ຂໍ້ຄວາມຂອງທ່ານພາຍໃນຟັງຊັນ gettext, ແຕ່ຍັງມີຟີເຈີທີ່ຊັບຊ້ອນກວ່ານັ້ນໃຫ້ໃຊ້:

document.write(gettext("this is to be translated"));

var object_count = 1 // or 0, or 2, or 3, ...
s = ngettext("literal for the singular case",
        "literal for the plural case", object_count);

fmts = ngettext("There is %s object. Remaining: %s",
        "There are %s objects. Remaining: %s", 11);
s = interpolate(fmts, [11, 20]);
// s is "There are 11 objects. Remaining: 20"

See also

ຫົວຂໍ້ການແປພາສາໃນເອກະສານ Django

ໄອຄອນ

Weblate ປັດຈຸບັນໃຊ້ Material Design Icons, ໃນກໍລະນີທີ່ທ່ານກຳລັງຊອກຫາສັນຍາລັກໃໝ່, ໃຫ້ກວດສອບທີ່ນັ້ນ.

ນອກຈາກນັ້ນ, ຍັງມີ scripts/optimize-svg ເພື່ອຫຼຸດຂະໜາດຂອງ SVG ເນື່ອງຈາກໄອຄອນສ່ວນໃຫຍ່ຖືກຝັງໄວ້ພາຍໃນ HTML ເພື່ອໃຫ້ສາມາດປັບແຕ່ງຮູບແບບຂອງ paths ໄດ້.