首先我想说的是,在windows下配置vagrant环境比linux和mac下要恶心和麻烦的多。

因为vagrant启动默认需要的很多服务,windows下面都没有,比如用来做目录映射的rsync

  1. 下载相关的软件包,这个不必多说。我用的是vagrant+virtualbox。Box最好先下载到本地,然后在使用本地路径而不是url加载,Box基本都host在国外,一个几百MB,下载速度是在是太慢了,光等待的时间就够你烦的了。可以试用国外的远程服务器wget下载,然后再传到网盘里,然后再从网盘里下载。
  2. 确认BIOS的虚拟化选项开启,如果你的BIOS虚拟化选项没有开启,你会发现打开virtualbox你只可以虚拟32位的操作系统,而且安装完vagrant之后,根本就没有办法启动vagrant。
  3. 为了映射本地目录到虚拟机目录,你需要在windows和虚拟机上面都安装rsync。我是先安装的mingw,然后通过mingw安装的rsync到windows。

折腾了一晚上,rsync装好了,但是还需要进一步配置脚本

  1. 我用的是debian-jessie的box,官方文档里说,root用户的默认密码是vagrant,其实是不对的,默认的root账户用该没有设置密码,好在可以sudo -i切换到root然后passwd root设置新的密码了。

Drupal使用Views Exposed Filter-Ajax–Auto-Submit时后台预览页面显示正常,但是前台页面相关的button没有隐藏,原因是因为

在自定义的主题中每有载入系统默认的基础样式system.base.css

此样式设置文件里含有大量关于ajax的样式,如auto-complete, auto-submit等。

 

注意drupal默认的ajax隐藏的表单元素都会大有js-hide的class。

Vagrant Box下载

点击到确定的发行版版本页面

https://atlas.hashicorp.com/debian/boxes/jessie64/versions/8.5.2

一般都是如上的链接

在链接后面加入/providers/virtualbox.box

https://atlas.hashicorp.com/debian/boxes/jessie64/versions/8.5.2/providers/virtualbox.box

上面的链接就是最终的下载链接。

// Add tooltip for product gallery
            var h2TitleObj = $('.node-type-structure-product h2'),
                productImageGalleryTop = $('.product-gallery').offset().top,
                productImageGalleryLeft = $('.product-gallery').offset().left;
            //console.log(typeof productImageGallery.offset().top);
            //console.log(typeof productImageGallery.offset().left);
            $.each(h2TitleObj, function (key, value) {
                if (this.innerHTML.trim() == "Images") {

                    //$(this).addClass('tooltip-active').attr('tooltip-attr','Click to see large image');
                    /*
                     $(this).tooltip({
                     show: { effect: "blind", duration: 800 },
                     content: "Click to see large image",
                     });
                     */
                    $(this).attr('tooltip-attr','Click to see large image').tooltip({
                            //show: { effect: "blind", duration: 800 },
                            content: "Click to see large image",
                            items: "[tooltip-attr]",
                            position:  {
                                //my: "left top",
                                //at: "right center",
                                collision: "none",
                                //of: ".product-gallery",
                                //within: ".product-gallery",},
                                using: function () {
                                    $(this).css({top: productImageGalleryTop+"px", left: productImageGalleryLeft+"px"});
                                },
                        },
                    });

                    $(this).tooltip("open");
                }
            });

 

CSS样式组件化符合开发的内聚和耦合原则,同时可以维持网站样式的唯一性,构建统一的视觉体验,从而形成用户对产品和品牌的统一性认识。

鉴于目前大家大多使用CSS预处理器来编写CSS代码,我们这里就以sass为例。

styles.scss                                # import all scss files
          --_normalize.scss/_reset.scss
          --_mixins.scss
          --_colors.scss                   # color palettes
          --_components.scss
              --_animate.scss
          --_layout.css
              --_small.scss                # cellphone styles
              --_medium.scss               # tablet styles
              --_large.scss                # monitor styles
          --_print.scss
          --_extend.scss
              --_rtl-language-support.scss

 

 

CSS组件话的另一个思路是按照功能和业务逻辑进行划分

比如一个B2B网站具体的产品页可以这样划分css组件

all items including

title
summary
image gallery
video
product details //含有table和list
application
package shipping
delivery
moq
price terms
presale
aftersale
notes
inquery //form

 

为了满足SEO的要求,很多时候我们不得不将表格改造为更加Search Engine Friendly的unordered list或是ordered list,但是在网页的页面上,我们更希望列表是以表格的形式展现给用户的,这样方便用户的阅读,满足用户体验的要求。

CSS的display table相关的属性可以满足这样的设定。

Display table需要有着和表格html结构类似的markup,其实不严格按照table的markup结构也是可以渲染的。有人说,如果不按照table的markup,就不符合W3C的规范,关于这一点我不是很认同。我认为css只是改变了部分html的渲染方式,而这一点恰恰是W3C希望大家去尝试的,即不修改html结构的基础上改变html的渲染方式。

闲话少说,上代码

<ul class="table-row-wrap">
	<li class="table-row">
	<ul class="tables-cell-wrap">
		<li class="table-cells">Cell1</li>
		<li class="table-cells">Cell2</li>
		<li class="table-cells">Cell3</li>
	</ul>
	</li>
</ul>

其实上面没有完全按照table相似的html来构造,按照表格显示很简单

    .tables-cell-wrap{
      display: table;
      width: 100%;
    }
    .table-cells{
      display: table-cell;
      width: 33%;
      border-right: 1px solid #cccccc;
      text-align: center;
      vertical-align: middle;
      padding: 0.8em 1em;
    }

注意,如果将table-row-wrap设置display:table,再将tables-cell-wrap设置display:table-row,然后设置table-cells为display:table-cell, 这个时候,ul.tables-cell-wrap会出现不能铺满container的情况,这个现象可能和html本身的结构有关系。