コンテンツ管理システムを作成する:nodePress

<p>Go を使用してフラット ファイル システムのコンテンツ管理システム (CMS) を作成することに成功しました。次のステップでは、同じアイデアを採用し、Node.js を使用して Web サーバーを作成します。ライブラリをロードし、サーバーを作成し、サーバーを実行する方法を説明します。 </p> <p>この CMS は、最初のチュートリアル「CMS の構築: 構造とスタイル」で紹介されたサイト データ構造を使用します。したがって、この基本構造をダウンロードして、新しいディレクトリにインストールします。 </p> <h2>ノードとノード ライブラリを取得する</h2> <p>Node.js を Mac にインストールする最も簡単な方法は、Homebrew を使用することです。 Homebrew をまだインストールしていない場合は、チュートリアル「Homebrew Revealed: The Ultimate Package Manager for OS X」でインストール方法が説明されています。 </p> <p>Homebrew を使用して Node.js をインストールするには、ターミナルに次のコマンドを入力します。 </p> リーリー <p>完了すると、Node および npm コマンドが Mac に完全にインストールされます。他のすべてのプラットフォームの場合は、Node.js Web サイトの手順に従ってください。 </p> <p>注意: 現在、多くのパッケージ マネージャーが Node.js バージョン 0.10 をインストールしています。このチュートリアルでは、バージョン 5.3 以降を使用していることを前提としています。次のように入力してバージョンを確認できます: </p> リーリー <p><code class="inline">node</code> コマンドは JavaScript インタープリターを実行します。 <code class="inline">npm</code> コマンドは Node.js のパッケージ マネージャーであり、新しいライブラリのインストール、新しいプロジェクトの作成、プロジェクト スクリプトの実行に使用されます。 Envato Tuts には、Node.js と NPM に関する優れたチュートリアルとコースが多数あります。 </p> <p>Web サーバーのライブラリをインストールするには、ターミナル.app または iTerm.app プログラムで次のコマンドを実行する必要があります: </p> リーリー <p>Express は、Web アプリケーション開発プラットフォームです。 Go の goWeb ライブラリに似ています。 Handlebars は、ページを作成するためのテンプレート エンジンです。 Moment は日付を操作するためのライブラリです。 Marked は、JavaScript での Markdown から HTML への優れたコンバーターです。 Jade は、HTML を簡単に作成できる HTML 短縮言語です。 Morgan は、Apache 標準ログ ファイルを生成する Express 用のミドルウェア ライブラリです。 </p> <p>ライブラリをインストールする別の方法は、このチュートリアルのソース ファイルをダウンロードすることです。ダウンロードして解凍したら、ホームディレクトリに「</p>」と入力します。 リーリー <p>これにより、プロジェクトの作成に必要なものがすべてインストールされます。 </p> <h2>nodePress.js</h2> <p>これでサーバーの作成を開始できます。プロジェクトの最上位ディレクトリに、nodePress.js というファイルを作成し、任意のエディターで開き、次のコードの追加を開始します。ファイルに記述したコードを説明します。 </p> リーリー <p>サーバー コードは、サーバーの作成に使用されるすべてのライブラリを初期化することから始まります。 URL の注釈がないライブラリは、内部 Node.js ライブラリです。 </p> リーリー <p>次に、すべてのグローバル変数とライブラリ構成を設定します。グローバル変数の使用は、ソフトウェア設計のベストプラクティスではありませんが、機能し、迅速な開発に役立ちます。 </p> <p><code class="inline">parts</code> 変数は、Web ページのすべての部分を含むハッシュ配列です。各ページはこの変数の内容を参照します。これは、サーバー ディレクトリの先頭にあるserver.json ファイルの内容から始まります。 </p> <p>次に、server.json ファイル内の情報を使用して、このサイトの <code class="inline">styles</code> ディレクトリと <code class="inline">layouts</code> ディレクトリへの完全パスを作成しました。 </p> <p>次に、3 つの変数 <code class="inline">siteCSS</code>、<code class="inline">siteScripts</code>、および <code class="inline">mainPage</code> を空の値に設定します。これらのグローバル変数には、すべての CSS、JavaScript、およびメイン インデックス ページのコンテンツが含まれます。これら 3 つのプロジェクトは、Web サーバー上で最もリクエストが多いものです。したがって、それらをメモリに保存しておくと時間を節約できます。 server.json ファイルの <code class="inline">Cache</code> 変数が false の場合、これらの項目はリクエストごとに再読み取りされます。 </p> リーリー <p>このコード ブロックは、Marked ライブラリが Markdown から HTML を生成するように構成するために使用されます。私は主にテーブルとスマートリストのサポートをオンにしています。 </p> リーリー <p><code class="inline">parts</code> 変数は、<code class="inline">styles</code> および <code class="inline">layout</code> ディレクトリからパーツをさらに読み込みます。 <code class="inline">site</code> ディレクトリ内の <code class="inline">parts</code> ディレクトリ内の各ファイルも、<code class="inline">parts</code> グローバル変数にロードされます。拡張子のないファイル名は、ファイルの内容を保存するために使用される名前です。これらの名前は、Handlebars マクロで展開されます。 </p> リーリー <p>次のコードでは、Web サーバーで使用するために定義したハンドルバー ヘルパー、<code class="inline">save</code>、<code class="inline">date</code>、および <code class="inline">cdate</code> を定義します。保存アシスタントを使用すると、ページ内で変数を作成できます。このバージョンでは、パラメーターの名前と値が「|」で区切られている goPress バージョンがサポートされています。 2 つのパラメーターを使用して保存を指定することもできます。例えば：＃＃＃ リーリー </p>これでも同じ結果が得られます。私は 2 番目のアプローチを好みますが、Go の Handlebars ライブラリでは複数の引数を使用できません。 <p> </p> <p><code class="inline">date</code> 和 <code class="inline">cdate</code> 帮助程序格式化当前日期 (<code class="inline">date</code>) 或给定日期 (<code class="inline">cdate</code>)根据 <strong>moment.js</strong> 库格式化规则。 <code class="inline">cdate</code> 帮助程序期望渲染的日期是第一个参数并且具有 ISO 8601 格式。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Create and configure the server. // var nodePress = express(); // // Configure middleware. // nodePress.use(morgan('combined')) </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>现在，代码创建一个 Express 实例来配置实际的服务器引擎。 <code>nodePress.use()</code> 函数设置中间件软件。中间件是在每次调用服务器时提供服务的任何代码。在这里，我设置了 Morgan.js 库来创建正确的服务器日志输出。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Define the routes. // nodePress.get('/', function(request, response) { setBasicHeader(response); if((parts["Cache"] == true) && (mainPage != null)) { response.send(mainPage); } else { mainPage = page("main"); response.send(mainPage); } }); nodePress.get('/favicon.ico', function(request, response) { var options = { root: parts['Sitebase'] + 'images/', dotfiles: 'deny', headers: { 'x-timestamp': Date.now(), 'x-sent': true } }; response.set("Content-Type", "image/ico"); setBasicHeader(response); response.sendFile('favicon.ico', options, function(err) { if (err) { console.log(err); response.status(err.status).end(); } else { console.log('Favicon was sent:', 'favicon.ico'); } }); }); nodePress.get('/stylesheets.css', function(request, response) { response.set("Content-Type", "text/css"); setBasicHeader(response); response.type("css"); if((parts["Cache"] == true) && (siteCSS != null)) { response.send(siteCSS); } else { siteCSS = fs.readFileSync(parts['Sitebase'] + 'css/final/final.css'); response.send(siteCSS); } }); nodePress.get('/scripts.js', function(request, response) { response.set("Content-Type", "text/javascript"); setBasicHeader(response); if((parts["Cache"] == true) && (siteScripts != null)) { response.send(siteScripts); } else { siteScripts = fs.readFileSync(parts['Sitebase'] + 'js/final/final.js', 'utf8'); response.send(siteScripts); } }); nodePress.get('/images/:image', function(request, response) { var options = { root: parts['Sitebase'] + 'images/', dotfiles: 'deny', headers: { 'x-timestamp': Date.now(), 'x-sent': true } }; response.set("Content-Type", "image/" + path.extname(request.params.image).substr(1)); setBasicHeader(response); response.sendFile(request.params.image, options, function(err) { if (err) { console.log(err); response.status(err.status).end(); } else { console.log('Image was sent:', request.params.image); } }); }); nodePress.get('/posts/blogs/:blog', function(request, response) { setBasicHeader(response); response.send(post("blogs", request.params.blog, "index")); }); nodePress.get('/posts/blogs/:blog/:post', function(request, response) { setBasicHeader(response); response.send(post("blogs", request.params.blog, request.params.post)); }); nodePress.get('/posts/news/:news', function(request, response) { setBasicHeader(response); response.send(post("news", request.params.news, "index")); }); nodePress.get('/posts/news/:news/:post', function(request, response) { setBasicHeader(response); response.send(post("news", request.params.news, request.params.post)); }); nodePress.get('/:page', function(request, response) { setBasicHeader(response); response.send(page(request.params.page)); }); </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>这部分代码定义了实现 Web 服务器所需的所有路由。所有路由都运行 <code>setBasicHeader()</code> 函数来设置正确的标头值。所有针对页面类型的请求都会调用 <code>page()</code> 函数，而所有针对 post 类型页面的请求都会调用 <code>posts()</code> 函数。</p> <p><code class="inline">Content-Type</code> 的默认值为 HTML。因此，对于 CSS、JavaScript 和图像，<code class="inline">Content-Type</code> 显式设置为其适当的值。</p> <p>您还可以使用 <code>put</code>、<code>delete</code> 和 <code>post</code> REST 动词定义路由。这个简单的服务器仅使用 <code>get</code> 动词。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Start the server. // var addressItems = parts['ServerAddress'].split(':'); var server = nodePress.listen(addressItems[2], function() { var host = server.address().address; var port = server.address().port; console.log('nodePress is listening at http://%s:%s', host, port); }); </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>在定义所使用的不同函数之前要做的最后一件事是启动服务器。 server.json 文件包含 DNS 名称（此处为 <code>localhost</code>）和服务器的端口。解析后，服务器的 <code>listen()</code> 函数使用端口号来启动服务器。服务器端口打开后，脚本会记录服务器的地址和端口。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Function: setBasicHeader // // Description: This function will set the basic header information // needed. // // Inputs: // response The response object // function setBasicHeader(response) { response.append("Cache-Control", "max-age=2592000, cache"); response.append("Server", "nodePress - a CMS written in node from Custom Computer Tools: http://customct.com."); } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>定义的第一个函数是 <code>setBasicHeader()</code> 函数。该函数设置响应头，告诉浏览器将页面缓存一个月。它还告诉浏览器该服务器是nodePress服务器。如果您需要任何其他标准标头值，您可以使用 <code>response.append()</code> 函数在此处添加它们。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Function: page // // Description: This function processes a page request // // Inputs: // page The requested page // function page(page) { // // Process the given page using the standard layout. // return (processPage(parts["layout"], parts['Sitebase'] + "pages/" + page)); } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p><code>page()</code> 函数将页面的布局模板以及页面在服务器上的位置发送到 <code>processPage()</code> 函数。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Function: post // // Description: This function processes a post request // // Inputs: // type The type of post. // cat The category of the post. // post The requested post // function post(type, cat, post) { // // Process the post given the type and the post name. // return (processPage(parts["layout"], parts['Sitebase'] + "posts/" + type + "/" + cat + "/" + post)); } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p><code>post()</code> 函数就像 <code>page()</code> 函数，不同之处在于帖子有更多项目来定义每个帖子。在这个系列的服务器中，一个post包含一个<code>type</code>、category，以及实际的<code>post</code>。类型为 <code>blogs</code> 或 <code>news</code>。类别是 <code>flatcms</code>。由于这些代表目录名称，因此您可以将它们设为您想要的任何名称。只需将命名与文件系统中的名称相匹配即可。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Function: processPage // // Description: This function processes a page for the CMS. // // Inputs: // layout The layout to use for the page. // page Path to the page to render. // function processPage(layout, page) { // // Get the pages contents and add to the layout. // var context = {}; context = MergeRecursive(context, parts); context['content'] = figurePage(page); context['PageName'] = path.basename(page, path.extname(page)); // // Load page data. // if(fileExists(page + ".json")) { // // Load the page's data file and add it to the data structure. // context = MergeRecursive(context, JSON.parse(fs.readFileSync(page + '.json', 'utf8'))); } // // Process Handlebars codes. // var template = Handlebars.compile(layout); var html = template(context); // // Process all shortcodes. // html = processShortCodes(html); // // Run through Handlebars again. // template = Handlebars.compile(html); html = template(context); // // Return results. // return (html); } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p><code>processPage()</code> 函数获取要呈现的页面内容的布局和路径。该函数首先创建 <code>parts</code> 全局变量的本地副本，并添加“contents”主题标签以及调用 <code>figurePage()</code> 函数的结果。然后，它将 <code>PageName</code> 哈希值设置为页面名称。</p> <p>然后，该函数使用 Handlebars 将页面内容编译到布局模板。之后， <code>processShortCodes()</code> 函数将展开页面上定义的所有短代码。然后，Handlebars 模板引擎再次检查代码。然后浏览器接收结果。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Function: processShortCodes // // Description: This function takes a string and // processes all of the shortcodes in // the string. // // Inputs: // content String to process // function processShortCodes(content) { // // Create the results variable. // var results = ""; // // Find the first match. // var scregFind = /\-\[([^\]]*)\]\-/i; var match = scregFind.exec(content); if (match != null) { results += content.substr(0,match.index); var scregNameArg = /(\w+)(.*)*/i; var parts = scregNameArg.exec(match[1]); if (parts != null) { // // Find the closing tag. // var scregClose = new RegExp("\\-\\[\\/" + parts[1] + "\\]\\-"); var left = content.substr(match.index + 4 + parts[1].length); var match2 = scregClose.exec(left); if (match2 != null) { // // Process the enclosed shortcode text. // var enclosed = processShortCodes(content.substr(match.index + 4 + parts[1].length, match2.index)); // // Figure out if there were any arguments. // var args = ""; if (parts.length == 2) { args = parts[2]; } // // Execute the shortcode. // results += shortcodes[parts[1]](args, enclosed); // // Process the rest of the code for shortcodes. // results += processShortCodes(left.substr(match2.index + 5 + parts[1].length)); } else { // // Invalid shortcode. Return full string. // results = content; } } else { // // Invalid shortcode. Return full string. // results = content; } } else { // // No shortcodes found. Return the string. // results = content; } return (results); } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p><code>processShortCodes()</code> 函数将网页内容作为字符串并搜索所有短代码。短代码是类似于 HTML 标签的代码块。一个例子是：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbal:false;">-[box]- <p>This is inside a box</p> -[/box]- </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>此代码在 HTML 段落周围有一个 <code>box</code> 的简码。其中 HTML 使用 <code><</code> 和 </code>>></code>，短代码使用 <code>-[</code> 和 </code>>]-</code>。在名称后面，可以包含或不可以包含包含短代码参数的字符串。</p> <p><code>processShortCodes()</code> 函数查找短代码，获取其名称和参数，找到末尾以获取内容，处理短代码的内容，使用参数和内容执行短代码，将结果添加到完成中页面，并在页面的其余部分搜索下一个短代码。循环是通过递归调用函数来执行的。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Define the shortcodes function array. // var shortcodes = { 'box': function(args, inside) { return ("<div class='box'>" + inside + "</div>"); }, 'Column1': function(args, inside) { return ("<div class='col1'>" + inside + "</div>"); }, 'Column2': function(args, inside) { return ("<div class='col2'>" + inside + "</div>"); }, 'Column1of3': function(args, inside) { return ("<div class='col1of3'>" + inside + "</div>"); }, 'Column2of3': function(args, inside) { return ("<div class='col2of3'>" + inside + "</div>"); }, 'Column3of3': function(args, inside) { return ("<div class='col3of3'>" + inside + "</div>"); }, 'php': function(args, inside) { return ("<div class='showcode'><pre type='syntaxhighlighter' class='brush: php'>" + inside + "</pre><div class="contentsignin">ログイン後にコピー</div></div></div>"); }, 'js': function(args, inside) { return ("<div class='showcode'><div class="code" style="position:relative; padding:0px; margin:0px;"><pre type='syntaxhighlighter' class='brush: javascript'>" + inside + "</pre><div class="contentsignin">ログイン後にコピー</div></div></div>"); }, 'html': function(args, inside) { return ("<div class='showcode'><div class="code" style="position:relative; padding:0px; margin:0px;"><pre type='syntaxhighlighter' class='brush: html'>" + inside + "</pre><div class="contentsignin">ログイン後にコピー</div></div></div>"); }, 'css': function(args, inside) { return ("<div class='showcode'><div class="code" style="position:relative; padding:0px; margin:0px;"><pre type='syntaxhighlighter' class='brush: css'>" + inside + "</pre><div class="contentsignin">ログイン後にコピー</div></div></div>"); } }; </pre> <p>下一节定义 <code>shortcodes</code> json 结构，该结构定义与其函数关联的短代码的名称。所有短代码函数都接受两个参数：<code>args</code> 和 <code>inside</code>。 <code>args</code> 是名称和空格之后、标签结束之前的所有内容。 <code>inside</code> 是开始和结束短代码标记包含的所有内容。这些功能是基本功能，但您可以创建一个短代码来执行您能在 JavaScript 中想到的任何功能。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Function: figurePage // // Description: This function figures the page type // and loads the contents appropriately // returning the HTML contents for the page. // // Inputs: // page The page to load contents. // function figurePage(page) { var result = ""; if (fileExists(page + ".html")) { // // It's an HTML file. Read it in and send it on. // result = fs.readFileSync(page + ".html"); } else if (fileExists(page + ".amber")) { // // It's a jade file. Convert to HTML and send it on. I // am still using the amber extension for compatibility // to goPress. // var jadeFun = jade.compileFile(page + ".amber", {}); // Render the function var result = jadeFun({}); } else if (fileExists(page + ".md")) { // // It's a markdown file. Convert to HTML and send // it on. // result = marked(fs.readFileSync(page + ".md").toString()); // // This undo marked's URI encoding of quote marks. // result = result.replace(/\&quot\;/g,"\""); } return (result); } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p><code>figurePage()</code> 函数接收服务器上页面的完整路径。然后，此函数根据扩展名测试它是否为 HTML、Markdown 或 Jade 页面。我仍然在 Jade 中使用 .amber，因为那是我在 goPress 服务器上使用的库。所有 Markdown 和 Jade 内容都会先转换为 HTML，然后再传递给调用例程。由于 Markdown 处理器将所有引号翻译为 <code>"</code>，因此我在传回之前将它们翻译回来。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Function: fileExists // // Description: This function returns a boolean true if // the file exists. Otherwise, false. // // Inputs: // filePath Path to a file in a string. // function fileExists(filePath) { try { return fs.statSync(filePath).isFile(); } catch (err) { return false; } } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p><code>fileExists()</code> 函数是 <code>fs.exists()</code> 函数的替代品，该函数曾经是 Node.js 的 <code>fs</code> 库的一部分。它使用 <code>fs.statSync()</code> 函数来尝试获取文件的状态。如果发生错误，则会返回 <code>false</code>。否则，返回 <code>true</code>。</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:javascript;toolbal:false;">// // Function: MergeRecursive // // Description: Recursively merge properties of two objects // // Inputs: // obj1 The first object to merge // obj2 The second object to merge // function MergeRecursive(obj1, obj2) { for (var p in obj2) { try { // Property in destination object set; update its value. if (obj2[p].constructor == Object) { obj1[p] = MergeRecursive(obj1[p], obj2[p]); } else { obj1[p] = obj2[p]; } } catch (e) { // Property in destination object not set; create it and set its value. obj1[p] = obj2[p]; } } return obj1; } </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>最后一个函数是 <code>MergeRecursive()</code> 函数。它将第二个传递对象复制到第一个传递对象中。在添加特定于页面的部分之前，我利用它将主 <code>parts</code> 全局变量复制到本地副本中。</p> <h3>本地运行</h3> <p>保存文件后，您可以使用以下命令运行服务器：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:shell;toolbal:false;">node nodePress.js </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>或者，您可以使用 package.json 文件中的 <code class="inline">npm</code> 脚本。您可以像这样运行 npm 脚本：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:shell;toolbal:false;">npm start </pre><div class="contentsignin">ログイン後にコピー</div></div> <p>这将运行 package.json 文件内的 <code>start</code> 脚本。</p> <p><img src="https://img.php.cn/upload/article/000/000/164/169372039225694.jpg" alt="コンテンツ管理システムを作成する:nodePress"></p> <p>将您的网络浏览器指向 <code>http://localhost:8080</code>，您将看到上面的页面。您可能已经注意到我在主页上添加了更多测试代码。对页面的所有更改都包含在本教程的下载中。它们大多只是一些小的调整，以更全面地测试功能并适应使用不同库的任何差异。最显着的区别是 Jade 库不使用 <code class="inline">$</code> 来命名变量，而 Amber 则使用。</p> <h2>结论</h2> <p>现在，您在 Go 和 Node.js 中拥有完全相同的平面文件系统 CMS。这只是您可以使用此平台构建的内容的表面。尝试并尝试新事物。这是创建您自己的网络服务器的最佳部分。</p>

以上がコンテンツ管理システムを作成する:nodePressの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。