ここを教えてほしかった！初めての a-blog cms

2021年4月13日(火)にYouTube Liveにて行われた a-blog cms zoom up 内での発表資料です。

Transcript

2. 自己紹介 ４月から入社した 新米フロントエンドエンジニアです。 Twitter フォロー お願いします！ 宇井 陸登 @poorman_ui JavaScript勉強中, アニメ鑑賞, シャーマンキング 宇井 陸登 https://ui.appleple.blog
3. - インターンのこと - テーマ選定理由 - 実装前の自分のスキル感 導入
4. - 自分の備忘録として - a-blog cmsを初めて扱う人に教えるときのヒント テーマ選定の理由
5. - スニペット？ 変数？ モジュールとは？ - ユニットの HTML はどこから？ - Entry_Summary と Entry_Bodyってどっち使えばいい の？ 話すこと
6. モジュールってなんだろう？
7. a-blog cms 内のデータを
8. 表示させるパーツ
9. - 複雑なスニペット - 数多の変数 なぜ理解が難しいのか？
10. <!-- BEGIN_MODULE Entry_Summary --> <div class="acms-margin-bottom-medium"> @include("/admin/module/setting.html") <!-- BEGIN notFound --> <p>ただいまページを準備しております。もうしばらくお待ちください。</p> <!-- END notFound --> <div class="acms-grid"> <!-- BEGIN unit:loop --> <!-- BEGIN entry:loop --> <div class="acms-col-md-4 js-autoheight-r"><!-- BEGIN image:veil --> <img src="%{ROOT_DIR}{path}" alt="{alt}" class="acms-img-responsive"><!-- END image:veil --><!-- BEGIN noimage --><img src="/images/default/noimage.gif" alt="" class="acms-img-responsive"><!-- END noimage --> <h3>{title}</h3> <p>{summary}</p> <p><a href="{url}" class="acms-btn">詳細をみる</a></p> </div> <!-- END entry:loop --> <!-- END unit:loop --> </div> <!-- BEGIN pager:veil --> <div class="acms-text-center"> <ul class="acms-pager"> <!-- BEGIN backLink --><li><a href="{url}">« 前の{backNum}件</a></li><!-- END backLink --> <!-- BEGIN page:loop --><li{pageCurAttr}[raw]><span><!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->{page}<!-- BEGIN link#rear --></a><!-- END link#rear --></span></li><!-- END page:loop --> <!-- BEGIN lastPage:veil --><li><span>...</span></li><li{pageCurAttr}[raw]><span><a href="{lastPageUrl}">{lastPage}</a></span></li><!-- END lastPage:veil --> <!-- BEGIN forwardLink --><li><a href="{url}">次の{forwardNum}件 »</a></li><!-- END forwardLink --> </ul> </div> <!-- END pager:veil --> </div> <!-- END_MODULE Entry_Summary -->
12. 結論 • 主要のものは、役割と意味を伝える • 変数表の存在を伝える
13. ユニットの HTML はどこから？
14. themes / system / _layouts / unit.html
15. <!-- BEGIN unit#text --> @section(text-unit) <!-- テキスト --> <!-- BEGIN p --> <p{class}>{text}[raw|nl2br]</p><!-- END p --><!-- BEGIN h2 --> <h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[raw|nl2br]</h2><!-- END h2 --><!-- BEGIN h3 --> <h3{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[raw|nl2br]</h3><!-- END h3 --><!-- BEGIN h4 --> <h4{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[raw|nl2br]</h4><!-- END h4 --><!-- BEGIN h5 --> <h5{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[raw|nl2br]</h5><!-- END h5 --><!-- BEGIN ul --> <ul{class}>{text}[raw|list]</ul><!-- END ul --><!-- BEGIN ol --> <ol{class}>{text}[raw|list]</ol><!-- END ol --><!-- BEGIN dl --> <dl{class}>{text}[raw|definition_list]</dl><!-- END dl --><!-- BEGIN blockquote --> <div class="entry-container"><blockquote{class}>{text}[raw|nl2br]</blockquote></div><!-- END blockquote --><!-- BEGIN table --> <div class="entry-container"><table{class}>{text}[raw|table]</table></div><!-- END table --><!-- BEGIN pre --> <div class="entry-container"><pre{class}>{text}</pre></div><!-- END pre --><!-- BEGIN none --> {text}[raw]<!-- END none --><!-- BEGIN markdown --> {text}[raw|markdown]<!-- END markdown --><!-- BEGIN wysiwyg --> {text}[raw]<!-- END wysiwyg --> @include("/include/unit/tag-select.html") @endsection <!-- END unit#text --> テキストユニット
16. Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です
17. Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Flexboxがあたっていない…
18. <!-- BEGIN clear --><hr class="clearHidden"><!-- END clear --> 原因は…
19. a-blog cms 分かった！！
20. Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です Q. 質問です質問です質問です
21. 結論：ユニットの元はどのファイル なのかを伝えておこう
22. Entry_Summary と Entry_Bodyってどっち使えばいい の？
23. Entry_Body Entry_Summary エントリーの一覧表示、単一表示、エ ントリーの投稿など、 
 エントリーの情報をほぼ全て エントリーの一覧(URLとタイトルと日 時とカテゴリーとメイン画像と概要テ キスト)
24. Entry＿Bodyのほうが便利なのでは？
25. Entry_Body {path} {alt} {text} {utid} {entry:loop.eid} {entry:loop.ccd} {title} {summary}
26. Entry_Body { entry:loop.eid } で エントリーid が出力できる Entry_Summary { eid } で エントリーid が出力できる
27. 詳細ページ 一覧ページ
28. 表示速度は Entry_Summaryのほうが早い Entry_Body Entry_Summary
29. 結論：一覧表示はEntry_Summary で表示させよう もちろん Entry_Body が適している場合もあります
30. - モジュール・スニペット・変数表の説明は丁寧に！ - ユニットは unit.htmlに定義されていると教える - エントリーの一覧表示は Entry_Summaryで まとめ
31. ありがとうございました！！ 質問感想などコメントいただけると嬉しいです！！ 自分のブログのタイトルとドメイン名をキャッチー な名前をつけたいのですが、迷っています。 なにかアイディアいただけると嬉しいです。