2015年12月20日 星期日

統一本站規格:「下拉選單」超連結至「文章列表」

簡介:
由於此 Blogger 為多人管理,為了頁面的一致性,而整理此文,希望統一一個流程來製作「文章列表」之格式,並以超連結加到「下拉式選單」之中。

##ReadMore##

Step1. 
新增文章→新增標籤。
其中新增的文章要歸類於新的標籤,標籤格式(例如:Linux-Debian-NewPage),更詳細的請參考文章「在 Google Blogger 中建立樹狀 Label 分類」。


Step2.
首頁→更新「Tags List」→點選板手圖示出現「設定標籤」視窗→編輯→將 Step1. 所新增的標籤勾選。
 


Step3.
「設計」→ 「網頁」→「新網頁」→
新增一個網頁,注意命名要同「文章標籤」的格式以「-」做樹狀分類,例如:Linux-Debian-NewPage。


Step4.
編輯所新增的「網頁」,加入該分類下之文章的標題及超連結,以本站文章「Linux-Debian-Laptop」為例,內容如下:

-------------------------------------------------------------------
筆電音量快捷鍵設定 
筆電螢幕亮度 Backlight 
Bluetooth 藍芽配對連接 
筆電低電壓警告聲 
多輸出螢幕控制 (使用 xrandr 指令)
-------------------------------------------------------------------



Step5.
反白所有內容→清除格式。


Step6.
反白所有內容→設定字體大小為「大」→刪除多餘的空行。
(要注意「標題、子標題、小標題、一般」的選項都不要動到)


Step7.
反白有超連結之內容→加入「編號清單」。


Step8.
「設計」→「網頁」→「上一步驟新增的網頁」→「檢視」→得到超連結網址。


Step9.
「設計」→「範本」→「編輯 HTML」→Ctrl+F 搜尋自己 Blogger 名稱→找到「下拉式選單語法」自行加入需要的位置→完成。
(詳細參考文章「在 Google Blogger 中建立下拉式選單」)
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='PM Linux 好好玩實驗室 (標頭)' type='Header'>
          <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:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section>
    </div>
<!-- 自訂義下拉式選單start -->
<div id='navMenu'>
<div id='navMenuleft'>
<ul id='nav'>

<li>
 <a expr:href='data:blog.homepageUrl'>Home</a>
</li>

<li>
 <a href='http://p501lab.blogspot.tw/p/about.html'>About</a>
</li>

<li>
 <a href='http://p501lab.blogspot.tw/p/3d.html'>3D</a>
<!--
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/3d-blender_19.html'>Blender</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/3d-freecad.html'>FreeCAD</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/3d-printer.html'>3D Printer</a></li>
   </ul>
-->
</li>

<li>
 <a href='http://p501lab.blogspot.tw/p/blog-usage_19.html'>Blog Usage</a>
</li>

<li>
 <a>Embedded Board</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-boards-cubieboard.html'>Cubieboard</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-boards-raspberry-pi.html'>Raspberry Pi</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/embedded-board-unojoy.html'>UnoJoy</a></li>
 </ul>
</li>

<li>
 <a>Linux</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/linux-centos.html'>CentOS</a></li>
  <li>
   <a href='http://p501lab.blogspot.tw/p/linux-debian_5.html'>Debian</a>
   <ul>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian-tools.html'>Tools 工具</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian.html'>基礎操作及運用</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian-embedded.html'>Embedded 課程</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian_35.html'>進階課程</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian_19.html'>進階其他</a></li>
    <li><a href='http://p501lab.blogspot.tw/p/linux-debian-laptop.html'>Laptop</a></li>
   </ul>
  </li>
  <li><a href='http://p501lab.blogspot.tw/p/linux-red-hat.html'>Red Hat</a></li>
 </ul>
</li>

<li>
 <a>Programs</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/programs-android.html'>Android App</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-arduino.html'>Arduino</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-bash-shell.html'>Bash Shell</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-jsp.html'>JSP</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-java.html'>Java</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-latex.html'>LaTeX</a></li>
  <li><a href='http://p501lab.blogspot.tw/p/programs-python_19.html'>Python</a></li>
 </ul>
</li>

<li>
 <a>Windows</a>
 <ul>
  <li><a href='http://p501lab.blogspot.tw/p/windows-tools.html'>Tools</a></li>
 </ul>
</li>

</ul>


</div>
</div>
<!-- 自訂義下拉式選單end -->

-