ruby - ハムルとサスを見るジキル

Question

さまざまなフォルダーに .haml および .scss ファイルを含むプロジェクトが既にありました。

このガイドに従って、http://winstonyw.com/2013/02/24/jekyll_haml_sass_and_github_pages/を作成_plugins/haml.rbし、_plugins/sass.rb

すべての .scss ファイルを./assets/css/フォルダーに移動しました

確認するために、フォルダーも作成layoutsし、そこにすべての .haml ファイルを配置しました。

実行したjekyll serve --watchところ、これらの .haml / .scss ファイルが _sites の .html または .css ファイルに変換されませんでした。ブラウザからもアクセスできません。

ここでこのファイルを試してみましたが、どちらも役に立ちませんでしたhttps://gist.github.com/radamant/481456#file-haml_converter-rb

では、私は何を間違えて、すべての .haml / .scss ファイルをライブで見ることができるのでしょうか?

私はmiddlemanapp世界から来たのでjekyll、私には新しいです。

更新 1 :

私の高レベルの目標は次のとおりです。

Sass と Haml を使用したフロントエンド開発に Jekyll を使用する
ファイルの変更を監視する必要があります
.sass / を変換する必要があります。scss ファイルと Haml を watch で .css と .html に変換します。http://localhost:4000/index.html実際に私がHamlとしてindex.hamlを持っているときに私が行くことができることを意味します
私のプロジェクトは、Jekyll doc (レイアウトフォルダーなど) に記載されているディレクトリ構造に従っていません。これは、他のフォルダー内の .sass および .haml ファイルを検出できる必要があります (これを指定できます)
ヘッダー内の .sass または .scss ファイルを変更して、Jekyll に検出させたくありません。私はすでに（Bootstrapから）それらをたくさん持っているので

更新 2 :

これが私の新しいものです_config.yml

source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     .

.haml基本的に、すべてのファイルをメインフォルダーに置きたいのですが、 layouts. 上記のように_plugins私は持ってい_plugins/haml.rbます。_plugins/sass.rbそれでも、index1.hamlメインフォルダーにサンプルを作成したときに動作せず、変換されませんでした--watch

更新 3 :

これが私のディレクトリ構造です：

/www

 /_plugins

  haml.rb

  sass.rb

 /_layouts

  index1.haml

 _config.yml
 index1.haml

でhaml.rb：

module Jekyll
  require 'haml'
  class HamlConverter < Converter
    safe true
    priority :low

    def matches(ext)
      ext =~ /haml/i
    end

    def output_ext(ext)
      ".html"
    end

    def convert(content)
      engine = Haml::Engine.new(content)
      engine.render
    rescue StandardError => e
      puts "!!! HAML Error: " + e.message
    end
  end
end

(index1.haml両方のファイルの内容は同じです):

!!!
%html
  %head
    %meta{charset: "utf-8"}/
    %meta{content: "initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width", name: "viewport"}/
    %title
  %body
    Test Test

の_config.yaml

---
source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     ./_layouts
---

これはまだ私にはうまくいきません。.html ファイルは生成されません。

更新 $ :

これをファイルに追加すると、次のようになり.hamlます。

---
title: Index
---

ただし、ファイルを変更することはできますが、 /ファイル.hamlでそれを行うことは避けようとしています。私は Bootstrap やその他の作品からたくさんのものを持っています。回避策はありますか？.sass.scss

score 2 · Accepted Answer

sourceディレクトリを指定する適切な Jekyll 構成がないようです。

次のように、パラメーターを介して構成を指定することでビルドできます。 jekyll serve --source assets --destination public

しかし、例をつかんで_config.ymlそこから行く方がおそらく良いでしょう。あなたが直面しているシナリオは、基本的な使用方法のドキュメントで説明されています。

_config.yml以下を含む非常に単純なものから始めます。

source:      source
destination: public

_pluginsとがディレクトリ_layoutsの子であることを確認してください。source

独自の構成を作成しない場合は、デフォルトの構成が使用されます。この構成を使用する場合は、構造とツールセットが一致していることを確認してください。

source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     ./_layouts
include:     ['.htaccess']
exclude:     []
keep_files:  ['.git','.svn']
gems:        []
timezone:    nil
encoding:    nil

future:      true
show_drafts: nil
limit_posts: 0
highlighter: pygments

relative_permalinks: true

permalink:     date
paginate_path: 'page:num'
paginate:      nil

markdown:      kramdown
markdown_ext:  markdown,mkdown,mkdn,mkd,md
textile_ext:   textile

excerpt_separator: "\n\n"

safe:        false
watch:       false    # deprecated
server:      false    # deprecated
host:        0.0.0.0
port:        4000
baseurl:     ""
url:         http://localhost:4000
lsi:         false

maruku:
  use_tex:    false
  use_divs:   false
  png_engine: blahtex
  png_dir:    images/latex
  png_url:    /images/latex
  fenced_code_blocks: true

rdiscount:
  extensions: []

redcarpet:
  extensions: []

kramdown:
  auto_ids: true
  footnote_nr: 1
  entity_output: as_char
  toc_levels: 1..6
  smart_quotes: lsquo,rsquo,ldquo,rdquo
  use_coderay: false

  coderay:
    coderay_wrap: div
    coderay_line_numbers: inline
    coderay_line_numbers_start: 1
    coderay_tab_width: 4
    coderay_bold_every: 10
    coderay_css: style

redcloth:
  hard_breaks: true

また、Jekyll で処理したいすべてのページに適切なYAML の front-matterがあることを確認する必要があります。

YAML フロントマターブロックを含むファイルはすべて、Jekyll によって特別なファイルとして処理されます。

その YAML フロントマターがない場合、プラグインは適用されません。

次のように、空にすることもできます

---
---

#haml

./_layouts/index1.hamlいらないので削除。これに変更index1.hamlします。

---
title: Index
---

!!!
%html
  %head
    %meta{charset: "utf-8"}/
    %meta{content: "initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width", name: "viewport"}/
    %title
  %body
    Test Test

そして、次の---行を削除します_config.yml--そうあるべきです

source:      .
destination: ./_site
plugins:     ./_plugins
layouts:     ./_layouts

私の知る限り、Jekyll プラグインを使用する.scssと、それらのファイルの YAML のフロントマターを必要とせずにファイルを処理する方法はありません。これを実現するには、jekyll 処理に加えてプリプロセッサを使用する必要があります。私は個人的にJekyll Asset Pipeline Rebornを使用しています。セットアップは簡単で、ファイルの縮小や結合などの優れた機能がいくつかあります。

または、grunt を使用しているため (タグが原因であると思います)、grunt を使用して.scss.

score -1 · Accepted Answer

最近このページに来ている人には朗報です。Jekyll の最新バージョンでは、HAML がそのままサポートされているようです。ファイル名を .haml に変更するだけで、GTG になります。

ruby - ハムルとサスを見るジキル

4 に答える 4

Related

Reference