Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Drupal	8でサブテ
ーマを作ってみる
(超⼊⾨編)
⻘⼭	義万
(あおやま	よしかず)
About	me
Facebook:	
Twitter:	
Drupal.org:	
ANNAI	Inc
Drupal	Japan	User	Group
Drupalさっぽろ
https://www.face...
Experience
Drupal	contributor	(Core,	Views,	Console,	etc)
Mautic	contributor
Drupal	site	&	system
Internet	of	Things
Web	a...
Topics
Drupal	8で使えるBootstrapのサブテーマを作ってみます。
ドキュメント
https://www.drupal.org/theme-guide/8
D7のテーマとのファイル構造的な
違い
{theme_name}.info	->	{theme_name}.info.yml
template.php	->	{theme_name}.theme
{theme_name}.info.yml
name: my_bootstrap_subtheme
type: theme
description: My Boostrap sub theme
package: Custom
base them...
テーマにcssやjsなどのアセットを
追加する場合
libraries	を	{theme_name}.info.ymlにキーとして追加
値は他のテーマと重複しないように	{theme_name}/{library_name}
にする
libra...
{theme_name}.libraries.yml
global-styling:
css:
theme:
css/custom_style.css: {}
js:
js/custom_script.js: {}
css/custom_style.css
メニューのサイト名の部分をオレンジっぽく変える
.navbar-default .navbar-brand {
color: #ff8c00;
}
js/custom_script.js
コンテンツエリアの先頭にBootstrapのアラートメッセージを⼊れてみ
る
(function($){
console.log("execute my custom script");
$(".main...
出来上がったものはこちら
https://github.com/blauerberg/my_bootstrap_subtheme
Think	ITでDrupal	8の⼊⾨記事を
連載中!
初⼼者でも挫折しないゼロから始めるDrupal	8⼊⾨
ANNAIではエンジニアを絶賛募集
中です!
リモートワーク可能です!
Contact	us
https://annai.co.jp/recruit
Upcoming SlideShare
Loading in …5
×

Drupal 8でサブテーマを作ってみる (超入門編)

657 views

Published on

Drupal Meetup Tokyo Vol.2でお話した「Drupal 8でサブテーマを作ってみる (超入門編)」の資料です。

オリジナルのデータはこちら
- https://blauerberg.github.io/slides/create_subtheme_for_drupal8/#/


- https://meetup.drupaljapan.org/node/71

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Drupal 8でサブテーマを作ってみる (超入門編)

  1. 1. Drupal 8でサブテ ーマを作ってみる (超⼊⾨編)
  2. 2. ⻘⼭ 義万 (あおやま よしかず) About me Facebook: Twitter: Drupal.org: ANNAI Inc Drupal Japan User Group Drupalさっぽろ https://www.facebook.com/yoshikazu.aoyama @blauerberg blauerberg
  3. 3. Experience Drupal contributor (Core, Views, Console, etc) Mautic contributor Drupal site & system Internet of Things Web application (Ruby on Rails, Java, Node.js, etc) Cloud/Server side design and administration (Infrastructure as Code, DevOps) Embedded Linux Network stack for telecommunication network (xDSL, 3G, 3.5G) TCP/IP Network stack Maintainer of Drupal Console (⽇本語ドキュメント)
  4. 4. Topics Drupal 8で使えるBootstrapのサブテーマを作ってみます。
  5. 5. ドキュメント https://www.drupal.org/theme-guide/8
  6. 6. D7のテーマとのファイル構造的な 違い {theme_name}.info -> {theme_name}.info.yml template.php -> {theme_name}.theme
  7. 7. {theme_name}.info.yml name: my_bootstrap_subtheme type: theme description: My Boostrap sub theme package: Custom base theme: bootstrap core: 8.x version: 8.x-1.0 regions: navigation: 'Navigation' navigation_collapsible: 'Navigation (Collapsible)' header: 'Top Bar' highlighted: 'Highlighted' help: 'Help' content: 'Content' sidebar_first: 'Primary' sidebar_second: 'Secondary' footer: 'Footer' page_top: 'Page top' page_bottom: 'Page bottom' libraries: - my_bootstrap_subtheme/global-styling
  8. 8. テーマにcssやjsなどのアセットを 追加する場合 libraries を {theme_name}.info.ymlにキーとして追加 値は他のテーマと重複しないように {theme_name}/{library_name} にする libraries: - my_bootstrap_subtheme/global-styling
  9. 9. {theme_name}.libraries.yml global-styling: css: theme: css/custom_style.css: {} js: js/custom_script.js: {}
  10. 10. css/custom_style.css メニューのサイト名の部分をオレンジっぽく変える .navbar-default .navbar-brand { color: #ff8c00; }
  11. 11. js/custom_script.js コンテンツエリアの先頭にBootstrapのアラートメッセージを⼊れてみ る (function($){ console.log("execute my custom script"); $(".main-container").prepend($("<div>").addClass("alert alert-info").attr("role", "alert"). })(jQuery);
  12. 12. 出来上がったものはこちら https://github.com/blauerberg/my_bootstrap_subtheme
  13. 13. Think ITでDrupal 8の⼊⾨記事を 連載中! 初⼼者でも挫折しないゼロから始めるDrupal 8⼊⾨
  14. 14. ANNAIではエンジニアを絶賛募集 中です!
  15. 15. リモートワーク可能です!
  16. 16. Contact us https://annai.co.jp/recruit

×