អត្ថបទ
ប្រើផ្នែកខាងមុខសុទ្ធដើម្បីបង្កើតប្លុកពហុភាសា "ថាមវន្ត + អត្ថបទ"
ខ្ញុំបានបង្កើតគេហទំព័ររបស់ខ្ញុំទៅជាប្លុកពហុភាសា "ថាមវន្ត + អត្ថបទ"៖ ខ្លឹមសារត្រូវបានគ្រប់គ្រងដោយ Markdown ការបកប្រែត្រូវបានបញ្ចប់នៅពេលបង្ហោះ ទំព័រឋិតិវន្តត្រូវបានបង្កើតកំឡុងពេលសាងសង់ ហើយកម្មវិធីរុករកគឺទទួលខុសត្រូវចំពោះការអាន និងប្តូរភាសា។ អត្ថបទនេះបំបែកគំរូមាតិកា បំពង់ចែកចាយ ការដោះដូររវាងការផ្ទុកតាមតម្រូវការ និង SEO និងអ្វីដែលជាការរក្សាទុកផ្នែកខាងមុខសុទ្ធ។
· អាន 1 នាទី
ខ្ញុំសង្ឃឹមថាគេហទំព័ររបស់ខ្ញុំអាចត្រូវបានប្រើដើម្បីសរសេរកថាខណ្ឌនៃគំនិត ឬសរសេរបញ្ហាបច្ចេកទេសពេញលេញមួយឱ្យបានច្បាស់លាស់។ ដាក់ "ឌីណាមិក" នៅក្នុងអត្ថបទខ្លី និង "អត្ថបទ" នៅក្នុងអត្ថបទវែង។ ទាំងពីរអាចភ្ជាប់គ្នាបាន ហើយនៅពេលដែលអ្នកចូលមើលប្តូរភាសា មាតិកាក៏ត្រូវប្តូរជាមួយគ្នាដែរ។
តម្រូវការនេះហាក់ដូចជាសាមញ្ញណាស់ ប៉ុន្តែប្រសិនបើអ្នកបន្ថែមមូលដ្ឋានទិន្នន័យ ផ្ទាំងខាងក្រោយ និង API មាតិកាតាំងពីដំបូង ហើយបន្ទាប់មកដោះស្រាយកំណែនៃភាសានីមួយៗ វានឹងក្លាយទៅជាផលិតផលមួយផ្សេងទៀតដែលទាមទារការថែទាំរយៈពេលវែង។
ខ្ញុំបានជ្រើសរើសបង្រួមតម្រូវការជាមុនទៅនឹងអ្វីដែលខ្ញុំពិតជាអាចប្រើប្រាស់បាន៖ **អ្នកនិពន្ធម្នាក់ បញ្ចូលខ្លឹមសារទៅក្នុង Git ហើយបង្កើតគេហទំព័រឡើងវិញបន្ទាប់ពីការបោះពុម្ពផ្សាយ។ អ្នកអានត្រូវការតែឯកសារឋិតិវន្ត និងកម្មវិធីរុករកប៉ុណ្ណោះ។ ** នេះគឺជារចនាសម្ព័ន្ធ "ថាមវន្ត + អត្ថបទ" បច្ចុប្បន្ននៃ stephen.taipei ។
Pure front-end សំដៅទៅលើចុងអាន#
ចូរកំណត់ព្រំដែនឱ្យច្បាស់ជាមុនសិន។ គម្រោងនេះប្រើប្រាស់ React, Vite និង Tailwind។ Node.js នៅតែត្រូវបានទាមទារសម្រាប់ដំណើរការមាតិកា ការបម្លែងរូបភាព និងការបង្កើតស្គ្រីប។ ការបកប្រែក៏នឹងហៅទៅសេវាកម្មខាងក្រៅក្នុងអំឡុងពេលនៃការបោះពុម្ពផ្សាយផងដែរ។ បន្ទាប់ពីការដាក់ឱ្យប្រើប្រាស់ ឯកសារឋិតិវន្តត្រូវបានផ្តល់ដោយ Nginx ។
ដូច្នេះ អ្វីដែលខ្ញុំចង់និយាយដោយផ្នែកខាងមុខសុទ្ធគឺថា នៅពេលអ្នកអានបើកគេហទំព័រ ពួកគេមិនត្រូវការ Blog back-end ពិសេសដើម្បីស្វែងរកព័ត៌មាន ទំព័រក្រុម ឬបកប្រែក្នុងពេលជាក់ស្តែងទេ។ វាមានដំណើរការសាងសង់ និងម៉ាស៊ីនមួយ ប៉ុន្តែមិនមានកម្មវិធី API ឬមូលដ្ឋានទិន្នន័យជាប់លាប់សម្រាប់អានអត្ថបទទេ។
ប្រសិនបើការងារត្រូវបានធ្វើជាមុននោះការអាននឹងកាន់តែងាយស្រួល។
ព័ត៌មាន និងអត្ថបទចែករំលែកប្រភពដូចគ្នា នីមួយៗមានគំរូរៀងៗខ្លួន#
ខ្លឹមសារត្រូវបានប្រមូលផ្តុំនៅក្នុង content/ ហើយអត្ថបទដើមគឺ Markdown ទាំងអស់។ ខ្លឹមសារទាំងពីរមិនត្រូវបានកាត់ជាទម្រង់ដូចគ្នាទេ៖
content/
tags.yaml
tags.locales.yaml
notes/2026/20261004-0944.md
notes/2026/20261004-0944.locales.yaml
articles/frontend-only-multilingual-blog/
index.md
locales.yaml
cover.webp
ថាមវន្តគឺជាកាតខ្លី។ ឈ្មោះឯកសារប្រើនាទីនៃម៉ោងតៃប៉ិជាលេខសម្គាល់។ វាអាចត្រូវបានសម្គាល់ដោយគំនិត ការរៀនអនឡាញ ការបោកប្រាស់ ឬការអាន។ វាអាចត្រូវបានបង្កើតឡើងដោយគ្រាន់តែសរសេរកថាខណ្ឌដោយមិនចាំបាច់គិតពីចំណងជើងរាល់ពេល។ ការរំលឹកនឹងលេចឡើងប្រសិនបើវាលើសពី 500 ពាក្យ ហើយវាគួរតែប្រែទៅជាអត្ថបទប្រសិនបើវាលើសពី 1,000 ពាក្យ។
អត្ថបទមាន slug ថេរ ចំណងជើង អរូបី កាលបរិច្ឆេទ ហើយក៏អាចមានគម្រប និងពេលវេលាធ្វើបច្ចុប្បន្នភាពផងដែរ។ URL នឹងមិនត្រូវបានផ្លាស់ប្តូរបន្ទាប់ពីវាត្រូវបានប្រកាសជាសាធារណៈដើម្បីការពារតំណដែលបានចែករំលែកដើមពីការក្លាយជាមិនត្រឹមត្រូវ។
ទាំងពីរនេះទាក់ទងគ្នាដោយប្រើ article:។ សម្រាប់ការអាប់ដេត អ្នកអាចសរសេរសំណួរជាមុន រួចភ្ជាប់ទៅអត្ថបទពេញលេញ។ ទំព័រអត្ថបទនឹងរាយបញ្ជីបច្ចុប្បន្នភាពដែលយោងវាបញ្ច្រាស។ ខ្លឹមសារខ្លីរក្សាចំណុចចាប់ផ្តើមបច្ចុប្បន្ន ហើយខ្លឹមសារវែងគឺទទួលខុសត្រូវចំពោះការបញ្ចប់ការទាញយក។ មិនចាំបាច់បង្ហោះអត្ថបទពេញដូចគ្នាទាំងសងខាងទេ។
អនុញ្ញាតឱ្យច្បាប់មាតិការារាំងកំហុសមុនពេលសាងសង់#
ប្រសិនបើ Markdown ទើបតែត្រូវបានគេបោះចូលទៅក្នុងរូបភាពនោះ បញ្ហាជាច្រើននឹងមិនត្រូវបានគេមើលឃើញទេរហូតដល់ពេលដែលវាបានផ្សាយបន្តផ្ទាល់៖ កាលបរិច្ឆេទខុស អត្ថបទដែលមិនភ្ជាប់គ្នា រូបភាពដែលគ្មានការជំនួស ឬប្រធានបទដូចគ្នាដែលត្រូវបានសរសេរដោយស្លាកស្រដៀងគ្នាចំនួនបី។
ខ្ញុំដាក់ច្បាប់ទាំងនេះទៅក្នុងបណ្តាញចែកចាយមាតិកា។ loadContent អានឯកសារ ពិនិត្យមើលវាលជាមួយ Zod ហើយបន្ទាប់មកដំណើរការ Markdown រូបភាព ភាសា និងទំនាក់ទំនងមាតិកា។ ទាំងការត្រួតពិនិត្យ CLI និងការសាងសង់ Vite ប្រើប្រាស់បំពង់បង្ហូរប្រេងនេះដើម្បីកាត់បន្ថយគម្លាតរវាង "ម៉ាស៊ីនក្នុងស្រុកនិយាយថាវាដំណើរការ ប៉ុន្តែបរិស្ថានផ្លូវការមិនដំណើរការទេ"។
ស្លាកទទួលយកបានតែសោដែលបានចុះឈ្មោះ tags.yaml។ អត្ថបទដែលយោងដោយថាមវន្ត និងថាមវន្តផ្សេងទៀតត្រូវតែមាន។ ការមើលជាមុនក្នុងតំបន់អាចអានសេចក្តីព្រាង ហើយការស្ថាបនាជាផ្លូវការនឹងមិនរាប់បញ្ចូលសេចក្តីព្រាងនោះទេ។ ច្បាប់ទាំងនេះមិនផ្អែកលើការចងចាំពួកគេនៅពេលប្រកាសនោះទេ ប៉ុន្តែពួកគេពិតជារារាំងការត្រួតពិនិត្យ។
Markdown ក៏មានព្រំដែនលទ្ធផលច្បាស់លាស់ផងដែរ៖ raw HTML មិនត្រូវបានបញ្ចេញដោយផ្ទាល់ទេ, HTML ដែលបង្កើតឡើងត្រូវបានសម្អាត ហើយប្លុកកូដត្រូវបានបន្លិចពណ៌នៅពេល build។ រូបភាពមាតិកាដែលយោងតាម relative path ក្នុងម៉ាស៊ីនមូលដ្ឋាន នឹងបម្លែងទៅជា WebP ដែលមានទទឹងអតិបរមា 1600px ហើយដក metadata EXIF រួមទាំង GPS ចេញ។ អត្ថបទ កាត និងការមើលជាមុនសម្រាប់ចែករំលែក ប្រើរូបភាពដែលបានដំណើរការដូចគ្នា។ រូបភាពពីចម្ងាយ និងរូបភាពដែលប្រើ absolute path ចាប់ពី root មិនឆ្លងកាត់ដំណើរការបម្លែងក្នុងម៉ាស៊ីនមូលដ្ឋាននេះទេ។
តម្លៃនៃប្រព័ន្ធពហុភាសានឹងត្រូវបានបង់នៅពេលបោះពុម្ពអត្ថបទ។#
បច្ចុប្បន្នគេហទំព័រនេះគាំទ្រ 22 ភាសា។ អត្ថបទដើមចិនបុរាណត្រូវបានសរសេរម្តង ហើយចំណងជើង អរូបី អត្ថបទ និងរូបភាពនៃ 21 ភាសាផ្សេងទៀតត្រូវបានរក្សាទុកក្នុង locales.yaml នៅជាប់នឹងវា។
នេះជាការសម្រេចចិត្តដែលខ្ញុំយកចិត្តទុកដាក់៖ **អ្នកអានមិនចាំបាច់រង់ចាំការបកប្រែទេ។ ** content:localize បង្កើតការបកប្រែនៅពេលបង្ហោះ។ ការស្ថាបនាផ្លូវការគ្រាន់តែអានឯកសារដែលមានស្រាប់ ហើយមិនហៅសេវាបកប្រែម្តងទៀតរាល់ពេលដែលវាត្រូវបានដាក់ឱ្យប្រើប្រាស់។
ប្រើប្រភពសង្ខេបដើម្បីប្រៀបធៀបអត្ថបទដើម និងអត្ថបទដែលបានបកប្រែ។ ប្រសិនបើអត្ថបទដើមត្រូវបានផ្លាស់ប្តូរ ការបកប្រែចាស់មិនអាចចាត់ទុកជាកំណែចុងក្រោយបានទៀតទេ។ ប្រសិនបើគ្រួសារភាសាមួយបាត់ ឬការបកប្រែហួសសម័យ content:checkនឹងបរាជ័យ។ ដំណើរការបកប្រែការពារកូដ កូដក្នុងបន្ទាត់ និងតំណភ្ជាប់គោលដៅពីការបកប្រែអត្តសញ្ញាណបច្ចេកទេស ឬ URLs ។
នេះមិនមានន័យថាការបកប្រែដោយស្វ័យប្រវត្តិមានគុណភាពនៃការកែសម្រួលរបស់មនុស្សនោះទេ។ វាដោះស្រាយភាពពេញលេញ និងភាពស៊ីសង្វាក់គ្នានៃការធ្វើបច្ចុប្បន្នភាព ហើយភាសា និងសម្លេងប្រកបដោយវិជ្ជាជីវៈនៅតែទាមទារឱ្យមានការអានឡើងវិញ។ អត្ថបទដើមដែលមិនត្រូវបានផ្លាស់ប្តូរនឹងរក្សាការបកប្រែដែលមានស្រាប់ ហើយអត្ថបទដែលបានកែប្រែដោយដៃនឹងមិនត្រូវបានសរសេរជាន់ពីលើដោយការដំណើរការឡើងវិញទេ។
អានអរូបីក្នុងបញ្ជី ចុចដើម្បីផ្ទុកអត្ថបទ#
បន្ទាប់ពីមាតិកាត្រូវបានកើនឡើង ប្រសិនបើគេហទំព័រផ្ទុកអត្ថបទពេញលេញនៃអត្ថបទនីមួយៗ និងគ្រួសារភាសានីមួយៗនោះ ទំព័រមុខសុទ្ធនឹងយឺតណាស់។
Vite plugin បែងចែកមាតិកាជា entry point បី៖ virtual:content/latest សម្រាប់ទំព័រដើម, virtual:content/index សម្រាប់ទំព័រមាតិកា និង virtual:content/article/<slug> ដាច់ដោយឡែកសម្រាប់អត្ថបទនីមួយៗ។ ទំព័រដើមបង្ហាញកំណត់ត្រាថ្មីបំផុតបី និងកាតអត្ថបទបី។ ទិន្នន័យកំណត់ត្រានៅតែមានអត្ថបទពេញ និងការបកប្រែ ប៉ុន្តែកាតកាត់បន្ថយតែអត្ថបទដែលបង្ហាញប៉ុណ្ណោះ។ កាតអត្ថបទវែងមានតែសេចក្តីសង្ខេប និងទិន្នន័យពាក់ព័ន្ធ ខណៈដែលខ្លឹមសារពេញលេញត្រូវបានផ្ទុកដោយឡែកសម្រាប់អត្ថបទនីមួយៗតាមរយៈ dynamic import។
React's Suspense ទទួលខុសត្រូវចំពោះការរង់ចាំអត្ថបទ ហើយព្រំដែនកំហុសខាងក្រៅគឺទទួលខុសត្រូវចំពោះការបង្ហាញសារបរាជ័យក្នុងការផ្ទុក។ នៅពេលដែលសំណើអត្ថបទបរាជ័យ ចំណងជើង អរូបី និងការរុករកទំព័រនៅតែមាន។
វាក៏មានការដោះដូរនៅទីនេះផងដែរ៖ បច្ចុប្បន្ននេះ មានអត្ថបទមួយដុំក្នុងមួយអត្ថបទ ដែលមានការបកប្រែនៃគ្រួសារភាសានីមួយៗ ហើយវាមិនទាន់ត្រូវបានបំបែកទៅជាផ្នែកមួយក្នុងមួយគ្រួសារភាសានោះទេ។ អត្ថបទពេញលេញ និងការបកប្រែថាមវន្តត្រូវបានបញ្ចូលទៅក្នុងលិបិក្រមខ្លឹមសារ។ នៅពេលដែលបរិមាណមាតិកាបន្តកើនឡើង ទំហំសន្ទស្សន៍ និងចំនួននៃការទាញយកអត្ថបទពហុភាសា គឺជាជំហានបន្ទាប់ដែលត្រូវវាស់វែង។
ត្រូវតែមានការប្តូរខាងមុខ និងច្រកចូលសម្រាប់ការអានឋិតិវន្ត។#
យើងគ្រាន់តែធ្វើ SPA ហើយនៅពេលដែលយើងចែករំលែកវា ជាញឹកញាប់យើងឃើញតែចំណងជើង និងរូបភាពនៅលើគេហទំព័រប៉ុណ្ណោះ។ នេះមិនគ្រប់គ្រាន់សម្រាប់អត្ថបទទេ។
ដូច្នេះហើយ នៅពេលដំឡើង ឌីណាមិក អត្ថបទ និងស្លាក URL នីមួយៗមានសែល HTML ផ្ទាល់ខ្លួនរបស់វា ដែលមានចំណងជើង ការពិពណ៌នា អក្សរកាត់ បើកក្រាហ្វ និង JSON-LD ហើយអត្ថបទដើមដែលអាចអានបានត្រូវបានដាក់ក្នុង noscript។ អ្នកអាចទទួលបានខ្លឹមសារ និងគម្របផ្តាច់មុខនៃអត្ថបទនេះដោយមិនចាំបាច់ប្រតិបត្តិ JavaScript ។
ខ្លឹមសារដូចគ្នានេះក៏នឹងបង្កើត feed.xml, sitemap-content.xml, កំណែ Markdown នៃអត្ថបទ និងសន្ទស្សន៍អត្ថបទសម្រាប់ llms.txt។ ទាំងនេះគឺជាផលិតផលដែលបង្កើតឡើង មិនមែនជាសំណុំនៃមាតិកាផ្សេងទៀតដែលតម្រូវឱ្យមានការធ្វើសមកាលកម្មដោយដៃនោះទេ។
ទោះជាយ៉ាងណាក៏ដោយ ព្រំដែននៃ SEO ពហុភាសាក៏ត្រូវតែបញ្ជាក់ឱ្យច្បាស់ផងដែរ៖ **បច្ចុប្បន្ន បច្ចុប្បន្នភាព និងអត្ថបទចែករំលែក URL ដូចគ្នាក្នុងភាសានីមួយៗ ហើយភាសាត្រូវបានប្តូរដោយផ្នែកខាងមុខ។ ទំព័រមាតិកាឋិតិវន្ត មតិព័ត៌មាន និងកំណែ Markdown រក្សាអត្ថបទដើម។ ** គេហទំព័រនេះក៏មានការបង្ហាញជាមុនសម្រាប់ភាសា និងរបៀបពន្លឺ និងងងឹតផងដែរ។ នេះមិនមានន័យថាអត្ថបទនីមួយៗក៏មានទំព័រភាសាដែលអាចធ្វើលិបិក្រមបានដោយឯករាជ្យចំនួន 22 ផងដែរ។
ប្រសិនបើអ្នកត្រូវការអនុញ្ញាតឱ្យគ្រួសារភាសានីមួយៗត្រូវបានរួមបញ្ចូលដោយម៉ាស៊ីនស្វែងរកនាពេលអនាគត អ្នកនឹងត្រូវបន្ថែមផ្លូវគ្រួសារភាសា ទំព័រឋិតិវន្តដែលត្រូវគ្នា និង hreflang ។ នោះជាតម្រូវការមួយទៀតដែលឈុតនេះមិនទាន់បំពេញនៅឡើយ។
ការបង្ហោះក៏ជាដំណើរការដឹកជញ្ជូនផងដែរ។#
ដំណើរការបោះពុម្ពរបស់ខ្ញុំគឺ៖ សរសេរអត្ថបទដើម បង្កើតការបកប្រែ ពិនិត្យខ្លឹមសារ ដាក់ស្នើទៅ Git ហើយបន្ទាប់មកបញ្ចូលវាទៅក្នុង main។ សកម្មភាព GitHub ដែលមានស្រាប់នឹងបង្កើតគេហទំព័រឡើងវិញ ហើយដាក់ឱ្យប្រើប្រាស់វា។
npm run content:localize
npm run content:check
npm run test:content
npm run build
បើការបកប្រែមិនទាន់គ្រប់ភាសា ខ្ញុំនឹងបំពេញផ្នែកដែលខ្វះជាមុន។ អត្ថបទដែលនៅជាសេចក្តីព្រាងទុកតែក្នុងការមើលជាមុនលើម៉ាស៊ីនមូលដ្ឋាន។ លទ្ធផល production ក៏ពិនិត្យថាគ្មានទំព័រសេចក្តីព្រាង ហើយស្វែងរកសញ្ញាសេចក្តីព្រាងក្នុងឯកសារសាធារណៈសំខាន់ៗ ដូចជា feed, sitemap, ទំព័រដើម និង JavaScript bundle។ ដូចកូដដែរ មាតិកាមាន diff និងប្រវត្តិកំណែ ហើយអាចត្រឡប់ក្រោយជាមួយគ្នាបាន។
វិធីសាស្រ្តនេះលះបង់ការអាប់ដេតតាមពេលវេលាជាក់ស្តែង៖ ប្រសិនបើអ្នកផ្លាស់ប្តូរអត្ថបទមួយ អ្នកត្រូវរង់ចាំសម្រាប់ការដាក់ឱ្យប្រើប្រាស់។ ប៉ុន្តែសម្រាប់គេហទំព័របច្ចេកទេសរបស់ខ្ញុំ ខ្ញុំមានឆន្ទៈក្នុងការជួញដូរការរង់ចាំនេះ ជាថ្នូរនឹងផ្នែកខាងក្រោយតិចជាងមួយ ភាពអាស្រ័យរយៈពេលប្រតិបត្តិតិចជាងមួយ និងកំណត់ត្រាការផ្លាស់ប្តូរដែលងាយស្រួលតាមដាន។
តើពេលណាទើបសមគួរធ្វើបែបនេះ?#
ប្រសិនបើអ្នកជាអ្នកនិពន្ធ ភាពញឹកញាប់នៃការបង្ហោះអាចត្រូវបានបង្កើតឡើងវិញ ខ្លឹមសារជាអត្ថបទជាចម្បង ហើយអ្នកធ្លាប់ប្រើ Git ស្ថាបត្យកម្មនេះគឺសមរម្យណាស់។ ការអាប់ដេតខ្លីនឹងបន្ថយកម្រិតនៃការសរសេរ អត្ថបទរក្សាការទាញយកពេញលេញ ហើយពហុភាសាអនុញ្ញាតឱ្យមាតិកាដូចគ្នាត្រូវបានអានដោយមនុស្សកាន់តែច្រើន។
ប្រសិនបើតម្រូវការក្លាយជាកិច្ចសហការក្នុងពេលជាក់ស្តែងរវាងមនុស្សច្រើននាក់ ការគ្រប់គ្រងការអនុញ្ញាត មតិអ្នកអាន ការចូល ឬការជាវ នោះ CMS និងកម្មវិធីខាងក្រោយចាំបាច់ត្រូវវាយតម្លៃឡើងវិញ។ Pure-end នឹងមិនធ្វើឱ្យតម្រូវការទាំងនេះបាត់ដោយស្វ័យប្រវត្តិទេ ប៉ុន្តែខ្ញុំមិនបានដាក់ពួកវាទៅក្នុងវិសាលភាពនៃប្លុកនេះនៅពេលនេះទេ។
គោលការណ៍នៃការរចនានាពេលនេះគឺមានភាពជិតស្និទ្ធនឹងអ្វីដែលខ្ញុំបានសរសេរនៅក្នុង លំនាំរចនាស្ថាបត្យកម្មសម្រាប់ layout និង theme ច្រើន: ទំនួលខុសត្រូវដាច់ដោយឡែកពីគ្នាជាមុនសិន ហើយបន្ទាប់មកអនុញ្ញាតឱ្យច្បាប់ចែករំលែករក្សាស្ថិរភាព។
សម្រាប់គេហទំព័រនេះ ចំណុចសំខាន់គឺអនុញ្ញាតឱ្យខ្ញុំបន្តសរសេរ និងដឹងថាតើខ្លឹមសារអ្វីដែលកំពុងត្រូវបានចែកចាយរាល់ពេលដែលខ្ញុំបោះពុម្ពផ្សាយ។