前の記事では、静的なWebサイトジェネレーターを使用するかどうかの理由について説明しました。要するに、静的なWebサイトジェネレーターは、テンプレートと生データ(通常はMarkdownファイルに含まれる)からのHTMLのみを含むページファイルを構築します。ホスティング、パフォーマンス、セキュリティのオーバーヘッドなしで、いくつかのCMSの利点を提供します。
静的Webサイトは、次のようなさまざまなプロジェクトに適している場合があります。
- 小さなウェブサイトまたは個人ブログ。数十ページのウェブサイト、まれな投稿、1人または2人の著者が理想的かもしれません。
- REST APIなどの技術文書。 一連のWebビューを必要とするアプリケーションプロトタイプ。
- e-books —マークダウンファイルは、PDFまたは他の形式およびHTMLに変換できます。
- 基本的に、静的なWebサイトジェネレーターは建築ツールです。それを使用して、タスクを実行したり、グラントやガルプのようにプロジェクトの足場をプロジェクトできます。
Metalsmithは、従来のCMSのオーバーヘッドなしで軽量のWebサイトを作成するのに最適な柔軟なプラグ可能な静的Webサイトジェネレーターです。
- メタルスミスのインストールとセットアップには、新しいプロジェクトディレクトリの初期化とNPM経由で必要なプラグインをインストールするnode.jsが必要です。
- メタルスミスのプロジェクト構造には、ソースファイル、テンプレート、資産の整理が含まれ、開発と生産構造を明確に区別します。
- Metalsmithは、さまざまなプラグインを使用して、Markdownファイルの処理、RSSフィードの作成、すべてのサイトマップをすべてビルドファイルで構成しているサイトマップなどの機能を拡張します。
- カスタムプラグインは、メタデータのセットアップやデバッグ情報の追加など、特定のタスクを処理して、ウェブサイトのコンテンツと構造の管理におけるメタルスミスの汎用性を強化するなどの特定のタスクを処理することができます。
- 金属スミスのビルドプロセスは、より複雑なシナリオに対処するためにGulpなどのタスクランナーと統合できますが、メタルスミス自体はより単純なプロセスに十分です。
- なぜメタルスミスを選ぶのですか?
このチュートリアルは、このチュートリアルにメタルスミスを選択しました
特定の種類のプロジェクト(ブログなど)をターゲットにしていません
さまざまなテンプレートおよびデータ形式のオプションをサポートしています
軽量- 依存関係はめったにありません モジュラー構造の使用
- は、シンプルなプラグインアーキテクチャと を提供します
- 簡単に開始できます。
- このチュートリアルは、デモのWebサイトを構築しました。デザイン賞は獲得しませんが、基本的な概念を示しています。 Metalsmithビルドコードは、GitHubリポジトリからチェックおよびインストールできます。または、ここで指示に従って、独自の基本サイトを作成することもできます。
数回金属スミスを使用しました。これがすべての静的Webサイトを構築する究極の方法だとは思わないでください!
インストールメタルスミス
node.jsがインストールされていることを確認してください(たとえばNVMを使用して)、プロジェクトや初期化などの新しいプロジェクトディレクトリを作成します。
<code>cd project && cd project npm init -y </code>メタルスミスをインストールし、サイトの構築に使用するさまざまなプラグインをインストールします。これらは次のとおりです
Metalsmith-Assets - メタルスミスビルドに静的資産を含める
- Metalsmith-Browser-Sync - browseryncをワークフローに統合します
- Metalsmith-Collections - グローバルメタデータにファイルのコレクションを追加
- Metalsmith-Feed - コレクションのRSSフィードを生成
- Metalsmith-HTML-Minifier - Kangax/HTML-MINIFIER を使用してHTMLファイルを圧縮します
- Metalsmith-in-Place - ソースファイルにテンプレートの構文をレンダリング
- Metalsmith-Layouts - ソースファイルにレイアウトを適用します
- Metalsmith-Mapsite - sitemap.xmlファイルを生成
- Metalsmith-Markdown - Markdownファイルを変換
- Metalsmith-Permalinks - ファイルにカスタムパーマリンクモードを適用します
- Metalsmith-Publish - ドラフト、プライベート、将来の日付をサポートする投稿Metalsmith-Word-Count - HTMLファイルのすべての段落の単語数/平均読み取り時間を計算します
- プロジェクト構造
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>プロジェクトのソース(SRC)およびビルド(ビルド)ディレクトリとして、次の構造を使用します。
次のようにサンプルファイルを作成するか、デモSRCディレクトリから直接コピーできます。
ページ
ページマークダウンファイルはSRC/HTMLに含まれています。これには、各Webサイトセクションの第1レベルのサブディレクトリ、つまり
を含めることができます。
src/html/start - 特定の順序でプロジェクトを説明するページ
- src/html/article - 反その順序で配置されたさまざまな記事
- src/html/連絡先 - 単一連絡先ページ
- 各ディレクトリにはindex.mdファイルが含まれています。これは、そのセクションのデフォルトページです。他のページは、一意の名前を使用できます。
などのディレクトリベースのパーマリンクに変換します
src/html/start/index.mdは/start/index.html
になります- src/html/start/installation.mdは/start/installation/index.html
- になります
- 各マークダウンファイルは、「序文」と呼ばれるコンテンツとメタ情報を提供します
優先度:0(低)から1(高)の間の数字。これを使用してメニューを並べ替えてXMLサイトマップを定義します。
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
パブリッシュ:必要になる前に公開されないことを確認するために、ドラフト、プライベート、または将来の日付として設定できます。
- 日付:記事の日付。設定されていない場合は、将来のリリース日またはファイル作成日を使用します。
- レイアウト:使用するHTMLテンプレート。
- テンプレート
- HTMLページテンプレートはSRC/テンプレートに含まれています。 2つのテンプレートが定義されています:
- src/html/template/page.htmlデフォルトのレイアウト
- src/html/template/article.md記事レイアウトは、リンクの前後に日付を表示するレイアウト
他のオプションはサポートされていますが、ハンドルバーテンプレートシステムが使用されます。典型的なテンプレートには、{{{contents}}}タグが必要です。ページコンテンツと{{title}}などの序文値を含む:
<code>cd project && cd project npm init -y </code>
{&gt; {&gt;
パートセクション - またはHTMLスニペットファイルは、SRC/Partialsに含まれています。これらは主にテンプレートで使用されていますが、次のコードを使用してコンテンツページに含めることもできます。
ここで、partialNameはSRC/partialsディレクトリのファイルの名前です。
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
静的資産
静的資産(画像、CSS、JavaScriptファイルなど)は、SRC/資産に含まれています。すべてのファイルとサブディレクトリは、Webサイトのルートにそのままコピーされます。
カスタムプラグイン
サイトの構築に必要なカスタムプラグインは、LIBディレクトリに含まれています。
build directory
Webサイトはビルドディレクトリに組み込まれています。 2つの方法でWebサイトを構築します
開発モード:HTMLは圧縮されず、テストWebサーバーを起動します。
- 生産モード:node_envが生産に設定されている場合、ビルドディレクトリがクリアされ、最終的な圧縮ファイルが生成されます。
- 最初のビルドファイルを定義します
node ./build.jsで実行し、静的Webサイトがビルドディレクトリに作成されます。マークダウンはHTMLとして解析されますが、ビルドプロセス中にテンプレートを含めなかったため利用できません。
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>Metalsmithプラグイン
表面上、金属製のビルドファイルは、Gulpで使用されているファイルと似ています(ただし、ストリームは使用しません)。適切な引数を使用して、プラグインをMetalsmith使用方法に渡して、プラグインを呼び出します。プラグイン自体は、3つのパラメーターを受け入れる別の関数を返す必要があります。
各ページに関する情報を含むファイルアレイ
メタデータや
などのグローバル情報を含むメタルスミスオブジェクト プラグインがその作業を完了した後に呼び出さなければならない完了関数- この単純な例は、すべてのメタデータとページ情報をコンソールにログに記録します(build.jsで定義できます):
- Metalsmithビルドコードを更新してこのプラグインを使用できます。 このデバッグ機能は、独自のカスタムプラグインを作成するのに役立ちますが、必要な機能のほとんどはすでに書かれています。MetalsmithWebサイトにプラグインの長いリストがあります。
より良いビルドを作成します
<code> lang="en"> > {{> meta }} > > {{> header }} <main>></main> > {{#if title}} <h1 id="gt">></h1>{{ title }}> {{/if}} {{{ contents }}} > > {{> footer }} > > </code>デモサイトビルドファイルの主要部分を以下に説明します。
node_env環境変数が生産に設定されている場合(mac/linuxまたはnode_env = windowsでの生産)、変数devbuildはtrueに設定されます:
<code>{{> partialname }}</code>
<code>cd project && cd project npm init -y </code>
ホームディレクトリはdirオブジェクトで定義されているため、再利用できます。
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>メタルスミスとプラグインモジュールをロードします。注:
- 優れたbrowsersyncテストサーバーは、開発ビルドを作成するときにのみ必要です
- HTMLMINが参照する HTMLコンプレッサーモジュールは、生産ビルドを作成するときにのみ必要です
- 3つのカスタムプラグインが定義されています。SetDate、Moremeta、およびDebug(以下で詳しく説明します)
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>SiteMetaオブジェクトは、各ページに適用される情報を使用して定義されます。重要な値はドメインとルートパスであり、開発または生産の構築に基づいて設定されています:
また、
<code> lang="en"> > {{> meta }} > > {{> header }} <main>></main> > {{#if title}} <h1 id="gt">></h1>{{ title }}> {{/if}} {{{ contents }}} > > {{> footer }} > > </code>TemplateConfigオブジェクトを定義して、テンプレートのデフォルト値を設定します。これは、Metalsmith-in-PlaceおよびMetalsmith-Layoutsプラグインによって使用されます。これにより、ハンドルバーを使用したページおよびテンプレートのレンダリングが可能になります。
Metalsmithオブジェクトは以前と同じように初期化されますが、SiteMetaオブジェクトをメタデータメソッドに渡して、この情報が各ページで利用可能であることを確認します。したがって、サイト名を取得するには、任意のページの{{name}}のようなアイテムを参照できます。
<code>{{> partialname }}</code>
最初のプラグインコールMetalsmith-Publishを呼び出します。これは、序文の公開値がドラフト、プライベート、または将来に設定されているファイルを削除します:
<code>// basic build 'use strict'; var metalsmith = require('metalsmith'), markdown = require('metalsmith-markdown'), ms = metalsmith(__dirname) // the working directory .clean(true) // clean the build directory .source('src/html/') // the page source directory .destination('build/') // the destination directory .use(markdown()) // convert markdown to HTML .build(function(err) { // build the site if (err) throw err; // and throw errors }); </code>
setDateは、lib/metalsmith-setdate.jsに含まれるカスタムプラグインです。各ファイルには「日付」値が設定されていることが保証され、前の質問で値が定義されていなくても、リリース日またはファイルの作成時間にできるだけ戻ることで達成できます。
<code>function debug(logToConsole) { return function(files, metalsmith, done) { if (logToConsole) { console.log('\nMETADATA:'); console.log(metalsmith.metadata()); for (var f in files) { console.log('\nFILE:'); console.log(files[f]); } } done(); }; }; </code>
Metalsmith-Collectionsは、ソースディレクトリ内の場所またはその他の要因に基づいて各ページをカテゴリまたは分類に割り当てるため、最も重要なプラグインの1つです。日付や優先順位などの前メタルを使用してファイルを再注文し、コレクションにカスタムメタデータを設定できます。コード定義:
<code>ms = metalsmith(__dirname) // the working directory .clean(true) // clean the build directory .source('src/html/') // the page source directory .destination('build/') // the destination directory .use(markdown()) // convert Markdown to HTML .use(debug(true)) // *** NEW *** output debug information .build(function(err) { // build the site if (err) throw err; // and throw errors }); </code>
SRC/HTML/STARTディレクトリの各ファイルの開始コレクション。ファイルの前の質問で設定された優先度の値によってそれらを並べ替えます。
- src/html/articleディレクトリの各ファイルの記事コレクション。それらを反その順序で並べ替えます
- index。*という名前の各デフォルトページのページコレクション。ファイルの前の質問で設定された優先度の値によってそれらを並べ替えます。
- 次はHTML変換へのマークダウンで、その後、ビルドのディレクトリ構造を定義するMetalsmith-Permalinksプラグインが続きます。 Moremetaセット:以下の各ファイルのMainCollection:
<code>devBuild = ((process.env.NODE_ENV || '').trim().toLowerCase() !== 'production') </code>
Metalsmith-Word-Countは、記事の単語の数を計算し、それを読むのにかかる時間を計算します。 parameter {raw:true}出力番号のみ:
<code>dir = { base: __dirname + '/', lib: __dirname + '/lib/', source: './src/', dest: './build/' } </code>
Moremetaは、lib/metalsmith-moremeta.jsに含まれるもう1つのカスタムプラグインです。各ファイルに他のメタデータを添付します:
- root:ルートディレクトリへの絶対または計算された相対ファイルパス
- ispage:indexという名前のデフォルトの部分ページにtrueに設定します。* MainCollection:メインコレクション名、つまり開始または記事
- レイアウト:設定されていない場合、メインコレクションのメタデータからレイアウトテンプレートを決定できます
- navmain:トップレベルのナビゲーションオブジェクトの配列
- navsub:二次ナビゲーションオブジェクトの配列
- ナビゲーションを処理するため、プラグインコードはより複雑です。よりシンプルな階層が必要な場合は、より簡単なオプションがあります。
Metalsmith-in-PlaceおよびMetalsmith-Layoutsプラグインは、それぞれインページとテンプレートのレイアウトを制御します。上記と同じTemplateConfigオブジェクトを渡します:
<code>cd project && cd project npm init -y </code>
htmlminが設定されている場合(生産ビルドで)、HTMLを圧縮できます:
<code>npm install --save-dev metalsmith metalsmith-assets metalsmith-browser-sync metalsmith-collections metalsmith-feed metalsmith-html-minifier metalsmith-in-place metalsmith-layouts metalsmith-mapsite metalsmith-markdown metalsmith-permalinks metalsmith-publish metalsmith-word-count handlebars </code>
debugは、lib/metalsmith-debug.jsに含まれる最終的なカスタムプラグインです。上記のデバッグ関数に似ています:
<code>--- title: My page title description: A description of this page. layout: page.html priority: 0.9 date: 2016-04-19 publish: draft --- This is a demonstration page. ## Example title Body text.</code>
開発ビルドをテストできるように、browsersyncテストサーバーを起動します。以前に使用したことがない場合は、魔法のように見えます。変更を加えるたびに、ウェブサイトが魔法のようにリフレッシュし、Webサイトをスクロールまたは閲覧すると、2つ以上のブラウザのビューが同期します。
<code> lang="en"> > {{> meta }} > > {{> header }} <main>></main> > {{#if title}} <h1 id="gt">></h1>{{ title }}> {{/if}} {{{ contents }}} > > {{> footer }} > > </code>
最後に、
を使用できます<code>{{> partialname }}</code>
Metalsmith-MapsiteはXML SiteMapを生成します
- Metalsmith-Feed記事コレクションのページのRSSフィードを生成
- Metalsmith-Assetsは、SRC/アセットのファイルとディレクトリをコピーして、変更せずに構築します。
- 残りは、ウェブサイトを作成するための最後の.build()ステップです。
<code>// basic build 'use strict'; var metalsmith = require('metalsmith'), markdown = require('metalsmith-markdown'), ms = metalsmith(__dirname) // the working directory .clean(true) // clean the build directory .source('src/html/') // the page source directory .destination('build/') // the destination directory .use(markdown()) // convert markdown to HTML .build(function(err) { // build the site if (err) throw err; // and throw errors }); </code>完了したら、node ./build.jsを再度実行して静的Webサイトを構築できます。
<code>function debug(logToConsole) { return function(files, metalsmith, done) { if (logToConsole) { console.log('\nMETADATA:'); console.log(metalsmith.metadata()); for (var f in files) { console.log('\nFILE:'); console.log(files[f]); } } done(); }; }; </code>に注意を払うもの
シンプルなメタルスミスのウェブサイトを構築するときに多くのことを学びましたが、次の問題に注意してください。
互換性のないプラグインプラグインは、他のプラグインと競合する場合があります。たとえば、相対ルートパスのメタルスミスルートパスを計算することは、カスタムビルドディレクトリ構造を作成するMetalsmith-Permalinksとあまり互換性がありません。 Lib/Metalsmith-Moremeta.jsプラグインにカスタムルートパス計算コードを作成することで、この問題を解決しました。
プラグインの順序は重要です
プラグインが間違った順序で配置されている場合、プラグインは依存または競合する場合があります。たとえば、RSSを生成するMetalsmith-FeedプラグインをMetalsmith-Layouts後に呼び出して、RSS XMLがページテンプレートで生成されないことを確認する必要があります。
BROWSERSYNC REBUILD ISSUE
browsersyncがファイルを実行および編集すると、コレクションは補償されますが、古いデータはまだ存在しているようです。これは、lib/metalsmith-moremeta.jsカスタムプラグインの問題かもしれませんが、メニューとフロントおよびバックリンクは同期していない場合があります。それを修正するには、Ctrl/CMD Cを使用してビルドを停止し、ビルドを再起動します。
まだガルプが必要ですか?
Gulpなどのタスクマネージャーを使用する人々は、Metalsmithがおなじみのビルドプロセスを提供していることに気付くでしょう。 SASSを使用して、CSSの前処理、画像圧縮、ファイル接続、中傷などのプラグインがあります。より単純なプロセスでは、それだけで十分かもしれません。ただし、Gulpにはより広い範囲のプラグインがあり、Lint、展開、Auto-Prefixerを使用したPostCSS処理などの複雑なビルドアクティビティを可能にします。いくつかのGulp/Metalsmith Integrationプラグインがありますが、いくつかの問題があり、Gulpタスクはメタルスミスを直接実行できるため、必要ではありません
このプロセスは、上記のBrowserSyncの再構築問題を防ぎます。 .clean(false)を使用して、他のタスクがアクティブなときにメタルスミスがビルドフォルダーをクリアしないようにすることを忘れないでください。
<code>cd project && cd project npm init -y </code>メタルスミスはあなたに適していますか?
メタルスミスは、シンプルまたは高度にカスタマイズされたWebサイトのニーズがある場合に理想的です。ドキュメントプロジェクトを使用して、一度に1つの機能を追加してみてください。メタルスミスはJekyllのような代替品ほど完全に機能していませんが、そのように設計されていません。独自のプラグインを作成する必要があるかもしれませんが、簡単に行うことはできます。これは、JavaScript開発者にとって大きな利点です。
メタルスミスビルドシステムの作成には時間がかかり、HTMLテンプレートと展開に関与する作業の量を考慮していません。ただし、プロセスを利用できると、マークダウンファイルの追加、編集、削除が非常に簡単になります。 CMSを使用するよりも簡単な場合があり、静的Webサイトのすべての利点があります。
金属スミスを使用して静的Webサイトを作成することに関するFAQ メタルスミスとは何ですか?なぜそれを使用して静的なWebサイトを作成する必要があるのですか?
Metalsmithは、シンプルで使いやすいプラグ可能な静的Webサイトジェネレーターです。 Node.jsに基づいており、プラグインを介して必要に応じて機能を追加できるモジュラー構造を使用します。これにより、信じられないほどの柔軟性とカスタマイズ可能性が得られます。 Metalsmithを使用して静的Webサイトを作成する必要があります。これにより、従来のCMSに制限されずにWebサイトを正確に構築できるようにする必要があります。さらに、静的なWebサイトは、動的なWebサイトよりも速く、より安全で、メンテナンスが容易です。
メタルスミスをインストールする方法は?
Metalsmithをインストールするには、コンピューターにnode.jsとnpmをインストールする必要があります。これらをインストールした後、ターミナルにCommand NPMインストールMetalsmithを実行してMetalsmithをインストールできます。これにより、Metalsmithとそのすべての依存関係がインストールされます。
新しいMetalsmithプロジェクトを作成する方法は?
新しいMetalsmithプロジェクトを作成するには、最初に端末でプロジェクトを作成するディレクトリに移動します。次に、コマンドメタルスミスを実行して新しいプロジェクトを作成します。これにより、プロジェクトの名前を含む新しいディレクトリが作成され、このディレクトリ内で静的Webサイトの基本構造が作成されます。
メタルスミスプロジェクトにプラグインを追加する方法は?
メタルスミスプロジェクトにプラグインを追加するには、NPM経由でそれらをインストールしてから、メタルスミス構成ファイルに参照する必要があります。たとえば、Markdownプラグインを追加するには、最初にNPMのインストールMetalsmith-Markdownを実行する必要があります。次に構成ファイルで、var Markdown = require( 'Metalsmith-Markdown')を追加する必要があります。 ))メタルスミスビルドチェーンに移動します。
メタルスミスのウェブサイトを構築する方法は?
Metalsmith Webサイトを構築するには、ターミナルでCommand Metalsmithビルドを実行する必要があります。これにより、すべてのファイルがコンパイルされ、それらをビルドディレクトリに出力し、サーバーに展開できます。
メタルスミスのウェブサイトのレイアウトをカスタマイズする方法は?
Metalsmith Webサイトのレイアウトをカスタマイズするには、ハンドルバーやJadeなどのテンプレートエンジンを使用できます。これらを使用すると、ヘッダー、フッター、個々のページなど、Webサイトのさまざまな部分に対して再利用可能なテンプレートを作成できます。
私のMetalsmith Webサイトにコンテンツを追加する方法は?
Metalsmith Webサイトにコンテンツを追加するには、ソースディレクトリにMarkdownファイルを作成できます。ウェブサイトを構築するとき、これらのファイルはHTMLに変換されます。 Netlify CMSなどのCMSを使用してコンテンツを管理することもできます。
メタルスミスのウェブサイトを展開する方法は?
Metalsmith Webサイトを展開するには、NetlifyページやGitHubページなどのサービスを使用できます。これらのサービスは、静的Webサイトをホストし、リポジトリにプッシュするときに変更を自動的に展開します。
メタルスミスのウェブサイトを更新するにはどうすればよいですか?
Metalsmith Webサイトを更新するには、ソースファイルを変更してWebサイトを再構築するだけです。変更はビルドディレクトリに反映され、サーバーに展開できます。
大規模で複雑なWebサイトにMetalsmithを使用できますか?
はい、Metalsmithは非常にスケーラブルで、大規模で複雑なWebサイトに使用できます。そのモジュラー構造により、必要に応じて機能を追加できます。また、静的ファイルを使用すると、減速せずに多くのコンテンツを処理できます。
以上がメタルスミスを使用して静的サイトを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます! Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲーム ゲームプログラミングの「Hello World」には、JQueryバージョンがあります。 ソースコード jQueryクレイジーワードコンポジションゲーム これは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。 ソースコード jquery鉱山の掃引ゲーム

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

このチュートリアルでは、Ajaxを介してロードされた動的なページボックスの作成を示しており、フルページのリロードなしでインスタントリフレッシュを可能にします。 JQueryとJavaScriptを活用します。カスタムのFacebookスタイルのコンテンツボックスローダーと考えてください。 重要な概念: ajaxとjquery

このJavaScriptライブラリは、Cookieに依存せずにセッションデータを管理するためにWindow.nameプロパティを活用します。 ブラウザ全体でセッション変数を保存および取得するための堅牢なソリューションを提供します。 ライブラリは、セッションの3つのコア方法を提供します

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。 見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。 更新されたプラグインは、jQuery 1.6.4以降で動作します。 ダウンロードしてください


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

SublimeText3 Linux 新バージョン
SublimeText3 Linux 最新バージョン

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

WebStorm Mac版
便利なJavaScript開発ツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

ホットトピック









