drupal主题使用

drupal8官方主题使用介绍

日期:2017-07-31 阅读:1160


进入网易云课堂播放
    |    更多视频教程>

drupal8主题下载:
https://www.drupal.org/project/project_theme

介绍以下主题:
基主题:
https://www.drupal.org/project/bootstrap 

bootstrap子主题要改几个地方,在config里也要把THEMENAME改掉。还有里面的THEMENAME.settings,只好先用编辑器搜索下

如果用sass的子主题,则要下载 https://github.com/twbs/bootstrap-sass

然后用sass编译下。

--------------------------

ruby环境sass编译中文出现Syntax error: Invalid GBK character错误解决方法

找到ruby的安装目录,里面也有sass模块,如这个路径:
C:\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass
在这个文件里面engine.rb,添加一行代码 
Encoding.default_external = Encoding.find('utf-8')
放在所有的require XXXX 之后即可。

 

----------------

具体请看视频教程。

 
非基主题:

by danpros 
https://www.drupal.org/project/danland

它的幻灯片并不是后台设置,是通过放在目录里(主题下的images/slideshows)来实现的。

  $mask = '/\.(?:jp[e]?g|gif|png)$/i';
    $files = file_scan_directory(drupal_get_path('theme', 'danland') . '/images/slideshows', $mask);
    ksort($files);
    $variables['files'] = $files;

然后在模板里输出:

 {% if is_front %}    
          <div class="slideshow">
            {% for file in files %}
              <img src="{{ file.uri }}" width="100%" height="100%" alt="{{ file.name }}"/>
            {% endfor %}
          </div>   
  {% endif %}

--------------------

by zymphonies.com 

https://www.drupal.org/project/drupal8_zymphonies_theme

 https://www.drupal.org/project/drupal8_parallax_theme

https://www.drupal.org/project/businessgroup_zymphonies_theme

https://www.drupal.org/project/creative_responsive_theme
https://www.drupal.org/project/professional_responsive_theme
https://www.drupal.org/project/awesome_zymphonies_theme

 

by leopathu 
https://www.drupal.org/project/integrity
https://www.drupal.org/project/paxton


by devsaran 
https://www.drupal.org/project/business
https://www.drupal.org/project/nexus

business主题的幻灯片(使用了flexslider)没有出来,是因为drupal8新版的jquery版本太高了。而business用了旧的方法。要改下js

 jQuery(window).on('load', function(){  //要用on的写法。

 //jQuery('.flexslider').flexslider({
   // animation: "slide"

 });

或直接用:  

  jQuery(function(){
       jQuery('.flexslider').flexslider({
     animation: "slide"
  });
    });
另外, 箭头用了Glyphicons Halflings字体,即bootstrap,Business主题加载了bootstrap.
主题设置里,可以添加幻灯片图片,这种方法可以应用到其他的主题。
另外也可以加不同的color。是通过
$color = theme_get_setting('business_color', 'business');
$vars['#attached']['library'][] = "business/color-{$color}";来实现的。
再在libraries.yml里调相关的内容: 
color-green:
  version: VERSION
  css:
    theme:
      css/green.css: {}
而info.yml是这样来调用的:
libraries:
  - business/business-bootstrap
  - business/global-css
 
----------------------

 

后台主题:
https://www.drupal.org/project/adminimal_theme
 

<<点击返回