drupal 8でサブテーマを作ってみる (超入門編)
TRANSCRIPT
⻘⼭義万
(あおやまよしかず)
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(⽇本語ドキュメント)
{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: {}
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