SiteServer CMS建站總結

最近公司網站要升級改造，主要需求是界面的優化，鑒於沒有登錄、用戶權限等額外需求，而且工期要求緊，所以選擇了用網上現成的CMS快速建站。

從選CMS模板到最終結束，大概歷時半個月，因為是第一次自己建站，包括安裝，前端修改都挺費勁，遇到了不少坑，特此總結一下。

一、選取CMS

網上大致搜了一下，比較常見的CMS有織夢，帝國，YunMok和SiteServer這幾種CMS，鑒於成本有限，所以優先選擇開源免費且模板比較好看的CMS，主要試用了YunMok和SiteServer，YunMok由於是基於PHP，本人沒怎么學過前端，所以直接就棄了= =、

SiteServer大體看了一下，兼容JS，有自己的stl標簽模板，雖然有點學習成本，但還算簡單，對照着文檔寫就行，而且模板有大體相似的，所以就選了SiteServer。

二、安裝CMS

根據官方指導進行安裝即可，我使用的是MySQL數據庫。

三、選擇模板

官方給了很多種模板，根據自己的需求下載即可，也可以在安裝CMS的時候選擇合適的模板。

四、SiteServer項目結構

先放一張結構圖：

看着還挺多的，其實用到得並不多。

1.channels、contents是通過后台自動生成的，所以不要手動改，因為生成之后改的東西就沒了。

2.css是所有的樣式文件

animate.css是動畫效果的樣式

skins.css是網頁主題色的選擇器的樣式，我使用的模板有更改主題色的功能，所以有這個css

style.css是整個網頁基本所有的樣式所在處。

3.fonts是項目中使用的字體文件tff

4.Home沒用到，忽略

5.images是所有圖片

6.include是一些頁面零部件的html存放處，比如說共用的footer和header等

7.js是存放引用的所有已封裝的js

8.Parvel是一個子網站的名稱，沒有子網站是不會有的

9.SiteFiles是網站的基礎資源，比如標簽上的圖標，就是在這里面

10.SiteServer是后台資源，想優化一下后台展示效果的可以通過這個修改

11.Template是所有模板頁，可以在后台-顯示管理-模板管理里進行修改

12.upload是所有上傳的圖片，upload中的分類可以根據自己喜好在后台-設置管理-上傳設置中進行修改

13.utils是小部件的頁面，比如說需要內嵌地圖，可以把地圖單獨做一個頁面，在模板中加入stl:include標簽引入即可

五、界面設計

這是這篇文章的重點，根據領導的要求，大體要求的樣子和這個SEO網站類似，所以這次的內容大致包括以下部分：

1.fullpage整頁滾動的實現

2.固定頭部header菜單欄

3.引入其他字體（准圓）

4.新聞單行滾動效果

5.刷新重置默認首頁

6.animate動畫效果（css3的一個css）

7.FlexSlider的基礎用法

8.固定底部footer

以上包含鏈接的部分，都是我所找到的有用的文章和方法，在此標明出處，並在此基礎上進行總結。

1.fullpage整頁滾動

根據網頁中下載的demo看，一共有13個示例，根據自己的需求來選擇最適合的那個，我用的是demo6和demo7相結合的，既可以通過菜單欄進行錨點固定，又可以點擊右側白點進行切換，當然，右側的導航點也可以添加懸浮顯示文字，具體屬性都在網頁中，不再贅述。

操作比較簡單，根據demo把需要的js放入項目，然后將每個單獨一頁，都加上相同的id，比如id="page",class="section"等等。

2.固定頭部header菜單欄

一開始的想法，是首頁header寬一些，下滑其他頁面會縮小點，但是沒有實現。

實現代碼：

給header的div加上

width: 100%;position: fixed;

實現方式比較low，有更好的歡迎交流。

注意：

因為首頁的菜單欄是錨點的方式，里面的頁面是鏈接的方式，所以這里我把header復制出來一份給首頁專用，畢竟實現方式不一樣，而這些操作都可以在SiteServer后台完成。

3.引入其他字體（准圓）

如果有兼容IE的需求，可以通過字體類型轉換網站將ttf轉換成woff類型

①將所有字體文件（*.ttf）放入項目的fonts文件夾（SiteServer自帶的，方便管理）

②在style.css中添加字體樣式

@font-face {

font-family: '准圓';

src: url('../fonts/准圓.TTF.eot?#iefix') format('embedded-opentype'), url('../fonts/FZY3JW--GB1-0.woff') format('woff'), url('../fonts/FZY3JW--GB1-0.ttf') format('truetype'), url('../fonts/FZY3JW--GB1-0.svg#open_sansregular') format('svg');

}

③頁面引入字體資源

<p style="font-family:准圓;">

</p>

ps:准圓字體看着確實很舒服。

4.新聞單行滾動效果

css：

ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}

js：

function AutoScroll(obj){
    $(obj).find("ul:first").animate({

        marginTop:"-25px"

   },500,function(){

      $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);

    });
}
$(document).ready(function(){

      setInterval('AutoScroll("#scrollDiv")',1000)

});

html：

<div id="scrollDiv">

   <ul>

    <li>百度 www.baidu.com</li>

    <li>這是公告標題的第三行</li>

    <li>這是公告標題的第四行</li>

    <li>這是公告標題的第五行</li>

  </ul>
</div>

5.刷新重置默認首頁

js中添加如下語句：

if (window.location.hash !== "") {

    window.location.href = "{Stl.SiteUrl}/index.html";

}

如果hash不為空，即有錨點值，重定向至首頁，也可以成window.location.hash=""。

6.animate動畫效果

首先，引入animate.css，

animate.css的使用非常簡單，因為它是把不同的動畫綁定到了不同的類里，所以想要使用哪種動畫，只需要把通用類animated和相應的類添加到元素上就行了。

 

下面來詳細介紹animate.css里面的類，主要包括Attention(晃動效果)、bounce(彈性緩沖效果)、fade(透明度變化效果)、flip(翻轉效果)、rotate(旋轉效果)、slide(滑動效果)、zoom(變焦效果)、special(特殊效果)這8類。

以fade為例：

<div class="animated fadeIn"></div>

或

<div class="animated" data-fx="fadeIn"></div>

7.FlexSlider的基礎用法

FlexSlider是SiteServer中使用的一個左右輪播組件，當你看到class="flexslider carousel-slider"就說明用到了FlexSlider，這里說一下，SiteServer有點坑，他把一部分參數寫死了，在項目/js/main.js里面。

所以，如果想自定義的話，就需要在這里面改了，可選參數如下：

{
  namespace: "am-",               //{NEW} String: class的前綴字符串。
  selector: ".am-slides > li",    //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril
  animation: "slide",             //String: "fade" or "slide", AmazeUI 默認使用"slide"滑動，可以選擇 "fade": 淡入淡出。
  easing: "swing",                //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported!
  direction: "horizontal",        *//String: "horizontal" or "vertical" 選擇slide滾動形式，"horizontal": 為水平滾動，"vertical": 上下滾動。
  reverse: false,                 *//{NEW} Boolean: true or false 翻轉slide子項運動方向，"false": 默認為正常運動方向, "true": 為相反方向。
  animationLoop: true,            *官方bug//Boolean: true or false Should the animation loop? If false, directionNav will received "disable" classes at either end
  smoothHeight: false,            *-//{NEW} Boolean: true or false 當slide圖片比例不一樣時，"true": 父類自動適應圖片高度，"false": 不自動適應，父類高度為圖片的最高高度，默認為false。
  startAt: 0,                     //Integer: 開始顯示的slide順序，0為第一張slide。
  slideshow: true,                //Boolean: true or false 是否自動播放，默認為true。
  slideshowSpeed: 5000,           //Integer: 單位為 ms 自動播放的間隔時間。
  animationSpeed: 600,            //Integer: 單位為 ms 動畫運動時間，配合參數slideshowSpeed可以做出一直滾動效果。
  initDelay: 0,                   //{NEW} Integer: 單位為 ms 首次執行動畫的延遲時間，默認為0
  randomize: false,               *官方bug//Boolean: true or false 是否隨機slide順序，默認為false。

  // Usability features
  pauseOnAction: true,            *//Boolean: true or false 作用於控制點暫停自動播放程序。
  pauseOnHover: false,            //Boolean: true or false 懸停在slide上時，暫停自動播放程序。
  useCSS: true,                   //{NEW} Boolean: true or false 開啟使用css3移動。
  touch: true,                    //{NEW} Boolean: true or false 允許觸摸屏觸摸滑動滑塊。
  video: false,                   //{NEW} Boolean: true or false 如果使用視頻的滑塊，可以防止CSS3的3D變換避免毛刺。

  // Primary Controls
  controlNav: true,               //Boolean: true or false 是否創建控制點，方便控制滑塊。
  directionNav: true,             //Boolean: true or false 是否創建上一個和下一個控制點（previous/next）control。
  prevText: "Previous",           //String: 設置上一個控制點文本，默認為"previous"
  nextText: "Next",               //String: 設置下一個控制點文本，默認為"next"

  // Secondary Navigation
  keyboard: true,                 //Boolean: true or false 允許開啟鍵盤左（←）右（→）控制滑塊滑動。
  multipleKeyboard: false,        //{NEW} Boolean: true or false 允許鍵盤控制多個slide，默認為 false 不允許控制多個slide。
  mousewheel: true,               //{UPDATED} Boolean: 是否開啟鼠標滾輪控制 slide 滑動。
  pausePlay: false,               //Boolean: true or false 是否創建暫停與開啟自動播放的控件。
  pauseText: 'Pause',             //String: 設置暫停控件的文本。默認為"pause"
  playText: 'Play',               //String: 設置播放控件的文本。默認為"play"

  // Special properties
  controlsContainer: "",          //{UPDATED} Zepto Object/Selector 控制容器，聲明的容器的導航元素比原容器大。默認的容器是flexslider元。如果給定的元素屬性是不存在忽視。
  manualControls: "",             //{UPDATED} Zepto Object/Selector 聲明自定義導航控件。例如".flex-control-nav li" or "#tabs-nav li img"，使用自定義導航控件，需要把導航數量和滑塊數量相等。
  sync: "",                       //{NEW} Selector: 關聯slide與slide之間的操作。
  asNavFor: "",                   *//{NEW} Selector: Internal property exposed for turning the slider into a thumbnail navigation for another slider

  // Carousel Options
  itemWidth: 0,                   //{NEW} Integer: 滑塊的寬度，盒模型包含horizontal borders and padding
  itemMargin: 0,                  *官方bug//{NEW} Integer: 兩個滑塊之間間隔距離。
  minItems: 1,                    //{NEW} Integer: 最少顯示滑塊的可見數, 與參數itemWidth相關。
  maxItems: 0,                    //{NEW} Integer: 最多顯示滑塊的可見數, 與參數itemWidth相關。
  move: 0,                        *//{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items.

  // Callback API
  start: function(){},            //Callback: function(slider) - slide 初始化完成時的回調。
  before: function(){},           //Callback: function(slider) - 每次動畫完成前的回調。
  after: function(){},            //Callback: function(slider) - 每次動畫完成后的回調。
  end: function(){},              //Callback: function(slider) - slide 動畫執行到最后一個元素時的回調，與start相反。
  added: function(){},            *//{NEW} Callback: function(slider) - Fires after a slide is added
  removed: function(){}           *//{NEW} Callback: function(slider) - Fires after a slide is removed
}

8.固定底部footer

#footer {
     position:fixed;
     left:auto;
     right:auto;
     bottom:0;
     z-index: 1000;//下面的選填
     line-height:28px;
     height:28px;//最好是百分比，有利於移動端顯示
     padding:2px 15px 0 15px;
     width:970px;
     margin:0 auto;
}

遇到的問題

在加fullPage之后，animate的動畫效果出不來了，帶有animate動畫的div和組件，都是空白，測試發現需要點一下鼠標才可以，所以我在滾動的時候，進行了一下鼠標模擬點擊，實現如下：

afterLoad: function (origin, destination, direction) {

      //給每個頁面添加一個相同的id，在加載完之后“點擊”一下鼠標

      $("#clickme").trigger('click')

}

 如有其他問題歡迎交流，引用其他文章在文中都已標明。