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

16
Drupal 8 でサブテ ーマを作ってみる ( 超⼊⾨編 )

Upload: yoshikazu-aoyama

Post on 13-Apr-2017

279 views

Category:

Technology


0 download

TRANSCRIPT

Drupal8でサブテーマを作ってみる

(超⼊⾨編)

⻘⼭義万

(あおやまよしかず)

Aboutme

Facebook:Twitter:Drupal.org:

ANNAIIncDrupalJapanUserGroupDrupalさっぽろ

https://www.facebook.com/yoshikazu.aoyama@blauerberg

blauerberg

ExperienceDrupalcontributor(Core,Views,Console,etc)

MauticcontributorDrupalsite&systemInternetofThingsWebapplication(RubyonRails,Java,Node.js,etc)Cloud/Serversidedesignandadministration(InfrastructureasCode,DevOps)EmbeddedLinuxNetworkstackfortelecommunicationnetwork(xDSL,3G,3.5G)TCP/IPNetworkstack

MaintainerofDrupalConsole(⽇本語ドキュメント)

TopicsDrupal8で使えるBootstrapのサブテーマを作ってみます。

ドキュメントhttps://www.drupal.org/theme-guide/8

D7のテーマとのファイル構造的な違い

{theme_name}.info->{theme_name}.info.ymltemplate.php->{theme_name}.theme

{theme_name}.info.ymlname: my_bootstrap_subthemetype: themedescription: My Boostrap sub themepackage: Custombase theme: bootstrapcore: 8.xversion: 8.x-1.0regions: 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

テーマにcssやjsなどのアセットを追加する場合

librariesを{theme_name}.info.ymlにキーとして追加値は他のテーマと重複しないように{theme_name}/{library_name}にする

libraries: - my_bootstrap_subtheme/global-styling

{theme_name}.libraries.ymlglobal-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-container").prepend($("<div>").addClass("alert alert-info").attr("role", "alert").text})(jQuery);

出来上がったものはこちらhttps://github.com/blauerberg/my_bootstrap_subtheme

ThinkITでDrupal8の⼊⾨記事を連載中!

初⼼者でも挫折しないゼロから始めるDrupal8⼊⾨

ANNAIではエンジニアを絶賛募集中です!

リモートワーク可能です!

Contactus

https://annai.co.jp/recruit