Question

希望在我的移动模板主题上显示与blogger / blogspot博客上的桌面主题不同的背景图片。

目前，它在Layout / Header1 Widget中显示为桌面主题上传的相同图像。

下面的代码片段显示了Header1 Widget。我想A：使用图片替换博客标题和描述;和B：为移动设备和桌面设备使用不同的图像。

我正在查看！ - 仅显示图片区域，并且不确定如何添加if：data：blog.isMobile

＆＃13;

<header>
    <div class='header-outer'>
    <div class='header-cap-top cap-top'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    <div class='fauxborder-left header-fauxborder-left'>
    <div class='fauxborder-right header-fauxborder-right'/>
    <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Wisconsin Explorer (Header)' type='Header'>
          <b:widget-settings>
            <b:widget-setting name='displayUrl'>http://1.bp.blogspot.com/-2Pq9AO4eOJY/Wa30DFl96xI/AAAAAAAAIBs/QaONXMPNVS8ww6IjNgrn7jNUtAEkgQeeQCK4BGAYYCw/s1600/desktop%2Blogo.png</b:widget-setting>
            <b:widget-setting name='displayHeight'>225</b:widget-setting>
            <b:widget-setting name='sectionWidth'>752</b:widget-setting>
            <b:widget-setting name='useImage'>true</b:widget-setting>
            <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
            <b:widget-setting name='imagePlacement'>REPLACE</b:widget-setting>
            <b:widget-setting name='displayWidth'>1100</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
        <div id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
            <h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      <b:else/>
        <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height                      + &quot;_height: &quot; + data:height                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
            <h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
          <b:includable id='title'>
  <b:tag cond='data:blog.url != data:blog.homepageUrl' expr:href='data:blog.homepageUrl' name='a'>
    <data:title/>
  </b:tag>
</b:includable>
        </b:widget>
      </b:section>
    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>
      <div class='cap-right'/>
    </div>
    </div>

    </header>

＆＃13;

Answer 1

使用data:blog.isMobileRequest代替data:mobile

<b:if cond='data:blog.isMobileRequest'>
  <div style='background-image: url(
https://4.bp.blogspot.com/-fTbhFqMEXwQ/WaYHi3JaowI/AAAAAAAAH9c/Xc1iTWjGzvQSMNutcKvrud3s8bk2b4ijwCKgBGAs/mobile
%2Blogo.png);background-position:left ; min-height:400px ;_height:400px ;background-repeat: no-repeat;&quot;' id='header-inner'>
    <div class='titlewrapper' style='background: transparent'>
      <h1 class='title' style='background: transparent; border-width: 0px'>
        <b:include name='title'/>
      </h1>
    </div>
    <b:include name='description'/>
  </div>
<b:else/>
  <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot; + data:backgroundPositionStyleStr + &quot;; &quot; + data:widthStyleStr + &quot;min-height: &quot; + data:height + &quot;_height: &quot; + data:height + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
    <div class='titlewrapper' style='background: transparent'>
      <h1 class='title' style='background: transparent; border-width: 0px'>
        <b:include name='title'/>
      </h1>
    </div>
    <b:include name='description'/>
  </div>
</b:if>

Blogger Blogspot从桌面移动不同的header1图像

1 个答案: