Haml :: SyntaxError dans StatiC# home?

Question

Je cette Haml:

#index-header 
    %h1 title 
    %p motto 
%h1 Our Software 
    %p motto 
.third-column 
    %h2 Product 1 
    %p foo 
.third-column 
    %h2 Product 2 
    %p foo 
.third-column 
    %h2 Product 3 
    %p foo 

Et je reçois cette erreur:

Haml::SyntaxError in Static#home

Showing app/views/static/home.html.haml where line #5 raised:

Illegal nesting: content can't be both given on the same line as %h1 and nested within it. 

Qu'est-ce que je fais mal? Merci.

Answer 1

Je pense qu'il se plaint parce que vous avez un élément <p> à l'intérieur d'un tag <h1>. (Ligne 4 dans votre code.)

Answer 2

Il se plaint parce que vous avez du contenu sur la même ligne que votre balise %h1 (Our Software) et imbriqué dessous (%p Which will once becoume your's), tout comme le message d'erreur indique.

Answer 3

Vous ne pouvez pas placer de contenu dans une ligne de tag et ajouter du contenu imbriqué en même temps. code correct:

#index-header 
    %h1 Supersonic Mac Software. 
    %p Some motto 
%h1 
    Our Software 
    %p Which will once becoume your's 

Answer 4

Si vous, comme moi, étaient à la recherche d'une solution, mais a trouvé un choeur de défaitistes en chœur. Vous serez heureux de savoir que HAML est tout à fait capable et également disposé à répondre à cette exigence.

Le focus du message d'erreur repose sur les mots sur la même ligne car haml a besoin que tout le contenu d'une étiquette soit indenté sous son parent.

Si nous voulions que l'exemple de balisage de cette question fonctionne comme spécifié, nous le modifions comme suit pour produire les résultats souhaités sans autres plaintes.

#index-header 
    %h1 title 
    %p motto 
%h1 
    Our Software 
    %p motto 
.third-column 
    %h2 Product 1 
    %p foo 
.third-column 
    %h2 Product 2 
    %p foo 
.third-column 
    %h2 Product 3 
    %p foo 

Vous avez peut-être remarqué, nous ne devions changer une définition %h1 qui a la balise %p imbriquée, parce que c'est la seule définition ne respecte pas l'analyseur de HAML. En déplaçant simplement le contenu Our Software vers une ligne indentée à côté de ses pairs, nous réduisons efficacement la friction cognitive, ce qui indique clairement que les deux éléments sont des frères et soeurs du même parent.

L'extrait suivant produira la marge nécessaire pour une bootstrap 3 styled page header

.page-header 
    %h1 
    Example page header 
    %small Subtext for header 

nJoy!