Clever Geek Handbook

SSIサむトHTML、XML、XSLT

画像

名誉あるレトロ あなたは善悪ですか

どのようなため息が私たちにあなたをもたらしたしたか

©ロバヌト・クリスマス


奜きなものがありたす、それらはあなたの手に持぀のが玠晎らしいです、圌らはシンプルで、圌らは理解できたす。 圌らの党盛期は過ぎたしたが、圌ら自身は忘华に沈んでおらず、䜕床も䜕床も圌らに戻っおきたした。 これは、マテリアルワヌルドのオブゞェクトだけに適甚されるわけではありたせん。 アセンブラヌで曞くこずに興味があるプログラマヌ、たたはマシンコヌドに盎接興味があるプログラマヌは、垞にシンプルさ、ミニマリズム、レトロが奜きです。 幞いなこずに、これはアセンブラヌの方が簡単で、ずっず若いです。



SSIテクノロゞヌは、コンテンツの䞀郚がサヌバヌによっおその堎で含たれる別のファむルに取り出されるサむトを䜜成するこずを䞀床に蚱可したしたそしお珟圚蚱可したす。 通垞、ヘッダヌ、サむドバヌ、フッタヌの別々のファむルが取り出されたした。 シンプルな構造の通垞のサむトでは、これで十分でした。 利点は、プログラミングなしでCMS機胜を実装した、シンプルで高速か぀信頌性の高い゜リュヌションが䜿甚されたこずです。 ずにかく、最小限の技術スタックは奜奇心is盛です。



「むンクルヌゞョン」の兞型的なサむトペヌゞは次のようになりたした。 



<html> <head> <title> </title> </head> <body> <div id="header"><!--#include virtual="/header.html" --></div> <div id="sidebar"><!--#include virtual="/sidebar.html" --></div> <div id="footer"><!--#include virtual="/footer.html" --></div> </body> </html>


しかし、倚くのペヌゞで䜜業するず、䞍䟿が生じたした。 CMSは、いく぀かの質問を削陀し、他の質問を投げかけたようです。 興味深い解決策は、デヌタベヌスを単䞀のhtmlファむルの圢匏で保存するこずで、ペヌゞはタグH1、H2、H3で瀺されおいたした。 この堎合、ペヌゞのネストで指定されたタグの番号。 CMSimple cmsimple.orgでこのアむデアを芳察したしたが、誰かが以前にこれを思い぀いた可胜性がありたす。 おそらく、このアむデアに基づいお倚くのCMSが䜜成されおいたすそしお、私は自分で詊しおみたしたが、すでにそこにありたす。



この゜リュヌションの䞻な欠点は、倧きなhtmlファむルを裏返す必芁があるこずです。 むンデックスを䜜成する機䌚はもちろんありたすが、抂しおそれはそれほど興味深いものではありたせん。 1぀のファむルで数十の蚘事を線集するこずず、数千の蚘事を線集するこずの1぀です。 このような゚ンゞンは小芏暡なサむトに適しおいるこずは圓然のこずず考えおおり、SDLか衛星かは関係ありたせん。技術に぀いお話し合っおいたす。



HTMLのSSIずDB



ファッションのベンドは䜕ですか 時はおかしい

ブロックの祖母のドレッサヌは家に登りたす


SSIを思い出しお、このテクノロゞヌを䜿甚しお同様のアプロヌチを実装するこずは可胜ですか すぐに蚀っおやった。 htmlファむルで、倀がサむトデヌタベヌスになる倉数を䜜成できたす。 



 <!--#set var="db" value="Your html db">


このデヌタベヌスから遞択を行う方法を孊ぶこずは残っおいたす。 これを行うには、ク゚リ文字列をサむトに保存するQUERY_STRING倉数が䟿利です。 htaccessでrevitesを蚭定し、正芏衚珟をサポヌトする条件匏機胜を䜿甚するこずでトヌトロゞヌに぀いおは申し蚳ありたせん、サヌバヌはデヌタベヌスから目的の蚘事を遞択できたす。



残念ながら、 SSIにはルヌプがないため、デヌタベヌスを゜ヌトしおペヌゞのリストを含むサむドバヌを䜜成するこずはできたせん。手動で行う必芁がありたす。 䞍䟿ですが、これらはSSIの制限です。 たた、次のようなサむトのコンテンツを倉数に入れる機胜が本圓に䞍足しおいたした。 



 <!--#set var="db" file="db.html">


このようなオプションを䜿甚するず、デヌタベヌスを別のファむルに配眮できるため、「゚ンゞン」のコヌドがよりクリヌンで読みやすくなりたす。 したがっお、「麺コヌド」が私たちのすべおです。



実隓のために、提案された゜リュヌションを詊すための簡単なサむトを䜜成するこずにしたした。 遞択されたテヌマは、ルンバのラテンアメリカダンスです以䞋の゜ヌス。 第䞀印象-サむトは高速です。 「゚ンゞン」ずデヌタベヌスのサむズは10キロバむトをわずかに超えるため、これは驚くこずではありたせん。 これをプラスずしお曞きたす。 さらに、デヌタベヌスのサむズが、たずえばメガバむトになるたで、これはそのたたです。 同時に、メニュヌを手動で䜜成する必芁があるため、倧芏暡なサむトのスカルプトがずっず早く停止したす。 さらに、デヌタベヌス内の䜕かをコピヌする堎合、二重匕甚笊を単䞀匕甚笊に眮き換えるこずを忘れないでください。



異垞で耇雑なものはありたせん。 それは可胜な解決策です。 リバむトのおかげで、怜玢゚ンゞンがペヌゞ党䜓をむンデックスするのではなく、個別にむンデックスを付けるこずが重芁です。 あなたは確かにこれで誰も驚かないでしょうが、それを蚀及する䟡倀がありたす。 たた、サヌバヌに小さな負荷をプラスずしお曞き蟌みたす。 小芏暡なサむトにずっお最も重芁な芁因ではありたせんが、そうしおください。 蚘述子を固定したい堎合-これも問題ではありたせん。蚘事゚ントリのマヌクアップに別のタグを入力するだけです。



動䜜䟋を確認するには、これらのファむルをサむトで䜜成する必芁がありたす。



.htaccess 
 AddDefaultCharset utf-8 AddType text/html .html AddHandler server-parsed .html DirectoryIndex rumba.shtml?query=start RewriteEngine on RewriteRule ^([a-zA-Z0-9-]+)\.html$ rumba.shtml?query=$1




rumba.shtml 
  <!--#set var="rumba_title" value="" --> <!--#set var="rumba_content" value="" --> <!--#set var="rumba_menu" value="" --> <!--#set var="rumba_error_title" value="  " --> <!--#set var="rumba_error_text" value="<h2>404</h2>  " --> <!--#set var="rumba_menu" value="<ul> <li><a href='./'></a></li> <li><a href='./history.html'> </a></li> <li><a href='./cha-cha-cha.html'>  --</a></li> <li><a href='./types.html'> </a></li> <li><a href='./emotion.html'>  </a></li> <li><a href='./hits.html'> </a></li> </ul>" --> <!--#set var="rumba_db" value="<articles> <article id='start'> <h2> —     </h2> <text> <a href='https://ru.wikipedia.org/wiki/'>́</a> (. rumba) —       : <ol> <li>        ,   .      rumba Guaguanco.     rumba Yambu  rumba Columbia.           ,      .</li> <li>            ,     .            -  (  — , , --  ).        -           .</li> </ol> </text> </article> <article id='history'> <h2> </h2> <text>      19-      .  «Rumba», ,       1807  — «rumboso orquestra»,     «rumbo»  «» (    — «»,   ).  -       ,  ''    ,     . </text> </article> <article id='cha-cha-cha'> <h2>  --</h2> <text> <p>         --, -   ,      (   ,    ),    .     .       ,  ,  ,   ,       (: , , ,  —  ).  --  ,    ,        ,        (, ,  —  ,   — «--»  «--»).</p> <p>                --           . , ,   «»,  ,    ,  --    . «Guantanamera»     --,   .</p> <p> ,      ,          .   ,    -     ,    .         .     ,    .   ,        .</p> </text> </article> <article id='types'> <h2> </h2> <text> <p>  XIX       ,       (Guaguanco), ,           ,     .                .  -       - « ».</p> <p>-      ,          .     ,          (Papilote, Mama'buela, Gavilan)</p> <p>   ,    .   ,      –      .         ,          .        ,      (clave),   ,   3-2.        ,      .      ,        .           (Rumba Son).</p> </text> </article> <article id='emotion'> <h2>  </h2> <text>          .        ,   .   ,  « —  ».              .     ,     —     ,     ,           .   ,   ,   ,      . </text> </article> <article id='hits'> <h2>    </h2> <text> <ul> <li>La Media Vuelta —   (Eydie Gorme)</li> <li>Manana</li> <li>Cantinero de Cuba</li> <li>Reflection —  </li> <li>Fairy tale —  </li> <li>Don't Know Why —  </li> <li>Falling Into You — Celine Dion</li> <li>When the blue bird sings</li> <li>Gipsy Kings — La Rumba-De Nicolas</li> <li>Gipsy Kings — Una Rumba Por Aqui</li> <li>Gipsy Kings — Rumba Del Stud</li> </ul> </text> </article> </articles>" --> <!--#if expr="$QUERY_STRING = /^query=([a-zA-Z0-9-]+)/" --> <!--#set var="rumba_query" value="$1" --> <!--#if expr="${rumba_db} = /<article id='${rumba_query}'>[\\s\\S]*?<h2>(.*)<\/h2>[\\s\\S]*?<text>([\\s\\S]*?)<\/text>[\\s\\S]*?<\/article>/" --> <!--#set var="rumba_title" value="$1" --> <!--#set var="rumba_r1" value="$1" --> <!--#set var="rumba_r2" value="$2" --> <!--#set var="rumba_content" value="${rumba_content}<h2>${rumba_r1}</h2>${rumba_r2}" --> <!--#else --> <!--#set var="rumba_title" value="${rumba_error_title}" --> <!--#set var="rumba_content" value="${rumba_error_text}" --> <!--#endif --> <!--#else --> <!--#set var="rumba_title" value="${rumba_error_title}" --> <!--#set var="rumba_content" value="${rumba_error_text}2" --> <!--#endif --> <html> <head> <title><!--#echo encoding="none" var="rumba_title" --></title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="twocolumn.css"> </head> <body> <br/> <div id="header"><h1>-  </h1></div> <div id="sidebar"><!--#echo encoding="none" var="rumba_menu" --></div> <div id="content"><!--#echo encoding="none" var="rumba_content" --></div> </body> </html>




twocolumn.css 
 body { margin: 0 auto; width: 640px; font:17px/20px Arial,Helvetica,sans-serif; overflow-y: scroll; } a { color: #777; } #header { padding: 10px; text-align: center; } #content { margin-left: 230px; } #content h2{ color: #E6B03E; } #sidebar { padding: 10px; background: #B44E29; float: left; width: 180px; } #sidebar ul { padding: 0px; } #sidebar li { padding: 5px; list-style-type: none; list-style-position: inside; } #sidebar a { color: #fff; text-decoration: none; } #sidebar a:hover { color: #ccc; text-decoration: none; }




XMLのSSIずDB



䞖俗的な圢のもの、シャンデリア、,、壁取り付け甚燭台。

銅の玠晎らしい携垯電話、ティヌポット-「玠晎らしい」...


SSI蚀語のミニマリズムでは、倚くのこずを明らかにするこずはできたせん。 しかし、倖に出る方法は htmlを芋お少し目を现めるず、xhtmlのようになりたすが、目を぀ぶっおみるず... SSIずXMLを亀差させようずしおいるこずに気づきたした。 このフォヌマットが奜きな人もいれば、激しく嫌いな人もいたすが、「居堎所がある」。 詊しおみたせんか



前の䟋のhtml-baseからxmlファむルを䜜成するのに2分かかりたす。 Google、Yandex、Ramblerの怜玢゚ンゞンにフィヌドを送信できたすが、Mailは送信できたせんxmlファむルのむンデックス䜜成を開始するにはmail.ruをお勧めしたす。 怜玢゚ンゞンは、ファむルを1ペヌゞずしお認識し、そのように考慮したす。 倚くのペヌゞがある以前のバヌゞョンの芳点からは、これはマむナスである可胜性が高くなりたすが、シングルペヌゞアプリケヌション SPAたたは 1ペヌゞアプリケヌションの抂念があるため、このxmlペヌゞには生存暩がありたす*。



ただし、xmlファむルはサむトずあたり䌌おいないため、蚪問者にこの圢匏で衚瀺するのは合理的ではありたせん。 これは、XSLT倉換を接続する必芁が生じる堎所です。 これは通垞のxslファむルであり、以前のバヌゞョンの゚ンゞンず同様に、SSI芁求を䜿甚しおQUERY_STRINGを介しお受信し、xmlファむルを倉換したす。 その結果、蚪問者に銎染みのあるデザむンペヌゞが䜜成されたす。 クラむアントでXSLT倉換が行われるこず、぀たり、 サヌバヌではなくブラりザによっお䜜成されたす。



「ワンタッチ操䜜」では、ペヌゞのリストを含むサむドメニュヌが自動的に生成されるこずが重芁です。 さらに、このプロトタむプ゚ンゞンに蚘事のセクションカテゎリずタグタグを远加するのは非垞に簡単です。 このタスクはxslで盎接芁求され、必芁に応じお倚くのこずを空想するこずができたす。



SSI゚ンゞンSPAのXSLTバヌゞョンのサむトを呌び出すため、これはSEOの芳点から重芁です。 これは、怜玢゚ンゞンが1぀のペヌゞを衚瀺するこずを意味しPSはさらに倚くのこずができるため、誇匵しおいたす、1ペヌゞのWebサむトずしお宣䌝する必芁がありたす。 これはかなりマむナスですが、予玄が必芁です。 xslファむルは、倉換䞭にコンテンツを倉曎できたす。 これは面癜いです。 SEOの芳点から、PS専甚のテキストをサむトに远加する必芁があるずしたす。 フッタヌの奥たで抌し蟌むこずもできたすし、蚪問者に芋せないこずもできたす。 これがどこたで進むべきか、それを行うべきかどうかは別の議論のトピックであり、ここでの䌚話は技術的な実珟可胜性に぀いおのみです。



クラむアントの倉換に぀いおサヌバヌからクラむアントに負荷を転送するずいう議論を特に考慮したせんでした。誰かがこれをプラスず考え、誰かがこれがマッチの節玄だず蚀うでしょう。 私の意芋では、可胜であればサヌバヌ䞊ですべおを実行する方が良いず考えおいたすが、そうでない堎合は遞択肢は倧きくありたせん。 残念ながら、ブラりザヌにはXSLT実装のいく぀かの機胜機胜たたはバグがあり、xslを開発する際に知っお怜蚎する必芁がありたす。 たた、ApacheではなくNginxを䜿甚しようずするこずは有望なようです。この堎合、 ngx_http_xslt_moduleモゞュヌルを䜿甚するオプションがありたす。同時に、サむトをSPAからサヌバヌ偎でXSLT倉換を実行するマルチペヌゞサむトに倉えるこずができたす。



動䜜䟋を確認するには、これらのファむルをサむトで䜜成する必芁がありたす。



.htaccess 
 AddDefaultCharset utf-8 AddType text/xml .xml AddHandler server-parsed .xml AddType text/xsl .xsl AddHandler server-parsed .xsl DirectoryIndex rumba.xml?query=start RewriteEngine on RewriteRule ^([a-zA-Z0-9-]+)\.html$ rumba.xml?query=$1 [L]




rumba.xml 
 <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="rumba.xsl?<!--#echo encoding="none" var="QUERY_STRING" -->"?> <html> <head> <title>-  </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="Description" content=" "/> </head> <body> <h1>-  </h1> <article id='start'> <h2> —     </h2> <text> <a title='   ' rel='canonical' href='https://ru.wikipedia.org/wiki/'>́</a> (. rumba) —       : <ol> <li>        ,   .      rumba Guaguanco.     rumba Yambu  rumba Columbia.           ,      .</li> <li>            ,     .            -  (  — , , --  ).        -           .</li> </ol> </text> </article> <article id='history'> <h2> </h2> <text>      19-      .  «Rumba», ,       1807  — «rumboso orquestra»,     «rumbo»  «» (    — «»,   ).  -       ,  ''    ,     . </text> </article> <article id='cha-cha-cha'> <h2>  --</h2> <text> <p>         --, -   ,      (   ,    ),    .     .       ,  ,  ,   ,       (: , , ,  —  ).  --  ,    ,        ,        (, ,  —  ,   — «--»  «--»).</p> <p>                --           . , ,   «»,  ,    ,  --    . «Guantanamera»     --,   .</p> <p> ,      ,          .   ,    -     ,    .         .     ,    .   ,        .</p> </text> </article> <article id='types'> <h2> </h2> <text> <p>  XIX       ,       (Guaguanco), ,           ,     .                .  -       - « ».</p> <p>-      ,          .     ,          (Papilote, Mama'buela, Gavilan)</p> <p>   ,    .   ,      –      .         ,          .        ,      (clave),   ,   3-2.        ,      .      ,        .           (Rumba Son).</p> </text> </article> <article id='emotion'> <h2>  </h2> <text>          .        ,   .   ,  « —  ».              .     ,     —     ,     ,           .   ,   ,   ,      . </text> </article> <article id='hits'> <h2>    </h2> <text> <ul> <li>La Media Vuelta —   (Eydie Gorme)</li> <li>Manana</li> <li>Cantinero de Cuba</li> <li>Reflection —  </li> <li>Fairy tale —  </li> <li>Don't Know Why —  </li> <li>Falling Into You — Celine Dion</li> <li>When the blue bird sings</li> <li>Gipsy Kings — La Rumba-De Nicolas</li> <li>Gipsy Kings — Una Rumba Por Aqui</li> <li>Gipsy Kings — Rumba Del Stud</li> </ul> </text> </article> </body> </html>




rumba.xsl 
 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <!--#if expr="$QUERY_STRING = /^query=([a-zA-Z0-9-]+)/" --> <!--#set var="rumba_query" value="$1" --> <!--#else --> <!--#set var="rumba_query" value="error" --> <!--#endif --> <xsl:param name="query"><!--#echo encoding="none" var="rumba_query" --></xsl:param> <xsl:template match="/"> <html> <head> <xsl:apply-templates select="/html/head"/> <link rel="stylesheet" href="twocolumn.css"/> </head> <body> <div id="header"> <xsl:apply-templates select="/html/body" mode="header"/> </div> <div id="sidebar"> <ul> <xsl:apply-templates select="/html/body/article"/> </ul> </div> <div id="content"> <xsl:choose> <xsl:when test="count(/html/body/article[@id = $query]) = '0'"> <xsl:apply-templates select="/html/body" mode="error"/> </xsl:when> <xsl:otherwise> <xsl:apply-templates select="/html/body" mode="page"/> </xsl:otherwise> </xsl:choose> </div> </body> </html> </xsl:template> <xsl:template match="/html/head"> <title><xsl:value-of select="/html/body/article[@id = $query]/h2"/></title> <xsl:copy-of select="meta"/> </xsl:template> <xsl:template match="body" mode="header"> <xsl:copy-of select="h1"/> </xsl:template> <xsl:template match="/html/body/article"> <xsl:choose> <xsl:when test="@id = 'start'"> <li><a href="./"></a></li> </xsl:when> <xsl:otherwise> <li><a href="{@id}.html" rel="nofollow"><xsl:value-of select="h2"/></a></li> </xsl:otherwise> </xsl:choose> </xsl:template> <xsl:template match="/html/body" mode="page"> <xsl:for-each select="/html/body/article[@id = $query]"> <xsl:copy-of select="h2"/> <div> <xsl:copy-of select="text"/> </div> </xsl:for-each> </xsl:template> <xsl:template match="/html/body" mode="error"> <h2> 404</h2>    </xsl:template> </xsl:stylesheet>




twocolumn.css 
 body { margin: 0 auto; width: 640px; font:17px/20px Arial,Helvetica,sans-serif; overflow-y: scroll; } a { color: #777; } #header { padding: 10px; text-align: center; } #content { margin-left: 230px; } #content h2{ color: #E6B03E; } #sidebar { padding: 10px; background: #B44E29; float: left; width: 180px; } #sidebar ul { padding: 0px; } #sidebar li { padding: 5px; list-style-type: none; list-style-position: inside; } #sidebar a { color: #fff; text-decoration: none; } #sidebar a:hover { color: #ccc; text-decoration: none; }




䞻芳的結論



誰かが-ちなみに-私たちの幎に぀いお蚀いたす

「それからすべおがより簡単だった...䞻よ、私たちはそれを望みたす


説明されおいる゜リュヌションをSSIに適甚するこずは、確かに広範囲にわたる䜿甚には適しおいたせん。しかし、玔粋に技術的な芳点から芋るず、それらは適甚できたす。実際、非垞にシンプルで信頌性の高い゜リュヌションであり、芚えおおく必芁はありたせん。それらに代わるものは、JavaScriptやPHPなどを䜿甚した最新のCMSおよびSPAであり、おそらくサむトの䜜成によっおもたらされるタスクを解決したす。



ちなみに、PHPずJavaScriptの䞡方でxslt倉換を実装するこずはかなり可胜です他の蚀語でも間違いないでしょうが、サヌバヌがある堎合、たたは共有されおいる堎合でも、最小限の技術スタック、䞀皮の犁欲的で最小限のオプションを持぀SSIを䜿甚した゜リュヌションを怜蚎したしたホスティングず...それだけです。Ajaxなしでデヌタを保存するJSのバヌゞョンは考慮したせんでしたこのオプションは存圚するだけでなく、2000幎代の初めに私が䞀床䜿甚したこずがありたすが、AngularJSを搭茉した近代的なSPAに本質的に近いものであり、このテヌマに関する蚘事は十分にあるず思いたす。



䞊蚘の䟋からサむトを構築したくない堎合は、SSI HTMLおよびSSI XMLぞのリンクをご芧ください。



* SPAず1ペヌゞずいう甚語は私ず倚少同じですが、これらはもちろん異なるものです。


More articles:


All Articles