現在、1ページのサイトが流行しています。 訪問者はすべての重要な情報を1つの画面に表示します。 マーケティング担当者は、プロモーションサイトや美しいリンク先ページを作成するのが大好きです。 一方では、これはコンバージョンを増やすスポーツであり、他方では、 デザインアイデアの競争です。 技術的な部分に関しては、ここでは何も興味深いことはありません-静的コンテンツの1ページです。 そのようなサイトのために、 CMSを構成することは意味がありませんが、誰もがHTMLを編集してホスティングにファイルをアップロードできるわけではありません。
1ページのサイトが非常に人気がある場合、世界を救い、人々の生活を楽にします。そのようなサイトを作成および管理するためのサービスを開発します。 技術的には、2つの主要なタスクを解決する必要があります。html-staticの返却と、サイト管理者による編集です。
バックエンド
静的リターン= Nginx。 サイトのメインおよび唯一のページをデータベースに保存し、出力をキャッシュできます。 しかし、私たちはそれを複雑にしません-ファイルシステムは行います。 共有ホスティングではどのように配置されますか？ 各サイトにはパパがいます...
server { listen 80 default_server; server_name ~^(?<subdomain>.+)\.svsite\.com$; root /home/sites/$subdomain; index index.html; # /index.html # - 404 location = / { } location = /index.html { } location / { return 404; } }
シェルスクリプトはindex.htmlの編集にも対応しますが、そのような禁欲主義者にならないようにしましょう。 もちろん、フロントエンドとバックエンドの両方を1つの言語で実装するのは魅力的です...いいえ。 Node.js-これはベータ版を残さず、socket.ioを必死に必要とする人向けです。 ポールマッカートニーirを言い換えると、私たちの難しい選択を要約するために：
させて、させて、させて、させて
ささやく知恵の言葉、ピーピーピー
ファイルの内容を変更するために、PHPにはfile_put_contentsという単純な名前の関数があります。 特定のhtmlのみを編集する必要があり、ドキュメントの残りの部分はそのままにしておく場合はどうしますか？ ユーザーが編集したテキストの周りにきちんとしたレイアウトを台無しにさせないようにしましょう！
そして、正規表現でHTMLを解析するのはマナーが悪いと言ってもらいましょう。 次のストリートマジックにより、既知のIDを持つタグのコンテンツを置き換えることができます。
function updateElement($html, $id, $innerHtml) { $re = '/(<(\w+)[^>]+\b(?:id)=["\']?' . $id . '["\']?[^>]*>)(?:(<\\2[^>]*>(?:(?1)|.)*?<\/\\2>)|.)*?(<\/\\2>)/is'; if (preg_match($re, $html, $m)) { $html = str_replace($m[0], $m[1].$innerHtml.$m[4], $html); } return $html; }
Nginx + php-fpmの束をどこに配置しますか？ それでは-クラウドで、すべてのトレンディなスタートアップと同じように。 Amazonは高価で、投資家がいないので、Selectelなどの苦労して稼いだルーブル用の仮想マシンを作成します。
フロントエンド
シンプルなホスティングとCMS-100万。 古い実績のある方法でUXの新しい高みに到達しようとします。
まず、唯一のindex.htmlのソースコードの編集を簡単にする必要があります。 <textarea>タグとCodeMirrorコードの強調表示を備えた優れたエディターは、 これに役立ちます。 エースはまだありますが、それはより古くて重いです。
ページのコンテンツを編集するには、ハイパーテキストの愛好家だけでなく、WordのすべてのユーザーがWYSIWYGエディターを固定する必要があります。 常にgetと一致するようにするには、編集時にすべてのスタイル、スクリプトなどを含むライブサイトを表示します。 魔法のhtml属性contenteditableが助けになります。XmlHttpRequestのように、貧しいInternet Explorerに感謝する必要があります。 比較的最近、 CKEditorビジュアルエディターはcontenteditableを使用することを学びました。イノベーションを活用しましょう。 Redactorは、このタスクに最もふさわしいものですが、その価格はまだ手頃な価格ではありません。
熱心な読者は、技術的な実装では、グラフィックなどの1ページのWebサイトの重要なコンポーネントをバイパスしていることにすでに気付いています。 エディターはどこに写真をアップロードしますか？
サイクリストのモットーは、結果よりもプロセスの方が重要だということです。 確立されたスキームによると、既製のuploadcare.comサービスのサービスを使用します。これにより、画像をアップロード/トリミングするための美しいウィジェットだけでなく、すべてのグラフィックコンテンツの陽気なCDNも提供されます。
ゲシュタルト
だから物語は終わりに近づいています。 記述されたすべてのコンポーネントをリンクするコードを数十行書くことは残っています。 はい、ちなみに、私たちは非常に怠け者であるため、承認を外部委託することさえあります。 すべてのブラウザーに統合することが提案されているBrowserIDプロトコルに基づく認証システムであるMozilla Personaがこれを処理します。 Mozillaを信頼していますか？ それらはすべてとてもオープンで非営利的です。
私はあなたがどうするかわかりませんが、私は何が起こったのかしました。 リンクは確実なプロファイルにあります。