uikit2:
version: '2.27.2'
header: true
css:
theme:
uikit2/css/uikit.min.css: { minified: true }
js:
uikit2/js/uikit.min.js: { minified: true }
dependencies:
- core/jquery
global-styling:
version: '8.2.7'
css:
base:
css/base/elements.css: {}
component:
css/components/block.css: {}
css/components/book.css: {}
css/components/breadcrumb.css: {}
css/components/captions.css: {}
css/components/comments.css: {}
css/components/contextual.css: {}
css/components/demo-block.css: {}
# @see https://www.drupal.org/node/2389735
css/components/dropbutton.component.css: {}
css/components/featured-top.css: {}
css/components/feed-icon.css: {}
css/components/field.css: {}
css/components/form.css: {}
css/components/forum.css: {}
css/components/header.css: {}
css/components/help.css: {}
css/components/highlighted.css: {}
css/components/item-list.css: {}
css/components/list-group.css: {}
css/components/list.css: {}
css/components/main-content.css: {}
css/components/menu.css: {}
css/components/messages.css: {}
css/components/node.css: {}
css/components/node-preview.css: {}
css/components/page-title.css: {}
css/components/pager.css: {}
css/components/panel.css: {}
css/components/primary-menu.css: {}
css/components/search-form.css: {}
css/components/search-results.css: {}
css/components/secondary-menu.css: {}
css/components/shortcut.css: {}
css/components/skip-link.css: {}
css/components/sidebar.css: {}
css/components/site-branding.css: {}
css/components/site-footer.css: {}
css/components/table.css: {}
css/components/tablesort-indicator.css: {}
css/components/tabs.css: {}
css/components/text-formatted.css: {}
css/components/toolbar.css: {}
css/components/featured-bottom.css: {}
css/components/password-suggestions.css: {}
css/components/ui.widget.css: {}
# @see https://www.drupal.org/node/2389735
css/components/vertical-tabs.component.css: {}
css/components/views.css: {}
css/components/buttons.css: {}
css/components/image-button.css: {}
css/components/ui-dialog.css: {}
layout:
css/layout.css: {}
theme:
css/colors.css: {}
css/print.css: { media: print }
messages:
version: VERSION
css:
component:
css/components/messages.css: { preprocess: false }
color.preview:
version: VERSION
css:
theme:
color/preview.css: {}
js:
color/preview.js: {}
dependencies:
- color/drupal.color
maintenance_page:
version: VERSION
css:
theme:
css/maintenance-page.css: {}
dependencies:
- system/maintenance
- flash_bartik/global-styling
php代码高亮示例
public function getConfig(Editor $editor) {
$settings = $editor->getSettings();
$default_config = \Drupal::config('codesnippet.settings');
if (!empty($settings['plugins']['codesnippet']['highlight_style'])) {
$style = $settings['plugins']['codesnippet']['highlight_style'];
}
else {
$style = $default_config->get('style');
}
if (!empty($settings['plugins']['codesnippet']['highlight_languages'])) {
$languages = array_filter($settings['plugins']['codesnippet']['highlight_languages']);
}
else {
$languages = $default_config->get('languages');
}
// Before sending along to CKEditor, alpha sort and capitalize the language.
$languages = array_map(function ($language) {
return ucwords($language);
}, $languages);
asort($languages);
return [
'codeSnippet_theme' => $style,
'codeSnippet_languages' => $languages,
];
}
ss代码高亮示例
.layout-container {
max-width: 860px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
@media all and (min-width: 851px) {
.layout-container {
max-width: 1290px;
}
}
/**
* Main
*/
.layout-main-wrapper {
min-height: 300px;
}
.layout-main {
margin-top: 20px;
margin-bottom: 40px;
}
Drupal 8 当中支持jQuery的js代码规范写法是：
(function($) {
'use strict';
$(document).ready(function(){
// start js/jquery code here
});
})(jQuery);
<script>
// 非闭包模式下的jQuery的reay方法
$(document).ready(function(){
});
// js闭包,其实就是匿名函数立即执行的意思
(function() {
}());
// 支持jQuery的$简写的闭包模式
(function($) {
$(document).ready(function(){
});
}(jQuery));
// 直接支持jQuery的reay方法$简写的闭包模式
jQuery(document).ready(function($) {
...
});
// 在drupal 8当中，js必须在一个模式的闭包函数当中使用
(function () {
'use strict';
// 开始原生js代码
})();
(function ($) {
'use strict';
// 开始支持jquery的js代码
}(jQuery));
(function ($, Drupal) {
'use strict';
// 开始支持jQuery和drupal行为和设置的js代码
}(jQuery, Drupal));
</script>