最初の部分では、ページを準備しました。
コメントを読んだ後、私は少し余談します。このアプローチが理想的であると言っているのではありません。 このためのプログラムの可用性について知っています。 しかし、この記事の本質は、これを自分で行う方法についての考えを共有すると同時に、さまざまなテクノロジーを理解することでした。 たとえ間違っていたり長すぎたりしても、新しい方法を探すことは常に面白いですが、エラーで合格したとしても、新しい方法を教えてくれます。
ベースの模倣、すでにコメントで書いたように、これらは目的のテキストの内容を含むjsonファイルです。 質問：「なぜVueがここにあるのですか？スクリプトで同様に記述できる場合は？」 正直に言うと-HTMLレイアウトの美しさ。 さて、新技術の研究。
さあ始めましょう！
このページでは、変数はあまり多くないため、分離はまったく必要ありませんが、すべてを異なる部分に分割することを好みます。 ヘッダー、コンテンツ、フッターを担当するコンポーネントがあります（後で表示されます）。
最初に、jsonファイルを作成し、フォルダー「data」を作成し、その中に2つのファイル「ru.json」と「en.json」を作成します。 それらの中に、名前によると、私たちのテキストは嘘をつきます。 次に、htmlを開いて将来のために変更を加え、変数に名前を付けて、変数がテキストの意味を完全に反映するようにします。 私の場合、次のようなものでした。
<header class="transition tr-header" id="header"> <div class="container"> <div class="nav-holder"> <nav class="scroll-nav"> <ul> // <li class="actscroll"><a href="#sec1">{{main}} </a></li> <li><a href="#sec2">{{aboutCompany}}</a></li> <li><a href="#sec3">{{product}}</a></li> <li><a href="#sec4">{{equipment}}</a></li> <li><a href="#sec5">{{whereBuy}}</a></li> <li><a href="#sec6">{{service}}</a></li> <li><a href="#sec7">{{partners}}</a></li> <li><a href="#sec8">{{contacts}}</a></li> </ul> </nav> <div class="lang-dropdown"> <div class="flag-with-menu" id="flag-menu"> <div class="flag flag-ru" lang-value="ru-RU"></div> </div> <div id="lang-menu" class="lang-menu lang-first-init"> <div class="flag flag-us" lang-value="en-US"></div> </div> </div> </div> </div> </header> <section class="is_overlay page-title-bg" id="sec1" name="sec1"> <div class="bg bg-parallax run-par2" style="background-image: url(images/paraplan.jpg) "></div> <div class="overlay over-op6"></div> </section> <div id="contentPage"> // <section class="align-text" id="sec2" name="sec2"> <div class="content"> <div class="container"> <div class="row"> <div class="col-md-6 "> <h3>{{aboutCompanyHeader}}</h3> <div class="clearfix"></div> <div class="separator color-separator flt-l"></div> <div class="clearfix"></div> <p>{{aboutCompanyText}}</p> </div> <div class="col-md-6 "> <h3>{{ourMissionHeader}}</h3> <div class="clearfix"></div> <div class="separator color-separator flt-l"></div> <div class="clearfix"></div> <p>{{ourMissionText}}</p> </div> </div> </div> </div> </section> // , div </div>
言語ファイルに目を向けます：（すべてを1つの配列または1つのオブジェクトに追加できますが、この方法でテキストが壊れている方が便利です）。 「ru.json」
[ { "main": "" }, { "aboutCompany": " " }, { "product": " " }, { "equipment": " " }, { "whereBuy": " " }, { "service": "" }, { "partners": "" }, { "contacts": "" }, {"aboutCompanyHeader": " "}, { "aboutCompanyText": [ "«» — IT-, «». ", " 2006- «» ", " , 8 .", "«» , , ", " , , , IT — .", " «» - — Geektimes, ", " , ." ] }, { "ourMissionHeader": " " }, { "ourMissionText": [ " ", ". , ", " . , , ", " . . ", " . ", " , , ." ] } ]
さて、あなた自身はこのテキストの英語への翻訳に対処したいと思っています！
チェックした後、言語のメニューは私のために機能しなくなったので、同様の問題が発生した場合、ここに簡単な解決策があります： "multilanguage.js"
replaceElementAndSelect(userLanguage);
フォルダ「scripts」に新しい「main-function.js」を追加します。 そして、いくつかのメソッドを追加します（私の場合、後で再利用されたため）。
フォルダ「scripts」に新しい「index.js」を追加します。 そしてそれを分解する
$(document).ready(function () { var language = getCookie("language") || navigator.language || navigator.browserLanguage;
これをページに追加します。vue.min.jsを「scripts」フォルダーにダウンロードすることを忘れないでください
<script src="scripts/jquery.min.js"></script> <script src="scripts/vue.min.js"></script> <script src="scripts/cookie.js"></script> <script src="scripts/multilanguage.js"></script> <script src="scripts/main-function.js"></script> <script src="scripts/index.js"></script>
基本的にはそれだけで、美しいソリューションのためのかなりの量のコードです！
しかし、もう少し進んで、Vueコンポーネントをいくつか追加したいと思います（たとえば）。 たぶん誰かがこれから恩恵を受けるでしょう。 新しいコンポーネントのうち、これはフッターとサイトタイトルになります。そうでない場合、画像は空に見えます。
データフォルダーにfooter_ru.jsonとfooter_en.jsonの2つのファイルを作成します
[ {"getInTouch": ""}, {"region": ", -"}, {"street": " , 13 / 7" }, {"phone": "8 (812) 666-66-66"}, {"mobilePhone": "+7 (966) 666-66-66"}, {"email": "ivanov@mail.ru"}, {"secondEmail": "info@gmai.com"}, {"findUs": " "}, {"firstLine": ""}, {"secondLine": " "}, {"firstPartLastLine": "2014 OOO "}, {"colorPartLastLine": " "}, {"thirdPartLastLine": " "} ]
私は自分の場所でそれを再利用するため、一般的な機能を持つファイルにそれを置きます。 「main-function.js」に追加します
すべてを美しくするには、 Font Awesomeをダウンロードし、「css」フォルダーに追加します。
「style.css」で、美しい表示のためのクラスを追加します。
.page-widgets-holder { border-top:1px solid #ccc; } .page-widgets-holder h3 { font-size:14px; text-align:center; color:#666; font-family: 'Montserrat', sans-serif; text-transform:uppercase; margin-bottom:40px; position:relative; } .page-widgets-holder h3:before { content:''; position:absolute; width:40px; height:2px; background:#ccc; bottom:-10px; left:50%; margin-left:-20px; } .contact-info li { float:left; width:100%; margin-bottom:12px; } .contact-info li a { font-family: 'Montserrat', sans-serif; } .ci-adress { text-transform:uppercase; font-size:14px; text-align:left; color:#000; line-height:20px; } .ci-mail { font-size:14px; text-align:left; } .ci-phone { color:#666; line-height:20px; } .social-links { padding-bottom:58px; } .social-links li { display:inline-block; margin:0 1px; box-sizing:border-box; } .social-links li a { width:50px; height:50px; background:#eee; border-radius:100%; line-height:50px; float:left; color:#666; font-size:20px; box-shadow:0 0 0 20px transparent; } .social-links li a:hover { box-shadow:0 0 0 0 rgba(0,0,0,0.1); } .fa { margin-left: 0.75em; margin-top: 0.75em; }
「index.js」で、メソッド「initialize（）」に追加します。
function initialize() { createFooterComponent();
そして「index.html」に以下を追加します：
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> ...... <body> <div id="main"> <div id="wrapper"> <div class="content-holder"> <header class="transition tr-header" id="header"> ........... </header> <section class="is_overlay page-title-bg" id="sec1" name="sec1"> ........ </section> <div id="contentPage"> ........ </div> <div id="vueFooter"> <habr-footer v-bind="footerInfo"></habr-footer> </div> </div> </div> </div> </body>
さて、最後のコンポーネント、これはサイトのタイトルです。「main-function.js」に追加します。
var vmPageHeader, vueFooter;
「en.json」と「ru.json」にデータを追加します。
[ { "siteHeader": "«»" }, { "siteSubHeader": " " }, .......... ]
「index.js」で、メソッド「initialize（）」に追加します。
function initialize() { createFooterComponent(); createMainComponent(); createHeaderComponent(ruUrl, enUrl);
そして「index.html」に以下を追加します：
<link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css" media="all"> ...... <body> <div id="main"> <div id="wrapper"> <div class="content-holder"> <header class="transition tr-header" id="header"> ........... </header> <section class="is_overlay page-title-bg" id="sec1" name="sec1"> <div class="bg bg-parallax run-par2" style="background-image: url(images/paraplan.jpg) "></div> <div class="overlay over-op6"></div> <div class="content" id="vueHeader"> <habr-header :site-header="siteHeader" :site-sub-header="siteSubHeader"></habr-header> </div> </section> <div id="contentPage"> ........ </div> <div id="vueFooter"> ........ </div> </div> </div> </div> </body>
それは基本的にそれです！
ソースコードはこちらにあります。
jsonファイルへのパスに注意深く従うだけで、それらはあなたと異なる場合があります。