उपयोजन आणि ऑनलाइन

i18n.site एकल-पृष्ठ अनुप्रयोग आर्किटेक्चरचा अवलंब करते आणि वेबसाइट प्रवेश पृष्ठ आणि वेबसाइट सामग्री स्वतंत्रपणे तैनात केली जाते.

वरील भाषांतर चालवल्यानंतर, md/out/dev डिरेक्टरी अंतर्गत डिरेक्टरी htm आणि v तयार होतील.

येथे, dev चा अर्थ .i18n/htm/dev.yml कॉन्फिगरेशन फाइलवर आधारित आहे.

dev निर्देशिका :

htm निर्देशिका हे वेबसाइटचे प्रवेश पृष्ठ आहे.

v निर्देशिकेत आवृत्ती क्रमांकांसह वेबसाइट सामग्री आहे.

स्थानिक पूर्वावलोकन आवृत्ती क्रमांकाची काळजी घेत नाही आणि सर्व फायली out/dev/v/0.1.0 निर्देशिकेत कॉपी करेल.

अधिकृत प्रकाशनासाठी, बदललेल्या फायली नवीन आवृत्ती क्रमांक निर्देशिकेत कॉपी केल्या जातील.

-c सह कॉन्फिगरेशन फाइल निर्दिष्ट करा

भिन्न कॉन्फिगरेशन फाइल्स out निर्देशिकेमध्ये संबंधित निर्देशिका तयार करतील.

उदाहरणार्थ, .i18n/htm/main.yml out/main निर्देशिका तयार करेल.

dev.yml आणि main.yml ही डीफॉल्ट कॉन्फिगरेशन आहेत.

dev हे development चे संक्षेप आहे, जे विकास वातावरण दर्शवते, स्थानिक पूर्वावलोकनासाठी वापरले जाते आणि डीफॉल्ट कॉन्फिगरेशन फाइल देखील आहे. ol हे online चे संक्षेप आहे, जे ऑनलाइन वातावरणास सूचित करते, जे अधिकृत प्रकाशनासाठी वापरले जाते तेव्हा कमांड लाइन पॅरामीटर्स -n ते npm रिलीझ करण्यासाठी वापरतात.

वापरण्यासाठी कॉन्फिगरेशन फाइलचे नाव निर्दिष्ट --htm_conf कमांड लाइनवर तुम्ही इतर कॉन्फिगरेशन फाइल्स देखील तयार करू शकता:

उदाहरणार्थ:

i18n.site --htm_conf dist --save

येथे --save अद्यतन प्रकाशन आवृत्ती क्रमांक दर्शविते.

npmjs.com वर सामग्री प्रकाशित करा

वर सामग्री प्रकाशित करणे npmjs.com शिफारस केलेले डीफॉल्ट उपाय आहे ( फ्रंट-एंड उच्च उपलब्धता पहा).

npm & पोस्ट

nodejs स्थापित करा, npm login सह लॉग इन करा.

md/.i18n/htm/main.yml संपादित करा आणि md: YOUR_NPM_PACKAGE चे मूल्य npmjs.com स्वतःचे npm पॅकेज नाव म्हणून बदला!

नंतर md/.i18n/htm/main.package.json सुधारित करा

भाषांतर आणि प्रकाशित करण्यासाठी md निर्देशिकेत i18n.site --npm किंवा i18n.site -n चालवा.

तुम्ही प्रकाशित करण्यासाठी सतत एकीकरण वातावरण वापरत असल्यास, nodejs स्थापित करण्याची आवश्यकता नाही. फक्त लॉग-इन आणि प्रकाशन परवानग्या ~/.npmrc पर्यावरणामध्ये कॉपी करा.

तुम्ही main.yml मधील v: चे पॅकेज नाव बदलल्यास, कृपया प्रथम .i18n/v/main हटवण्याचे सुनिश्चित करा आणि नंतर ते प्रकाशित करा.

npm द्वारे प्रकाशित प्रॉक्सी सर्व्हर

मुख्य भूप्रदेश चीनमधील वापरकर्त्यांना नेटवर्क समस्या आल्यास आणि npm पॅकेजेस प्रकाशित करण्यात अक्षम असल्यास, ते प्रॉक्सी सर्व्हर कॉन्फिगर करण्यासाठी पर्यावरण व्हेरिएबल https_proxy सेट करू शकतात.

तुमचा प्रॉक्सी सर्व्हर पोर्ट 7890 आहे असे गृहीत धरून, तुम्ही लिहू शकता:

https_proxy=http://127.0.0.1:7890 i18n.site -n

स्वत: ची होस्ट केलेली सामग्री

तुम्हाला सामग्री स्व-होस्ट करायची असल्यास, प्रथम md/.i18n/htm/main.yml संपादित करा आणि v: //unpkg.com/i18n.site ला तुमच्या URL उपसर्गात बदला, जसे की v: //i18n-v.xxx.com .

md निर्देशिका प्रविष्ट करा आणि चालवा

i18n.site --htm_conf ol --save

किंवा संक्षेप

i18n.site -c ol -s

त्यानंतर, md/out/main/v निर्देशिकेतील सामग्री v: मध्ये सेट केलेल्या URL उपसर्ग मार्गावर कॉन्फिगर करा.

शेवटी, /.v ते 1s मध्ये समाप्त होणाऱ्या पथाची कॅशे वेळ कॉन्फिगर करा , अन्यथा नवीन रिलीज झालेल्या सामग्रीमध्ये त्वरित प्रवेश केला जाऊ शकत नाही.

अनावश्यक विनंत्या कमी करण्यासाठी इतर मार्गांसाठी कॅशे वेळ एक वर्ष किंवा त्याहून अधिक सेट केला जाऊ शकतो.

s3 वर सामग्री होस्ट करा

स्वयं-होस्ट सामग्रीसाठी, आपला स्वतःचा सर्व्हर वापरण्याव्यतिरिक्त, S3 + वापरणे हा दुसरा सामान्य पर्याय CDN .

तुम्ही S3 सर्व्हरवर लॉग इन rclone वापरू शकता, नंतर खालील स्क्रिप्ट पहा आणि सुधारित करा आणि प्रत्येक प्रकाशनासाठी फक्त S3 मध्ये वाढीव बदल कॉपी करा.

i18n.site -c ol -s
s3=your-s3
bucket=your-bucket
ver=$(head -1 .i18n/v/main/v.hash | cut -c 2-)
rclone copy --overwrite-dir out/main/htm/v/$ver $s3:/$bucket/$ver
rclone copy out/main/v/.v "$s3:/$bucket/"

CDN कॉन्फिगर करणे लक्षात ठेवा जेणेकरुन /.v मध्ये समाप्त होणाऱ्या पथाची कॅशे वेळ 1s असेल, अन्यथा नवीन रिलीज झालेल्या सामग्रीमध्ये त्वरित प्रवेश करता येणार नाही.

वेबसाइट प्रकाशित करा

वेबसाइट कुठेही तैनात केली जाऊ शकते github page आणि cloudflare page चांगले पर्याय आहेत.

वेबसाइट सिंगल-पेज ॲप्लिकेशन आर्किटेक्चर वापरत असल्यामुळे, . ते index.html नसलेल्या URL पथांचे पुनर्लेखन लक्षात ठेवा.

वेबसाइट एंट्री पृष्ठ फक्त एकदाच तैनात करणे आवश्यक आहे आणि त्यानंतरच्या सामग्री अद्यतनांसाठी वेबसाइट एंट्री पृष्ठ पुन्हा तैनात करण्याची आवश्यकता नाही.

गिथब पृष्ठावर उपयोजित करा

एक संस्था i18n-demo करण्यासाठी प्रथम github क्लिक करा .

त्यानंतर या संस्थेच्या अंतर्गत गोदाम i18n-demo.github.io तयार करा (कृपया तुम्ही तयार केलेल्या संस्थेच्या नावाने i18n-demo बदला):

मागील लेखातील सामग्री प्रकाशित करताना, out/main/htm तयार केले गेले आहे कृपया ही निर्देशिका प्रविष्ट करा आणि चालवा :

ln -s index.html 404.html

कारण github page URL पथ पुनर्लेखनास समर्थन देत नाही, त्याऐवजी 404.html वापरला जातो.

नंतर htm निर्देशिकेत खालील कमांड चालवा ( i18n-demo/i18n-demo.github.io.git तुमच्या स्वतःच्या वेअरहाऊस पत्त्याने बदलण्याचे लक्षात ठेवा) :

git init
git branch -M main
git remote add origin [email protected]:i18n-demo/i18n-demo.github.io.git
git push -u origin main -f

कोड पुश केल्यानंतर, तुम्ही त्यात प्रवेश करू शकण्यापूर्वी github page ची तैनाती यशस्वीरीत्या चालण्याची प्रतीक्षा करा (खाली दर्शविल्याप्रमाणे).

डेमो पृष्ठासाठी कृपया पहा:

https://i18n-demo.github.io

क्लाउडफ्लेअर पृष्ठावर तैनात करा

github page च्या cloudflare page , हे मार्ग पुनर्लेखन प्रदान करते आणि मुख्य भूभाग चीनसाठी अधिक अनुकूल आहे आणि ते वापरण्याची शिफारस केली जाते.

cloudflare page ची तैनाती सहसा वरील github page च्या तैनातीवर आधारित असते.

एक प्रकल्प तयार करा आणि वरील i18n-demo.github.io वेअरहाऊस बांधा.

प्रक्रिया खालील आकृतीमध्ये दर्शविली आहे:

संस्थे i18n-demo मध्ये प्रवेश देण्यासाठी कृपया Add Account वर क्लिक करा.

तुम्ही दुसऱ्या संस्थेचे वेअरहाऊस बांधले असल्यास, नवीन संस्था प्रदर्शित होण्यापूर्वी दोनदा अधिकृत करण्यासाठी तुम्हाला Add Account वर दोनदा क्लिक करावे लागेल.

पुढे, गोदाम i18n-demo.github.io निवडा, नंतर Begin setup वर क्लिक करा आणि त्यानंतरच्या चरणांसाठी डीफॉल्ट मूल्ये वापरा.

प्रथमच बंधनकारक केल्यानंतर, आपण त्यात प्रवेश करण्यापूर्वी आपल्याला काही मिनिटे प्रतीक्षा करावी लागेल.

उपयोजन केल्यानंतर, तुम्ही सानुकूल डोमेन नाव बांधू शकता.

सानुकूल डोमेन नाव बंधनकारक केल्यानंतर, कृपया खाली दर्शविल्याप्रमाणे, सिंगल-पेज ऍप्लिकेशनचे पथ पुनर्लेखन कॉन्फिगर करण्यासाठी डोमेन नावावर जा:

वरील चित्रातील नियम खालीलप्रमाणे i18n.site .

(http.host in {"i18n.site"}) and not (
substring(http.request.uri.path,-3) in {".js" ".gz"} or
substring(http.request.uri.path,-4) in {".htm" ".rss" ".css" ".svg" ".ico" ".png" ".xml" ".txt"} or
substring(http.request.uri.path,-5) in {".html" ".avif" ".json"} or
ends_with(http.request.uri.path,".webmanifest")
)

याव्यतिरिक्त, कृपया खाली दर्शविल्याप्रमाणे कॅशे नियम कॉन्फिगर करा आणि कॅशे कालावधी एका महिन्यावर सेट करा.

कृपया वरील चित्रातील दुसऱ्या चरणात जुळणारे डोमेन नाव तुम्ही बांधलेल्या डोमेन नावात बदला.

मुख्य भूमी चीनमध्ये वेबसाइट तैनाती ऑप्टिमाइझ करणे

तुम्हाला मुख्य भूमी चीनच्या नेटवर्क वातावरणात अधिक चांगली प्रवेशयोग्यता कामगिरी मिळवायची असल्यास, कृपया प्रथम डोमेन नावाची नोंदणी करा .

त्यानंतर, मुख्य भूभागातील क्लाउड विक्रेत्यांचे ऑब्जेक्ट स्टोरेज वापरा + खालील सामग्री तैनात करा CDN out/main/htm

सिंगल-पेज ॲप्लिकेशन्सशी जुळवून घेण्यासाठी तुम्ही एज कॉम्प्युटिंग वापरू शकता उदाहरणार्थ, Baidu Smart Cloud CDN याप्रमाणे कॉन्फिगर केले जाऊ शकते:

const uri = r.uri, p = uri.lastIndexOf(".");
if (
  p < 0 ||
  !"|js|css|htm|html|md|avif|json|ico|xml|rss|gz|mp4|png|svg|txt|webmanifest|".includes(
    "|" + uri.slice(p + 1) + "|",
  )
) {
  const ua = r.headersIn["User-Agent"].toLowerCase()
  if (/facebookexternalhit|slurp|bot|spider|curl/.test(ua)) {
    r.return(
      302,
      (/baidu|yisou|sogou|360|byte/.test(ua) ? "/zh" : "/en") + r.uri + ".htm",
    )
  } else {
    r.uri = "/index.html"
  }
}

r.respHeader(() => {
  const t = [], out = r.headersOut;
  ["Content-MD5", "Age", "Expires", "Last-Modified"].forEach(
    i => delete out[i]
  )
  r.rawHeadersOut.forEach(i => {
    const key = i[0].toLowerCase()
    if (key.startsWith("x-") || key.startsWith("ohc-")) {
      delete out[key]
    }
  })
  out["Cache-Control"] = "max-age=" + 9e5
  // प्रतिसाद शीर्षलेख डीबग आउटपुटवर सेट केले जाऊ शकतात, जसे की out.XXX = 'MSG';
})

कारण रेकॉर्ड MX आणि रेकॉर्ड CNAME एकत्र असू शकत नाही, जर तुम्हाला एकाच वेळी डोमेन नाव ईमेल प्राप्त करायचे असतील, cname_flatten तुम्हाला स्क्रिप्ट CNAME ला रेकॉर्ड A मध्ये सहकार्य करावे लागेल.

याशिवाय, मुख्य भूप्रदेश चीनमधील क्लाउड विक्रेत्यांचे परदेशातील रहदारी शुल्क तुलनेने महाग असल्याने, जर तुम्हाला खर्च ऑप्टिमाइझ करायचा असेल, तर तुम्ही Huawei DNS चे मोफत भौगोलिक रिझोल्यूशन आणि Cloudflare for SaaS चे कस्टम डोमेन नाव (खाली दर्शविल्याप्रमाणे) वापरू शकता ट्रॅफिक डायव्हर्शन──मेनलँड चायना मधील ट्रॅफिक रूटिंग Baidu Cloud CDN , आंतरराष्ट्रीय रहदारी cloudflare .

हे डिप्लॉयमेंट ऑप्टिमायझेशन सोल्यूशन्स अधिक क्लिष्ट आहेत आणि भविष्यात वेगळ्या अध्यायांमध्ये सादर केले जातील.

सामान्य डोमेन नाव पुनर्निर्देशन

तुम्ही तुमच्या मुख्य वेबसाइट म्हणून वेबसाइट जनरेट करण्यासाठी i18n.site वापरत असल्यास, तुम्हाला सहसा पॅन-डोमेन रीडायरेक्शन कॉन्फिगर करण्याची आवश्यकता असते, म्हणजेच, *.xxx.com ( www.xxx.com सह) ते xxx.com वर पुनर्निर्देशित प्रवेश.

ही आवश्यकता Alibaba Cloud CDN EdgeScript ( इंग्रजी दस्तऐवज / चीनी दस्तऐवज ) च्या मदतीने पूर्ण केली जाऊ शकते.

CDN क्लाउडमध्ये डोमेन नाव जोडा आणि अलीबाबा क्लाउड CDN मध्ये डोमेन नाव *.xxx.com ते CNAME दर्शवा.

उदाहरणार्थ, वरील चित्रातील *.i18n.site चे पॅन-डोमेन नाव पुनर्निर्देशन कॉन्फिगरेशन खालीलप्रमाणे आहे:

rewrite(concat('https://i18n.site',$uri), 'redirect',301)

nginx सह तैनात करा

कृपया server nginx खालीलप्रमाणे कॉन्फिगरेशन जोडा कृपया तुमच्या स्वतःच्या प्रकल्प out/main/htm च्या मार्गावर /root/i18n/md/out/main/htm बदला:

location / {
  root  /root/i18n/md/out/main/htm;
  add_header Cache-Control "max-age=9999999";
  if ($uri !~* \.(avif|css|html|ico|js|json|png|svg|txt|webmanifest|xml)$) {
     rewrite ^ /index.html last;
  }
}

github action सतत एकत्रीकरणावर आधारित

तुमचे github action कॉन्फिगर करण्यासाठी तुम्ही खालील गोष्टींचा संदर्भ घेऊ शकता:

name: i18n.site

on:
  workflow_dispatch:
  push:
    branches:
      - main
      - dist

jobs:
  i18n:

    permissions:
      repository-projects: write
      contents: write

    runs-on: ubuntu-latest

    steps:
      - name: checkout
        uses: actions/checkout@v4

      - name: https://i18n.site
        uses: i18n-site/github-action-i18n.site@main
        with:
          I18N_SITE_TOKEN: ${{ secrets.I18N_SITE_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

कॉन्फिगरेशनमध्ये पाहिल्याप्रमाणे, शाखा main आणि शाखा dist वर ढकलताना हा कार्यप्रवाह ट्रिगर केला जातो.

वर्कफ्लो दस्तऐवज प्रकाशित करण्यासाठी शाखेच्या नावाशी संबंधित कॉन्फिगरेशन फाइल वापरेल, येथे .i18n/htm/main.yml आणि .i18n/htm/dist.yml अनुक्रमे प्रकाशन कॉन्फिगरेशन म्हणून वापरले जातील.

दस्तऐवज प्रकाशन प्रक्रियेसाठी आम्ही खालील सर्वोत्तम पद्धतींची शिफारस करतो:

जेव्हा बदल शाखा main मध्ये ढकलले जातात, तेव्हा दस्तऐवज तयार करण्यासाठी ट्रिगर केला जातो आणि पूर्वावलोकन स्टेशनवर तैनात केला जातो (पूर्वावलोकन स्टेशन उपलब्ध आहे github page ).

पूर्वावलोकन साइटवर दस्तऐवज बरोबर असल्याची पुष्टी केल्यानंतर, कोड विलीन केला जाईल आणि शाखा dist वर ढकलला जाईल आणि अधिकृत बिल्ड आणि डिप्लॉयमेंट ऑनलाइन होईल.

अर्थात, वरील प्रक्रियेची अंमलबजावणी करण्यासाठी अधिक कॉन्फिगरेशन लिहिणे आवश्यक आहे.

वर्कफ्लो स्क्रिप्टिंगसाठी तुम्ही प्रत्यक्ष प्रकल्पाचा संदर्भ घेऊ शकता github.com/fcdoc/doc

कॉन्फिगरेशनमधील secrets.I18N_SITE_TOKEN आणि secrets.NPM_TOKEN साठी तुम्हाला कोड बेसमध्ये गुप्त व्हेरिएबल्स कॉन्फिगर करणे आवश्यक आहे.

I18N_SITE_TOKEN i18n.site/token

कॉन्फिगरेशनमध्ये NPM_TOKEN हे पॅकेज npm चे प्रकाशन टोकन आहे (खाली दर्शविल्याप्रमाणे) भेट npmjs.com आणि एक टोकन तयार करा.

निर्देशिका रचना

public

वेबसाइटच्या स्थिर फाइल्स, जसे की favicon.ico , robots.txt , इ.

येथे आयकॉन फायली तयार केल्या जाऊ शकतात realfavicongenerator.net

.i18n

.i18n डिरेक्ट्री अंतर्गत i18n.site च्या कॉन्फिगरेशन फाइल्स, ट्रान्सलेशन कॅशे इत्यादी आहेत. तपशीलांसाठी पुढील प्रकरण "कॉन्फिगरेशन" पहा.

en

स्रोत भाषा निर्देशिका, .i18n/conf.yml कॉन्फिगरेशन फाइलमधील fromTo पैकी en शी संबंधित

i18n:
  fromTo:
    en: zh

कृपया भाषांतराच्या कॉन्फिगरेशनचा संदर्भ घ्या i18