Geekly Articles each Day

drupalのレイアウト要件

彼らがレイアウトを送信するときに問題に遭遇し、そこですべてがうまくいくように見えますが、drupalにねじ込み始めると、レイアウトをやり直すかテーマ機能を書き直す必要があるという事実に遭遇します。 そして、最終的には、これによるテーマ設定のプロセスが大幅に増加する可能性があります。 したがって、 作業中の私たちは、drupalの下でレイアウトの要件を作成することにしました。 主な要素の要件は次のとおりです。

メニュー


Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  1. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  2. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  3. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  4. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  5. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  6. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  8. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  9. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  10. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  11. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  12. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  13. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >
  14. Copy Source | Copy HTML < div class ="mymenuclass"> < ul > < li class ="leaf first">< a href ="#"> My account </ a ></ li > < li class ="expanded active-trail">< a href ="#"> Create content </ a > < ul class ="menu"> < li class ="leaf first active-trail">< a href ="#" class ="active"> Page </ a ></ li > <!-- --> < li class ="leaf last">< a href ="#"> Story </ a ></ li > </ ul > </ li > < li class ="collapsed">< a href ="#"> Administer </ a ></ li > < li class ="leaf last">< a href ="#"> Log out </ a ></ li > </ ul > </ div >


divやcssでもメニューをラップしてアクセスすることをお勧めします。 そのようなタイプ：

Copy Source | Copy HTML
  1. .mymenuclass {}
  2. .mymenuclass UL {}
  3. .mymenuclass UL LI {}
  4. .mymenuclass UL LI A {}
  5. .mymenuclass UL LI A：ホバー {}
  6. .mymenuclass UL LI.active -trail {}
  7. .mymenuclass UL LI.active -trail A {}


ポケットベル



Copy Source | Copy HTML
  1. < ul class = "pager"> < li class = "pager-first first"> <a href = "#" class = "active"> First </ a > </ li >
  2. < li class = "pager-previous"> <a href = "#" class = "active">前</ a > </ li >
  3. < li class = "pager-item"> <a href = "#" class = "active"> 1 </ a > </ li >
  4. < li class = "pager-current"> 2 </ li >
  5. < li class = "pager-item"> <a href = "#" class = "active"> 3 </ a > </ li >
  6. < li class = "pager-next"> <a href = "#" class = "active"> next </ a > </ li >
  7. < li class = "pager-last last"> <a href = "#" class = "active"> last </ a > </ li >
  8. </ ul >


ブロック



サイトにブロックがある場合は、それらを単一のスタイルに配置する必要があります。 つまり ブロックテンプレートのhtmlが同じように見えるようにします（もちろん可能な場合）
たとえば、次のように：

Copy Source | Copy HTML
  1. < div id = "blockid" class = "block">
  2. < h2 >タイトル</ h2 >
  4. < div class = "content">
  5. <！-ここに直接ブロックのコンテンツ->
  7. </ div >
  8. </ div >


ブロックIDとして、ブロックの一意のIDを使用します。このIDを使用して、必要に応じてこのブロックの一意性をスタイルで規定します。

テスト内容



次のコンテンツをコンテンツ領域に挿入します（ニュースの全文、テキストページなど）。

Copy Source | Copy HTML
  1. < p > Lorem < sup >上付き文字</ sup > dolor < sub >下付き文字</ sub > amet、consectetuer adipiscing elit、<a href = "#" title = "test link"> test link </ a > 。
  2. < strong > Nullam </ strong > dignissim < em > convallis </ em > est。 クィスクアリカン。 < cite > cite </ / cite > 。
  3. < u > Nunc iaculis suscipit dui。 </ u >ナムシットアメットセム。 Aliquam libero nisi、imperdiet at、tincidunt nec、gravida vehicula、nisl。
  4. プレスト・マティス、マッサ・クイス・ルクトゥス・ファーメンタム、ターピス・ミ・ヴォルツパット・ジャスト、ユー・ヴォルツパット・エニム・ダイアメット・メトス
  5. Maecenas ornare tortor。 Donec sed tellus eget sapien fringilla nonummy。 < 頭字語の タイトル = "National Basketball Association"> NBA </ 頭字語 >マウリス
  6. Suspendisse quam sem、consequat at、commodo vitae、feugiat in、nunc。
  7. Morbi imperdiet augue quis tellus。 < abbr title = "Avenue"> AVE </ abbr >
  8. </ p >
  10. < blockquote >
  11. < p >
  12. ＆＃8220;このスタイルシートは非常におかしくなります＆＆8221;
  13. <br />
  14. -ブロッククォート
  15. </ p >
  16. </ blockquote >
  17. <br />
  18. < 表 >
  19. < tbody >
  20. < tr >
  21. < th >ヘッダー</ th >
  22. < th >ヘッダー</ th >
  23. < th >ヘッダー</ th >
  24. </ tr >
  25. < tr >
  26. < td >データ</ td >
  27. < td >データ</ td >
  28. < td >データ</ td >
  29. </ tr >
  30. < tr >
  31. < td >データ</ td >
  32. < td >データ</ td >
  33. < td >データ</ td >
  34. </ tr >
  35. < tr >
  36. < td >データ</ td >
  37. < td >データ</ td >
  38. < td >データ</ td >
  39. </ tr >
  40. </ tbody >
  41. </ 表 >


これだけではありません。 しかし、レイアウト設計者が少なくともそのような要件を順守していれば、Drupalのテーマ設定のプロセスにかかる時間が短縮されます。

この記事に加えて、 drupalの下でVerstaを読むこともお勧めします。 フォーム

誰かが同様の開発をしている場合、共有していただければ嬉しいです。 追加も歓迎です;）

Source: https://habr.com/ru/post/J86978/

More articles:


All Articles