2

zen-codingについて聞いたばかりです。これは基本的に、css-esqueセレクターに基づいてマークアップを生成するスクリプトです。例：

div#foo > p*6

生成します

<div id="foo">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

編集：これはより高度な例です。

そしてPS-私はAPIをまったく使用していません。CSSセレクターの知識に基づいて完全に推測しています。これは私にとって非常に簡単で直感的です。

ul#nav > li[id] * 6 > a

生成します

<ul id="nav">
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
</ul>

Ctrl-Eなどのショートカットを押したとき。フロントエンドの開発をたくさん行う場合に非常に便利です。私は正反対のアイデアを思いつきました。基本的にマークアップを解析してセレクターを生成するCSSセレクタージェネレーターで、Firebugなどのツールを使用して、ドットのライブ変更をすばやく確認できます。実際にスクリプトを完成させる必要はありませんでした。開始しました。

現在、TextMate、Dreamweaver、Aptana、NetBeansでサポートされていますが、残念ながらvim / emacsではサポートされていませんが、 vimで動作するsparkupという名前のフォークがあります（現在はこれを使用しています）。

過去にそのようなプラグインやツールに出くわしたことがあるかどうか疑問に思います-Vim/Textmate / Emacsやその他の強力なエディターにスニペットスクリプトがあることを知っていますが、他に何があるのか​​知りたいだけです。

4

4 に答える 4

7

うーん。私は毎日たくさんの HTML と CSS を書いていますが、わくわくしていません。あなたが言及した段落は、5 秒で書き、Ctrl+C と Ctrl+V を 6 回繰り返します。確かに、メタ言語によって時間を節約できるシナリオはあるかもしれませんが、メタ言語の必要性を感じたことはありません。非常に大量の HTML (または SQL、または配列) を生成する場合は、そのタスク用に小さな PHP または VB スクリプトを作成します。別のメタ言語が別の言語で何かを生成することは望んでいません。

他の人にとっては役立つかもしれませんが、私にとってはそうではありません。

一般的な有用性についての議論があなたが探していたものだった場合. あなたの投稿をもう一度読んで、私はもう確信が持てません。ともかく。:)

于 2009-11-24T02:08:17.263 に答える
4

Rails を開発している場合は、SassとHamlを確認してください。

Sass は変数を使用して基本的な計算を行うことができます。

// Sass

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

レンダリング:

/* CSS */

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Haml は div の代わりにインデントを使用し、CSS の # と . クラスと div にラベルを付けるためのシステム:

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

にレンダリングします:

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>
于 2009-11-25T01:30:16.437 に答える
2

皆さんがこのような会話をしていることに、私は本当に驚いています。

私は 4 年間 Web 開発を行ってきましたが、最後に次のようなものを書かなければならなかったのはいつか思い出せません。

<li>some text</li>

単一のインスタンスで複数回。

特定の時点で私が書くほとんどのhtmlは次のようなものです

<ul>
<?php foreach ( $menu as $item ) : ?>
 <li><?php echo $item->title ?></li>
<?php endforeach; ?>
</ul>

言うまでもなく、スタティック HTML の作成を高速化するためのツールを学習する意味がまったくわかりません。それは、より大きなシャベルを手に入れるようなものです。自分自身をより大きな全体に掘り下げるだけです。

生成する静的な html の量をどのように削除できますか?

その質問に対する答えは、Joomla、Drupal、Wordpressなどの CMS を使用することです。どうしても静的 html サイトを作成する必要がある場合は、Sphinxなどを検討してください。

Sphinx を使用すると、HTML を記述する必要が完全になくなり、ハードコードされた html リンクを 1 つも記述することなく、複数のページを持つ静的サイトを作成できます。

Sphinx はreStructuredTextマークアップを使用します。reStructuredText でコードを生成する方法を紹介します。

- `Joomla`_
- `Drupal`_
- `Wordpres`_
- `Sphinx`_
_ :doc:`Some intermal Page <internal/file>`

.. _Joomla: http://joomla.org
.. _Drupal: http://drupal.org
.. _Wordpress: http://wordpress.org
.. _Sphinx: https://www.sphinx-doc.org

これが reStructuredText でどのように機能するかを示そうとしました。リンクを提供せずにタグを作成することは決してないため、Sphinx のコンテキストではこの例は正確には意味がありません。しかし、あなたは私が望むアイデアを得る.

于 2009-11-25T01:51:12.807 に答える
0

Blueprint CSSフレームワークには、Rapid HTML/CSS Development のようなタグラインがあります。

複製ではなく、革新に時間を費やしてください。

于 2009-11-24T02:01:23.860 に答える