開發工具與關鍵技術：Adobe Dreamweaver CC

作者：黃燦

撰寫時間：2019.1.16



在模仿華為官方網頁的練習當中我發現華為官網中有一個遮罩層是隨便點擊遮罩層的背景也能關閉掉遮罩層，但唯獨點擊內容區域不會關閉掉遮罩層。于是我開始模仿這個寫案例，連內容也一模一樣（因為這個練習就是要寫出和華為關一樣的效果或則比它更好的效果），一開始我是這樣子寫的（圖1）



圖1



class=Select_Region_bj 我給了一個灰色半透明的背景樣式，后來在Javascript中寫onclick事件無論這么寫，點擊內容區也是會關閉掉遮罩層。我百思不得其解到底怎么樣寫才能點擊內容區不會關閉遮罩層，后來下課期間我看見我同學他寫的帶能點擊內容區不會關閉遮罩層。我問他你是這么寫的，他告訴我：“把他們分離就可以的了?！蔽宜伎剂艘粫?，腦補：分離？怎么分離？補著補著補著就補出了背景和內容區分離。分離寫（圖2）

圖2



把背景層和內容區分開來寫，不要在背景層中包裹內容，這樣子點擊內容區就不會關閉掉遮罩層了！

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

寫在前面

vue中關于插槽的文檔說明很短，語言又寫的很凝練，再加上其和methods，data，computed等常用選項使用頻率、使用先后上的差別，這就有可能造成初次接觸插槽的開發者容易產生“算了吧，回頭再學，反正已經可以寫基礎組件了”，于是就關閉了vue說明文檔。

實際上，插槽的概念很簡單，下面通過分三部分來講。這個部分也是按照vue說明文檔的順序來寫的。

進入三部分之前，先讓還沒接觸過插槽的同學對什么是插槽有一個簡單的概念：插槽，也就是slot，是組件的一塊HTML模板，這塊模板顯示不顯示、以及怎樣顯示由父組件來決定。 實際上，一個slot最核心的兩個問題這里就點出來了，是顯示不顯示和怎樣顯示。

由于插槽是一塊模板，所以，對于任何一個組件，從模板種類的角度來分，其實都可以分為非插槽模板和插槽模板兩大類。
非插槽模板指的是html模板，指的是‘div、span、ul、table’這些，非插槽模板的顯示與隱藏以及怎樣顯示由插件自身控制；插槽模板是slot，它是一個空殼子，因為它顯示與隱藏以及最后用什么樣的html模板顯示由父組件控制。但是插槽顯示的位置確由子組件自身決定，slot寫在組件template的哪塊，父組件傳過來的模板將來就顯示在哪塊。

單個插槽 | 默認插槽 | 匿名插槽

首先是單個插槽，單個插槽是vue的官方叫法，但是其實也可以叫它默認插槽，或者與具名插槽相對，我們可以叫它匿名插槽。因為它不用設置name屬性。

單個插槽可以放置在組件的任意位置，但是就像它的名字一樣，一個組件中只能有一個該類插槽。相對應的，具名插槽就可以有很多個，只要名字（name屬性）不同就可以了。

下面通過一個例子來展示。

父組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="father">
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3>
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl">
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

子組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="child">
            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3>
            

        

    

    


        


            


            

        

        


            

                <slot></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

在這個例子里，因為父組件在<child></child>里面寫了html模板，那么子組件的匿名插槽這塊模板就是下面這樣。也就是說，子組件的匿名插槽被使用了，是被下面這塊模板使用了。

    


        


            


            

        

        


            

                <div class="tmpl">
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

最終的渲染結果如圖所示：

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                注：所有demo都加了樣式，以方便觀察。其中，父組件以灰色背景填充，子組件都以淺藍色填充。
            

        

    

具名插槽

匿名插槽沒有name屬性，所以是匿名插槽，那么，插槽加了name屬性，就變成了具名插槽。具名插槽可以在一個組件中出現N次。出現在不同的位置。下面的例子，就是一個有兩個具名插槽和單個插槽的組件，這三個插槽被父組件用同一套css樣式顯示了出來，不同的是內容上略有區別。

父組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="father">
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3>
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl" slot="up">
            

        

    

    


        


            


            

        

        


            

                <span>菜單1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl" slot="down">
            

        

    

    


        


            


            

        

        


            

                <span>菜單-1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單-6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl">
            

        

    

    


        


            


            

        

        


            

                <span>菜單->1</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->2</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->3</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->4</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->5</span>
            

        

    

    


        


            


            

        

        


            

                <span>菜單->6</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

子組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="child">
            

        

    

    


        


            


            

        

        


            

                // 具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="up"></slot>
            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3>
            

        

    

    


        


            


            

        

        


            

                // 具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="down"></slot>
            

        

    

    


        


            


            

        

        


            

                // 匿名插槽
            

        

    

    


        


            


            

        

        


            

                <slot></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

顯示結果如圖：

可以看到，父組件通過html模板上的slot屬性關聯具名插槽。沒有slot屬性的html模板默認關聯匿名插槽。

作用域插槽 | 帶數據的插槽

最后，就是我們的作用域插槽。這個稍微難理解一點。官方叫它作用域插槽，實際上，對比前面兩種插槽，我們可以叫它帶數據的插槽。什么意思呢，就是前面兩種，都是在組件的template里面寫

    


        


            


            

        

        


            

                匿名插槽
            

        

    

    


        


            


            

        

        


            

                <slot></slot>
            

        

    

    


        


            


            

        

        


            

                具名插槽
            

        

    

    


        


            


            

        

        


            

                <slot name="up"></slot>
            

        

    

但是作用域插槽要求，在slot上面綁定數據。也就是你得寫成大概下面這個樣子。

    


        


            


            

        

        


            

                <slot name="up" :data="data"></slot>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data: function(){
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

我們前面說了，插槽最后顯示不顯示是看父組件有沒有在child下面寫模板，像下面那樣。

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                html模板
            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

寫了，插槽就總得在瀏覽器上顯示點東西，東西就是html該有的模樣，沒寫，插槽就是空殼子，啥都沒有。
OK，我們說有html模板的情況，就是父組件會往子組件插模板的情況，那到底插一套什么樣的樣式呢，這由父組件的html+css共同決定，但是這套樣式里面的內容呢？

正因為作用域插槽綁定了一套數據，父組件可以拿來用。于是，情況就變成了這樣：樣式父組件說了算，但內容可以顯示子組件插槽綁定的。

我們再來對比，作用域插槽和單個插槽和具名插槽的區別，因為單個插槽和具名插槽不綁定數據，所以父組件是提供的模板要既包括樣式由包括內容的，上面的例子中，你看到的文字，“菜單1”，“菜單2”都是父組件自己提供的內容；而作用域插槽，父組件只需要提供一套樣式（在確實用作用域插槽綁定的數據的前提下）。

下面的例子，你就能看到，父組件提供了三種樣式(分別是flex、ul、直接顯示)，都沒有提供數據，數據使用的都是子組件插槽自己綁定的那個人名數組。

父組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="father">
            

        

    

    


        


            


            

        

        


            

                <h3>這里是父組件</h3>
            

        

    

    


        


            


            

        

        


            

                <!--第一次使用：用flex展示數據-->
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user">
            

        

    

    


        


            


            

        

        


            

                <div class="tmpl">
            

        

    

    


        


            


            

        

        


            

                <span v-for="item in user.data">{{item}}</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第二次使用：用列表展示數據-->
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user">
            

        

    

    


        


            


            

        

        


            

                <ul>
            

        

    

    


        


            


            

        

        


            

                <li v-for="item in user.data">{{item}}</li>
            

        

    

    


        


            


            

        

        


            

                </ul>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第三次使用：直接顯示數據-->
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="user">
            

        

    

    


        


            


            

        

        


            

                {{user.data}}
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <!--第四次使用：不使用其提供的數據, 作用域插槽退變成匿名插槽-->
            

        

    

    


        


            


            

        

        


            

                <child>
            

        

    

    


        


            


            

        

        


            

                我就是模板
            

        

    

    


        


            


            

        

        


            

                </child>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

子組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="child">
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <h3>這里是子組件</h3>
            

        

    

    


        


            


            

        

        


            

                // 作用域插槽
            

        

    

    


        


            


            

        

        


            

                <slot  :data="data"></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                data: function(){
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

結果如圖所示：

github

以上三個demo就放在GitHub了，有需要的可以去取。使用非常方便，是基于vue-cli搭建工程。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

前言：平時寫頁面的時候有些樣式使用完發現沒過多久就忘記了，這篇文章主要是用來記錄開發過程中容易忘記的CSS樣式，與其總是去網上查，還不如一個一個記錄下來，雖然說之前的都沒有記錄，但是知識的累積不論什么時候開始做都不會晚的。



首先 記錄幾個好用的插件網站：



layDate日期與時間組件： https://www.layui.com/laydate/

Vant移動端插件庫： https://youzan.github.io/vant/#/zh-CN/intro

Element組件庫： https://element.eleme.cn/#/zh-CN/component/installation

Vue.js框架： https://cn.vuejs.org/v2/guide/

Bootstrap框架： https://v2.bootcss.com/index.html

菜鳥教程官網： https://www.runoob.com/

w3school官網： https://www.w3school.com.cn/

下面是遇到的一些想累積的css樣式：（內容會隨時間累積的越來越多）



1、一個 div 中的內容實現上下滑動效果（而不是超出body的高以后上下滑動）：overflow:auto;

簡單的描述：body 中的一個 div 內，如果設置了固定的 height，而內容的總 height 超出了 div 的高，則超出的部分就會被覆蓋，而想實現超出的部分變成滑動的效果而不被覆蓋，則用 overflow:auto; 實現。



2、修改 前端框架封裝好的css樣式： border-radius: 20px!important;（注意使用英文的 ! 嘆號）

簡單的描述：在開發過程中經常使用一些前端框架（bootstrap，vue.js，laydate，Vant等等），在使用link導入css文件以后，發現有些css是在標簽內使用內嵌的方式實現的，優先級最高，那么我們怎么修改呢？

比如：css文件中的邊框弧度樣式為10px：border-radius: 10px;

我們想改成20px，則在后面加上 !important 即可：border-radius: 20px!important;



這篇文章主要是以后回頭復習或者忘記了的時候給我自己看的，但是如果恰好也幫助到了你，那是更加的有意義，在以后的開發過程中，該文章的內容一定會累積的越來越多

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

先問一個問題：怎么樣衡量一個設計好與不好？工作中實踐越多次，越會發現華麗的設計稿并不是體現設計師專業能力的唯一標準。普通設計師和高級設計師區別在于，設計方案是否具備完整設計思路；設計對于業務有沒有真正的價值體現；以及設計方案的推動落地的完整性到底有多少。設計越往后走，越考驗產品思維，設計思維，以及設計推動能力。這是產品設計師需要關注的核心三要素。

設計師在工作中接到設計需求會不自覺的第一時間想著如何去進行視覺表達，視覺表達確實非常重要，也是公司對于設計師的核心價值的定位之一，但視覺表達只是其中設計專業本職工作中的一個環節。設計師還要應該能夠站在產品、設計、技術等不同維度去思考設計方案的可行性。產品打磨-視覺呈現-落地執行，在這三個核心點里面設計師分別有不同的定位和價值所在。 

  一. 產品“雙標”滿足   

產品打磨包含產品規劃，內容組成，界面布局，交互梳理等等…所有環節的工作是為了符合產品最終的目標。產品所有的能力會核心圍繞兩個點：1商業變現 2用戶需求滿足。這兩個目標在產品執行的環節有時候會有一些沖突，在產品打磨階段設計師通過怎樣的方式，做到既滿足產品商業目標又滿足用戶體驗需求？可以按照以下幾個步驟進行分析尋求切入點： 

這里用騰訊動漫付費模塊舉例說明： 項目背景是騰訊動漫產品要做付費體系升級設計，接到需求先有由產品源頭一步步深入，逐步展開設計方案的規劃。 

 01 產品目標確認  

通過對項目背景的解讀和產品方案的深入了解，以及總結當前存在的一些問題，可以明確得到項目中產品核心目是什么。付費升級核心原因是付費轉化低，用戶付費意愿不夠強烈。此次升級的核心目標是促進內容消費，提升付費率。 

 02 分析用戶路徑  

確認目標之后從哪個模塊兒開始進行首要需要考慮的。對于現有現有功能的升級，建議核心從產品本身著手，可以根據用戶行為分析，獲取用戶常規使用路徑，找到用戶使用場景下的核心目的，從而去挖掘用戶在付費路徑下的訴求點，根據訴求點找到付費升級的觸點。這里我們羅列了用戶閱讀產品的路徑。 

 03 觀察用戶核心需求是否被滿足 

 用戶在每個場景下都會有“痛點”和“癢點”。比如在閱讀前，核心目是想快點看到漫畫內容；閱讀過程中，想要及時宣泄對漫畫的故事情節的感受；閱讀后，希望找到更多相關內容或者能夠和內容有更多的互動。目前產品在這三個關鍵的路徑節點都存在一些問題，閱讀前對于付費缺乏正向引導，閱讀過程中互相行為較少，閱讀后沒有更多延展內容可供消費等。 

 04 洞察設計切入點  

根據用戶在閱讀 “前 中 后” 關鍵路徑的節點的不同情緒反饋，我們可以做出找到相應情感滿足切入點，并且制定解決方案 

 05 制定設計方案  

將之前找到的設計情感切入點用交互和視覺的形式呈現出來，盡可能完整的表達清晰。下面展示是關于付費升級優化的完整視頻DEMO。整個方案采用趣味情感化形式為核心設計思路，逐步去引導用戶付費。讓用戶在趣味互動中完成產品的商業轉化目標。 

https://v.youku.com/v_show/id_XNDM0NDg1MzY2MA==.html

 二. 設計呈現的“差異化”   

視覺呈現是設計師們都比較擅長的工作，但不同專業高度要求下方案最終呈現出的效果是完全不一樣的。好的設計方案，需要在設計上做出明顯的“差異化”，這里的差異化是指要區別于常規輸出一般的水平。差異化的可以從多個點入手：

優質的設計美感：

美感是作為設計師首先需要培養的技能之一，也是在后續職業生涯的一直需要用到的技能。設計師被神職化的很大一個原因就是因為設計師的美感比一般人要好，有懂得欣賞美、鑒別美、以及創造美的能力。單一從視覺層面，設計作品是合格品還是精品，最終取決于畫面的精美程度。項目不分大小，再小的一個項目都可以做出精致品質，這也是體現設計師專業度的核心衡量之一。

完整設計思路：

設計方案的完整性也能夠很好的設計師專業度的差異化，幾張圖的設計稿和一個有完整設計思路的設計方案在品質上自然是明顯差別的。設計師不光需要將設計呈現出來，更需要有嚴謹的設計思路并且表達出來讓受眾到你的設計想法。設計前期分析、中期執行、后期落地以及迭代優化，能夠讓設計師有意識的鍛煉和提升自己的設計思維，對于設計師能力提升有必然的幫助。 

獨特創意：

設計差異化呈現上，創意是一個非常好的切入點。行業大趨勢的前提下，現在同類產品越來越趨于同質化，受眾使用產品的時候都會有一些常規認知，關于功能的、交互操作的、內容組成的等等，淘寶和京東、大眾和美團、甚至QQ音樂和網易音樂在產品使用體驗上都有高度重合的地方，這些已經在用戶心智中形成習以為常的認知感受。如果能夠在用戶的常規認知里，用創意手法呈現出超出他們預期的內容使其驚喜，產品設計就會有明顯差異化體現。 

善用情感化：

具備美感的設計能讓作品看起來有高級感，但更為高級且有效的是能夠引起用戶情感共鳴的設計。設計是主觀的，對于設計每個人都有自己的想法，也正是因為主觀的設計感受，能讓設計在情感化打造方面可以有很多的嘗試方向。能夠引起受眾主觀情感上的共鳴和認同的設計，會形成產品的核心記憶點之一。設計師對于情感化設計往往會有一些誤區，認為圖形可愛，色彩羨慕，動效流暢且能夠形成一套視覺體系，就能夠算情感設計。真正的情感設計是需要從用戶角度出發，挖掘用戶的認知領域和喜歡，從而去進行符合用戶情感訴求的呈現。 

三. 方案推動的效能管理 

設計方案輸出只是整個產品生產流程中的一個核心環節，產品上線后體驗如何最終取決于落地實現的程度。在方案落地支持過程中，效率協調和實現能力是保證設計方案貫徹一致執行的關鍵因素：

 協作  

產品設計師工作協調分為內部協作和外部協作。內部協作即設計師之間的溝通協同，主要內容是如何保持設計語言一致性，除了制定設計規范，還可以建立公共控件庫，線上調用?？丶炷軌蚴乖O計師協作無學習成本，設計師輸出設計稿效率也能夠大大提升，同時保一致性。

外部協作主要是和下游的技術同事直接的工作對接，設計方案的交接方式以及開發獲取信息的效率很關鍵。在開發接收設計方案的時候，盡能力降低獲取成本以及理解成本。比如設計稿的標注，在標注上設計師一般會花很長時間，開發也需要逐步查看，偶爾還會有標注遺漏的地方。我們團隊會直接采用插件，設計稿及時同步，并且開發可以自己隨時查看每個元素的標注信息，便捷。

這里推薦兩款協調軟件：一款是InVision可以在sketch里進行控件協同調用，所有想用的元素直接源文件調用，不需要再問同事要源文件！另一款是Zeplin技術同學可以直接查看元素屬性以及間距等，設計師解放雙手不再需要標注！

官網鏈接： 

https://login.invisionapp.com/auth/sign-in   

https://zeplin.io/

實現能力   

專業技術之間的壁壘，也會成為設計方案實現的阻力。同樣的界面，設計人員用設計軟件實現，技術人員用邏輯代碼實現，實現的方式和成本存在很大的差異性，所以往往設計師認為很簡單的需求在開發層面的確非常難實現。當然，不是所有需求都是無解的，設計師在技術實現層面還是可以做一些事情：

01 方案前置溝通

設計一個新的功能的時候，如果有非常規的設計方案，可以提前和技術人員溝通實現的難易程度，讓技術人員有前期預判和預演的時間。并且，可以將設計做成簡易DEMO方便技術人員快速理解，避免雙方存在信息不對等的情況。

02 搭建開發控件庫

開發控件庫和設計規范一樣，是最基礎但應用最為頻繁的模塊兒。開發控件庫可以將最基礎的元素形成固有規范，所有開發實現都用同一套規范，以確保實現的高度一致性，同時也能夠提升實現效率和設計還原。設計可以輔助開發一起制定開發控件庫，確?？丶旌驮O計規格的一致性。

03 尋求技術語言共通性

盡量將設計方案轉化為技術能夠理解和復用的形式進行對接。除了靜態設計稿的標注，設計和技術實現最大的難點在于動態交互的實現上，對于動態設計，將設計方案轉換為代碼文件交付給技術實現，這樣能確保功能的正常實現同時減少后期設計還原性的偏差。

以上初步總結的關于產品設計師在設計過程中從前期產品規劃到中期設計執行再到后期開發落地應該注意的一些核心點：

第一條，設計方案既要滿足產品目標又同時要兼顧用戶體驗；

第二條，優秀的設計師，會保持設計方案的“差異化”；

第三條，設計師職責除了確保設計方案完整性，更重要的是推動設計方案的完整落地。

在產品設計過程中，設計師需要關注還有很多關鍵點，這里也歡迎大家一起補充交流，正是這些關鍵點，將設計師的思維逐步打開，使其成為一個具有全鏈路思維的設計人才。 

文章來源：UI中國

普通數字轉會計金額格式（保留兩位小數）

我們可以用數字的toLocaleString()方法將普通數字轉為會計金額格式，但是這種方式無法保留兩位小數(四舍五入)，如果是整數或者小數長度只有一位的時候無法自動補0



例如：





思路：

利用toLocaleString()以及toFixed()先對數字進行一個轉換得到最多保留了2位小數的金額，然后判斷數字是為整數還是帶有小數，如果帶有小數則進行切割，判斷小數長度為1時自動補0



// 普通數字轉會計金額格式 第一種

    function toThousandsFormates(num) {

        // 判斷傳進來的數字是否為非空數字

       if (!isNaN(parseFloat(num))) {

            var reg = /./g

            var newNum = Number(Number(num).toFixed(2)).toLocaleString()

            // 判斷轉換后的數字是否帶有小數

            if (reg.test(newNum)) {

                var numArr = newNum.split('.')

                // 判斷小數點后數字長度為1，則自動補0

                numArr[1] = numArr[1].length === 1 ? numArr[1] + '0' : numArr[1]

                return numArr.join('.')

            } else {

                // 整數直接在后面補上0.00

                return newNum + '.00'

            }



        } else {

            return ''

        }

    }

    console.log(toThousandsFormates('0')); // 0.00

    console.log(toThousandsFormates('')); // ''

    console.log(toThousandsFormates(966)); // 966.00

    console.log(toThousandsFormates(966.3)); // 966.30

    console.log(toThousandsFormates(9669228.55)); // 9,669,228.55

    console.log(toThousandsFormates(96566.56954)); // 96,566.57



經過查閱資料后，發現toLocaleString()它里面自帶屬性可以檢查到最少保留了幾位小數，不夠自動補0，這樣我們上面的代碼其實可以更加簡單，如下:

// 普通數字轉會計金額格式 第二種

function toThousandsFormates2(num) {

    // 判斷傳進來的數字是否為非空數字

    if (!isNaN(parseFloat(num))) {

        var newNum = Number(Number(num).toFixed(2)).toLocaleString('zh', { minimumFractionDigits: 2 })

        return newNum



    } else {

        return ''

    }

}



console.log(toThousandsFormates2('0')); // 0.00

console.log(toThousandsFormates2('')); // ''

console.log(toThousandsFormates2(966)); // 966.00

console.log(toThousandsFormates2(966.3)); // 966.30

console.log(toThousandsFormates2(9669228.55)); // 9,669,228.55

console.log(toThousandsFormates2(96566.56954)); // 96,566.57



// 結果一模一樣



會計金額格式轉普通數字（利用正則）

// 會計金額格式轉為普通數字

    function rMoney(num) {

        return parseFloat(num.replace(/[^\d\.-]/g, ''))

    }

    console.log(rMoney('96,566.57')); // 96566.57

    console.log(rMoney('966.30')); // 966.3

    console.log(rMoney('9,669,228.55')); // 9669228.55

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

交互手勢是用戶操作的重要部分，交互手勢的設計好壞非常影響用戶體驗，那么，交互手勢的設計上對于容錯性和邏輯性需要注意什么？

隨著用戶體驗被愈發的重視，更多的 APP 偏向于使用多手勢優化用戶的操作流程，降低使用阻力。

點擊某個確定的按鈕的手勢操作雖然被普遍使用并被用戶熟知，但是增加更快捷的手勢操作可以大大增大操作熱區，提高操作效率，如下圖。

然而，我們可以發現由于不同產品的設計師對于用戶體驗的理解不同、交互層面的思考不同，導致設計的交互手勢也不同。

有時同一種操作在不同的 APP 中交互手勢也是不統一的，這無疑增加了用戶的學習成本和記憶成本。

舉個例子，iOS 端的得到和有書的播放頁的打開和關閉方式。

得到有兩種方式打開和關閉頁面，用戶可以通過點擊控件或上滑控件打開播放頁，通過點擊收起按鈕或下拉頁面關閉播放頁。但是有書只有一種方式打開和關閉，用戶只能通過點擊控件打開播放頁，通過點擊返回圖標關閉播放頁。

這讓習慣了使用得到的我去使用有書時，感覺非常別扭，每次都嘗試用得到的手勢去操作但是都失敗了，失敗后我下一次并沒有記住仍然用手勢去操作，如此反復令我相當沮喪。

容錯性

容錯性是一個很大的話題，今天我們僅僅在交互手勢層面上討論。

上面的例子中，有書并沒有設計滑動手勢去打開和關閉播放頁，那么我以我的經驗去進行的滑動滑操作在有書這個產品中就是錯誤的和不被產品識別的。但是這種手勢又廣泛存在于大量的音頻播放 APP 中，如喜馬拉雅、荔枝 FM 等。

一旦用戶從這些 APP 遷移到了有書，本來養成的操作習慣在有書就失效了，用戶就會感覺“這個 APP 很難用，用起來很不舒服”，進而可能放棄有書轉而投向其他產品懷抱。

與手勢設計類似，這也是為什么現在的同種類型的 APP 的信息架構設計越來越同質化，當我們打開淘寶、天貓、京東時我們有時感覺就像是同一個 APP ，本質上也是為了降低用戶的遷移、記憶和學習成本。

如下圖所示，提高手勢的容錯性對用戶的意義。

很多優秀的產品考慮到了上述問題，設計了多手勢來優化用戶體驗。

舉個例子，在 APP Store 的首頁點擊一個推薦卡片后進入詳情頁，由于詳情頁是直接由卡片放大轉場的，不同于傳統的新頁面右側進入和從底部彈出。

在用戶的使用習慣和認知中新頁面如果從右側進入就可以通過右滑返回，從底部彈出的話就可以下拉返回。因此，當用戶面對卡片放大進入新頁面這種全新交互時可能會疑惑如何返回，對此理解不同的用戶可能會嘗試右滑，也可能嘗試下拉。

APP Store 的設計在此就有很好的容錯性，用戶可以通過三種方式返回首頁，分別是、右滑返回、下拉返回和點擊叉號返回，這不但降低了用戶的記憶和學習成本，也便于不同習慣的用戶使用。

針對不同的場景，手勢的使用也會有不同。

一個很好的案例是知乎的評論：知乎的評論的關閉方式有三種，分別是下拉、右滑和點擊叉號。

用戶觀看評論的場景有兩種，第一種是只想看一下精選評論然后關閉，第二種是被評論吸引后一直往下看。當用戶單手操作不方便點擊叉號時，下拉對應的是第一種用戶；右滑對應的是第二種用戶，不管用戶看了多少屏的評論，隨時可以通過右滑關閉評論（因為用戶翻閱了很多屏評論后需要下拉到第一條評論時，下拉關閉評論手勢才會生效，所以第二種用戶一般不使用下拉去關閉評論）。

可能你會心生疑惑：“第一種用戶也可以使用右滑來關閉評論呀”，確實可以，但是對于人的操作習慣來說，上下滑動會比左右滑動更方便。

還值得討論的是蘋果自 iPhone 6s 開始加入的新交互方式 3D Touch，它允許用戶通過更大力度的重按呼出情景菜單快捷地使用高頻功能而不用先打開 APP，對于追求效率的用戶來說簡直不要更方便，但是對于不支持 3D Touch 的機型則無法使用情景菜單。

因此，在生活中我發現這樣的現象，很多使用慣了3D Touch 的用戶換到無 3D Touch 的蘋果機型后很不習慣，總是嘗試去重按但是是無效的。

其實在很多安卓手機上也有情景菜單這一功能，它巧妙地將卸載也加到了情景菜單中，因此用戶只需要通過長按就可以獲得所有需要的功能，而不是像蘋果那樣長按是卸載而重按是情景菜單。

我猜測蘋果為了適配所有機型，提高容錯性，從今年的發布會的 iPhone 11 和iPhone 11 pro 開始，取消了 3D Touch，轉而使用 Haptic Touch （有震動反饋的長按）代替。當你長按某個圖標時，感受到震動后松開，即可呼出二級菜單；如果震動后仍不松開，則進入到卸載 APP 時的抖動狀態，使得之后的即使不支持 3D Touch的機型可以使用便捷的情景菜單了。

對于不支持 3D Touch 的老款機型會不會在 iOS 13 更新后也可以使用 Haptic Touch 呢？

如果一致統一的話，容錯性將大大提高，我們將拭目以待。

不僅僅是 iOS ，Android 的版本 Android 10經歷了 6 個測試版迭代后正式發布，我們發現交互手勢是 Android 10 的一個巨大亮點。Android 10 在第三版內測系統開始引入全局手勢操作，用戶啟用后，屏幕底部便不會再出現虛擬按鍵和導航欄，只會剩下一個指示條，上滑返回主屏、側滑返回上一層的操作邏輯也均和 iOS 保持一致。

這可能標志著安卓手機一直以來在國內各家廠商的各種創新手勢的割裂生態中即將重歸統一，并和 iOS 保持一致。

這種妥協將大大提高在用戶使用一款新安卓手機時的容錯性，同時降低了今后用戶在兩大系統之間的遷移成本。

邏輯性

再談談邏輯性，在交互手勢的層面上，如果用戶能夠通過某個手勢進行某個操作后，按照邏輯，用戶也可以通過反向的手勢或對應的手勢進行逆向操作。

比如，在微信首頁下拉調出小程序頁面，之后可以通過上拉返回首頁。點擊加號呼出更多操作，再次點擊加號收起更多操作。

如果違背了用戶的心理模型和邏輯性，用戶就會感覺到混亂和不適。

這里舉一個反例， Uki 的個人主頁可以通過點擊或下拉底部的固定底板收起更多信息，但是收起后只能通過點擊展開更多個人信息而不能上拉，不符合邏輯與用戶的心理模型。

如下圖所示，邏輯性對用戶的意義。

有的時候，我們會發現為了提高容錯性，我們會犧牲一部分邏輯性。

就像上文提到的知乎關閉評論彈出框，邏輯上它是從底部彈出的，但是不但能夠下拉關閉還可以右滑關閉。盡管右滑關閉有些違背用戶的心理模型，但是確實給用戶帶來了很多操作上的便捷。

如何設計

1. 是否需要加入多手勢操作的考慮因素

我們需要考慮的因素包括使用頻率、危險程度和特殊體驗。

1. 使用頻率：當一個功能的使用頻率足夠高時，我們加入多手勢操作去提高用戶操作效率才是有意義的。一個低頻的功能的特殊手勢操作很容易被用戶遺忘。
2. 危險程度：如果一個操作不可撤銷且存在危險性質，我們最好不要加入多手勢操作。此時我們需要用戶更加專注，如果加入多手勢操作可能會增加誤操作的概率。
3. 特殊體驗：當我們需要加入特殊的模擬體驗時，此時我們可以加入多手勢操作。如探探左滑無感右滑喜歡，給用戶帶來的“翻牌子”感覺是點擊操作無法替代的。QQ 閱讀下拉擬物繩燈進行日間和夜間模式切換，這種存在我們記憶中的交互方式能夠喚起我們的情感。

2. 評估所選手勢的考慮因素

1）考慮不同平臺的硬件系統和操作系統特性

由于硬件與操作系統差異，iOS 系統支持很多手勢，但是安卓系統在手勢支持方面就不如 iOS 豐富。

安卓硬件設備的差異比較大，不同安卓手機廠商會在安卓系統的基礎上自定義系統的手勢操作，因此對于手勢的支持也有較大的差異。對于這種情況我們需要熟悉相應平臺的規范，做到心中有數。

2）考慮所選的手勢的學習成本和記憶成本，用戶是否已經被教育

如下圖所示，盡管設備支持的手勢數量多不勝數，但是日常使用 APP 時，大部分用戶習慣使用的手勢很少，比如單擊、雙擊、滑動、上拉、下拉、雙指擴張和收縮等。除此之外的手勢教育成本和學習成本很高。

一般比較通用的功能是沒有必要在此處創新的，但是如果一些特殊的操作確實需要加入時，我們就需要考慮下面的問題。

a. 如果沒有教育成熟，考慮加入教學或搭配簡易的操作方式

對于我們需要加入的手勢操作當前用戶并未被教育成熟時，我們需要考慮加入手勢教學，具體的手勢教學類型下一部分會詳細討論。

然而，大部分情況下用戶的記憶是短期的，教學內容可能會被快速遺忘，下次用戶使用 APP 時仍然不會使用特殊手勢。此時我們應該將一些比較難以記憶的手勢操作搭配一個簡單的手勢操作。

比如 QQ 閱讀的下拉擬物繩燈切換夜間模式的手勢操作設計，其考慮到了有些用戶在現實生活中并未見過擬物繩燈，并不知道是要進行下拉才能觸發操作。因此，QQ 閱讀貼心地搭配了一個簡單的點擊操作，用戶通過點擊繩燈也可以切換夜間模式，如下圖。

b. 考慮所選手勢是否可能導致沖突和誤操作，如果導致了，考慮如何避免和折中

最常見的手勢沖突情況就是 APP 的手勢與操作系統的全局手勢沖突。

解決方案有兩個，一是避免設計與全局手勢一致的手勢操作，例如 iOS 的在屏幕邊緣右滑返回、全面屏機型的底部上滑退出應用等全局手勢操作；二是仍然設計與全局手勢沖突的操作，但是將全局手勢部分禁用或以其他的方式區分開。

如下圖有書播放頁的案例，由于進度條滑動控件過于靠左，導致使用 iOS 全局右滑返回手勢時有時會產生誤操作，即本來想要右滑返回卻不小心滑動了進度條。

這種情況下我們可以標注一個右滑手勢禁用區域給開發工程師說明情況，將此情況避免掉即可。

誤操作指的是，我們設計的手勢操作與 APP 內的其他操作或系統全局手勢操作接近導致用戶觸發了非預期的操作。比如 iOS 端的知乎被吐槽的一個右滑返回手勢操作，經過研究發現，由于 iOS 端的知乎在瀏覽回答的頁面設計的右滑返回的熱區過大，導致用戶上滑瀏覽的時候如果手指的滑動角度變化幅度過大一不小心就觸發了右滑返回，再次進入回答后又需要翻頁很久才能找到之前離開的地方，很影響體驗。

我覺得知乎可以減少熱區，將熱區調整為 iOS 全局的右滑返回區域即可，如下圖所示。

當然，產品設計需要平衡與取舍，如果減少了熱區是否會影響其他用戶的體驗還需要考慮和調研，兩者并無絕對的對錯

3. 讓用戶了解并使用新手勢

當新手勢無法直接讓用戶感知時，我們需要加入一些手勢教學幫助用戶快速上手使用。

1）手勢教學方式

a. 浮層和動畫引導使用靜態或動態的手勢圖片或氣泡示例告訴用戶使用哪種手勢進行操作

相比于靜態，動態比靜態更為直觀和易學。

b. 內容隱喻通過微妙的視覺線索暗示用戶此處可以通過某種手勢進行操作

由于教學內容難免具有干擾性，對于高級用戶來說是不必要的，但是對于初級用戶又是必要的，因此以這種內容暗示的方式使教學極為輕量化，在低干擾的情況下使得用戶學習了手勢操作。

如下圖，嗶哩嗶哩在打開第一篇文章時會平移顯示下一篇文章的框架，暗示用戶可以通過左右滑動切換文章。

再比如陌陌在打開點點功能時，會在用戶進入頁面的時候播放一個動畫，暗示有很多卡片疊加在了一起，用戶可以通過滑動切換卡片。

2）教學的出現時機

a. 操作前當產品中設計了不容易感知的新手勢，在用戶操作前，通過教學讓用戶了解和學習新的手勢。

b. 錯誤操作后對于一些與用戶的心理模型和習慣不一致的手勢，提前預測用戶可能輸入的錯誤手勢，在用戶錯誤操作后進行提示，規范用戶的操作方式。

如下圖，由于知乎舊版本是通過左右滑動切換回答的，新版本調整為上下滑動后，需要糾正用戶使用習慣。因此，當用戶仍然使用左右滑動時，會出現浮層提示用戶正確的手勢進行教學。

結語

以上是日常思考和總結，有不恰當之處歡迎指出。希望本文在大家進行手勢設計的過程中能夠幫助做出合理的決策。

文章來源：人人都是產品經理 

文章目錄

rewrite在if中的用法

rewrite中break和last的用法

1.break和last在location{}外部時

2.break和last在location{}內部時

3.break和last用法總結

return的用法

rewrite的語法規則

rewrite應用實例

1.域名跳轉（域名重定向）

2.http跳轉https

3.跳轉二級目錄

4.動靜態請求分離

5.防盜鏈配置

6.偽靜態（將靜態頁面重寫為動態）

7.多個if并用

rewrite在if中的用法

格式：if (條件判斷) { 具體的rewrite規則 }



if條件判斷語句由Nginx內置變量、邏輯判斷符號和目標字符串三部分組成。

其中，內置變量是Nginx固定的非自定義的變量，如，$request_method, $request_uri等。

邏輯判斷符號，有=, !=, ~, ~, !~, !~

!表示相反的意思，~為匹配符號，它右側為正則表達式，區分大小寫，而~為不區分大小寫匹配。

目標字符串可以是正則表達式，通常不用加引號，但表達式中有特殊符號時，比如空格、花括號、分號等，需要用單引號引起來。

1

2

3

4

5

示例1：當http請求方法為post時，返回403狀態碼



if ($request_method = POST)

{

    return 403; 

}

1

2

3

4

示例2：通過瀏覽器標識匹配關鍵字，禁止IE瀏覽器訪問



if ($http_user_agent ~ MSIE) 

{

    return 403;

}

1

2

3

4

限制多個瀏覽器：



if ($http_user_agent ~ "MSIE|firefox|Chrome")

{

    return 403;

}

1

2

3

4

示例3：當請求的文件不存在時，進行重定向或return狀態碼等處理操作



if(!-f $request_filename)

{

    rewrite 語句;

}

1

2

3

4

示例4：判斷uri中某個參數的內容



if($request_uri ~ 'gid=\d{6,8}/') 

{

    rewrite 語句;

}

1

2

3

4

\d表示數字，{6,8}表示數字出現的次數是6到8次，當uri中gid參數的值包含6-8個數字那么執行rewrite語句

rewrite中break和last的用法

兩個指令用法相同，但含義不同，需要放到rewrite規則的末尾，用來控制重寫后的鏈接是否繼續被nginx配置執行(主要是rewrite、return指令)。



1.break和last在location{}外部時

測試示例：



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html;

    rewrite /2.html /3.html;

}

1

2

3

4

5

6

7

8

請求1.html文件時，會被重定向到2.html，然后被重定向到3.html，最后返回的文件為3.html

示例1：在rewrite 指令后面添加break



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html break;

    rewrite /2.html /3.html;

}

1

2

3

4

5

6

7

8

請求1.html文件時，會被重定向到2.html，然后直接返回2.html，break在此處的作用就是當匹配第一個rewrite指令成功時，不執行后面的rewrite指令

示例2：當break后面還有location{}的情況



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;



    rewrite /1.html /2.html break;

    rewrite /2.html /3.html;

    location /2.html {

        return 403;

    }

}

1

2

3

4

5

6

7

8

9

10

11

請求1.html文件時，會返回403狀態碼，當1.html被重定向到2.html時，break不會匹配后面的rewrite規則，但條件2.html匹配location{}定義的文件2.html，所以會執行return 403

以上兩個示例中，將break換成last效果一樣

2.break和last在location{}內部時

測試示例：



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

請求1.html，會經過兩次重定向到3.html，3.html又剛好匹配location /3.html{}，所以返回b.html，當請求2.html時，會直接返回a.html，因為location /2.html {} 更精準，優先匹配

示例1：在rewrite后面添加break



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html break;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

請求1.html，會返回2.html，不會返回a.html，當break再location {} 內部時，遇到break后，當前location{} 以及后面的location{} 的指令都不再執行

示例2：在rewrite后面添加last



server{

    listen 80; 

    server_name test.com;

    root /data/wwwroot/test.com;

    

    location / {

        rewrite /1.html /2.html last;

        rewrite /2.html /3.html;

    }

    location /2.html

    {

        rewrite /2.html /a.html;

    }

    location /3.html

    {

        rewrite /3.html /b.html;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

請求1.html時，會返回a.html，在location {} 內部遇到last，當前location {}中剩下的指令不會再執行，但被重定向的url會重新匹配一遍location {}

3.break和last用法總結

1.當rewrite規則在location{}外，break和last作用一樣，遇到break或last后，其后續的rewrite/return語句不再執行。但后續有location{}的話，還會近一步執行location{}里面的語句,前提是請求能匹配該location

2.當rewrite規則在location{}里，遇到break后，本location{}與其他location{}的所有rewrite/return規則都不再執行

3.當rewrite規則在location{}里，遇到last后，本location{}里后續rewrite/return規則不執行，但重寫后的url再次從頭匹配所有location



return的用法

該指令一般用于對請求的客戶端直接返回響應狀態碼。在該作用域內return后面的所有nginx配置都是無效的，可以使用在server、location以及if配置中，除了支持跟狀態碼，還可以跟字符串或者url鏈接。



示例1：直接返回狀態碼



server{

    listen 80;

    server_name www.test.com;

    return 403;

    rewrite www.test.net;  

}

1

2

3

4

5

6

訪問時，直接返回403狀態碼，return返回內容后，后面的配置rewrite不會執行

示例2：當return在if 判斷中時



server {

.....



if ($request_uri ~ ".password|.bak")

{

    return 404;

    rewrite /(.*) /index.html;  

}

.....

}

1

2

3

4

5

6

7

8

9

10

請求的文件包含.password或.bak時，直接返回404，rewrite不會執行，但if {}外的配置會繼續執行，return只在當前作用域中生效

示例3：返回字符串



server{

    listen 80;

    server_name www.test.com;

    return 200 "hello";

}

1

2

3

4

5

返回字符串必須加上狀態碼，否則會報錯

示例4：返回nginx變量



location /1.html {

    return 200 "$host $request_uri";

}

1

2

3

示例5：返回url



server{

    listen 80;

    server_name www.test.com;

    return http://www.test.com/index2.html;

}

1

2

3

4

5

返回url時，必須以http://或https://開頭

示例6：返回html代碼



if ($http_referer ~ 'baidu.com') 

{

    return 200 "<html><script>window.location.href='//$host$request_uri';</script></html>";

}

1

2

3

4

當網站被黑了的時候，從百度點進網站是鏈接都會跳轉到其他網站，可以使用該方法暫時處理

注意：return http://$host$request_uri; 在瀏覽器中會提示"重定向的次數過多"

rewrite的語法規則

格式：rewrite regex replacement [flag]



rewrite 配置可以在server、location以及if配置段內生效



regex 是用于匹配URI的正則表達式，其不會匹配到$host（域名）



replacement 是目標跳轉的URI，可以以http://或者https://開頭，也可以省略掉$host，直接寫$request_uri部分



flag 用來設置rewrite對URI的處理行為，其中有break、last、rediect、permanent，其中break和last在前面已經介紹過，rediect和permanent的區別在于，前者為臨時重定向(302)，而后者是永久重定向(301)，對于用戶通過瀏覽器訪問，這兩者的效果是一致的。

但是，對于搜索引擎爬蟲來說就有區別了，使用301更有利于SEO。所以，建議replacemnet是以http://或者https://開頭的，flag使用permanent。



示例1：域名跳轉



location / {

    rewrite /(.*) http://www.test.com/$1 permanent;

}

1

2

3

.*為正則表達式，表示uri，用()括起來，在后面的uri中可以調用它，第一次出現的()用$1調用，第二次出現的()用$2調用，以此類推。

示例2：域名跳轉的第二種寫法



location / {

    rewrite /. http://www.test.com$request_uri permanent;

}

1

2

3

示例3：文件跳轉



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    if ($request_uri !~ '^/web/')

    {

        rewrite /(.) /web/$1 redirect;

    }

}

1

2

3

4

5

6

7

8

9

10

將uri請求的文件重定向到web/目錄中去尋找

錯誤寫法1：



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    rewrite /(.*) /web/$1 redirect;

}

1

2

3

4

5

6

7

這樣寫會反復循環，直到瀏覽器最大循環限制次數，哪怕uri包含web/目錄了，也會繼續重定向/web/web/$1

錯誤寫法2：



server{

    listen 80;

    server_name www.test.com;

    root /data/wwwroot/test.com;

    index index.html;

    rewrite /(.*) /web/$1 break;

}

1

2

3

4

5

6

7

添加break后不會導致循環，但如果uri中包含web/目錄的情況下也會被重定向一次，重定向后的uri就是web/web/$1

rewrite應用實例

1.域名跳轉（域名重定向）

單個域名的情況：



server{

    listen 80;

    server_name www.test.com;

    rewrite /(.) http://www.test.net/$1 permanent;    

}

1

2

3

4

5

多個域名的情況：



server{

    listen 80;

    server_name www.test.com www.test.net;

    if ($host != 'www.test.net')

    {

        rewrite /(.) http://www.test.net/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

2.http跳轉https

server{

    listen 80;

    server_name www.test.com;

    rewrite /(.) https://www.test.com/$1 permanent;

}

1

2

3

4

5

3.跳轉二級目錄

server{

    listen 80;

    server_name bbs.test.com;

    rewrite /(.) http://www.test.com/bbs/$1 last;

}

1

2

3

4

5

4.動靜態請求分離

server{

    listen 80;

    server_name www.test.com;

    location ~ ..(jpg|jpeg|gif|css|png|js)$

    {

        rewrite /(.*) http://img.test.com/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

假設www.test.com的服務器在國外，訪問速度較慢，img.test.com的服務器在國內，訪問速度正常，可以將訪問www.test.com靜態文件的請求重定向到img.test.com，提高文件返回速度

第二種寫法：



server{

    listen 80;

    server_name www.test.com;

    if ( $uri ~ 'jpg|jpeg|gif|css|png|js$')

    {

        rewrite /(.) http://img.test.com/$1 permanent;

    }

}

1

2

3

4

5

6

7

8

5.防盜鏈配置

server{

    listen 80;

    server_name www.test.com;

    location ~ ^.+.(jpg|jpeg|gif|css|png|js|rar|zip|flv)$

    {

        valid_referers none blocked server_names .test.com

        if ($invalid_referer)

        {

            return 403;

        }

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

配置防盜鏈避免別的網站引用www.test.com不想被引用的圖片等文件

http_referer表示從哪兒點擊進網站的，比如從百度搜索引擎訪問的

valid_referers：白名單

invalid_referer：無效的（未在白名單中定義的）

none：允許referer為空（也就是允許直接訪問，未從其他站點跳轉的請求）

blocked：允許來源地址不含http/https



6.偽靜態（將靜態頁面重寫為動態）

location /  {

    rewrite ^([^.])/topic-(.+).html$ $1/portal.php?mod=topic&topic=$2 last;

    rewrite ^([^.])/forum-(\w+)-([0-9]+).html$ $1/forum.php?mod=forumdisplay&fid=$2&page=$3 last;

    rewrite ^([^.])/thread-([0-9]+)-([0-9]+)-([0-9]+).html$ $1/forum.php?mod=viewthread&tid=$2&extra=page%3D$4&page=$3 last;

    rewrite ^([^.])/group-([0-9]+)-([0-9]+).html$ $1/forum.php?mod=group&fid=$2&page=$3 last;

    rewrite ^([^.])/space-(username|uid)-(.+).html$ $1/home.php?mod=space&$2=$3 last;

    rewrite ^([^.])/(fid|tid)-([0-9]+).html$ $1/index.php?action=$2&value=$3 last;

}

1

2

3

4

5

6

7

8

示例為discuz的偽靜態配置

7.多個if并用

location /{

    set $a 0;

    if ($document_uri !~ '^/abc')

    {

        set $a "${a}1"; #uri不以/abc開頭時，$a的值變為01

    }

    if ($http_user_agent ~ 'ie6|firefox')

    {

       set $a "${a}2"; #瀏覽器標識包含ie6或者Firefox時，$a的值變為012

    }

    if ($a = "012") #當滿足前兩個if判斷時，重寫url

    {

        rewrite /(.) /abc/$1 redirect;

    }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

nginx配置文件語法不支持if嵌套，需要通過多個if并用判斷時，使用標識變量值的方式處理

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

（按發言順序）

文章來源：UI中國

使用docbox定制API文檔

什么是docbox

docbox的安裝

克隆項目

部署方式

docbox的編寫

定制logo及UI

更換代碼背景色

插入自己的logo

三列改為雙列

其他定制UI



在公司實習了一個月，由于業務需要，我花了大概一周時間對docbox的安裝，編寫，定制化等進行了詳細的研究，下面給大家分享一下我的總結

什么是docbox

Docbox是一個開源的REST API文檔系統。它采用結構化的Markdown文件，并生成帶有導航，固定鏈接的兩列布局。下面是官方example圖片：









docbox的安裝

克隆項目

直接去官網https://github.com/tmcw/docbox，然后克隆即可。



部署方式

在使用npm命令前需要下載Node.js，npm會根據package.json配置文件中的依賴配置下載安裝



接著，在/content下放入.md文件，并使用 npm run build 命令，生成一個包含所需要的js代碼的bundle.js文件，同時創建一個新的index.html文件



重要的就是index.html、bundle.js、/css這三個文件和文件夾



docbox的編寫

在/content下放入.md文件（markdown語法俺就不說了哈……）

對/src/custom/content.js中添加需要引入的.md文件位置和以及標題





注意： /src/custom/content.js中放入的是一級標題、二級和三級標題需要在.md文件中編寫。





定制logo及UI

修改/src/custom/index.js文件

修改對應標簽的屬性即可，定制時修改生成的index.html是沒有用的，因為index.html里的標簽是被動態寫死的。

更換代碼背景色

<div class='round-left pad0y pad1x fill-green code small endpoint-method'>

1





<div class='endpoint dark fill-blue round '>

1





插入自己的logo





修改/src/components/app.js文件



三列改為雙列

docbox默認情況下是顯示三列布局，但我們可以在app.js下進行修改使之默認為雙列布局。將下圖的1改為2即可切換雙列模式







其他定制UI

像下圖一樣，我們可以修改并填寫代碼得到自己想要的頁面樣式，比如說我在最上方加了一個固定位置的區域，然后可以在這個區域添加相應的超鏈接等。







app.js里可以找到圖中對應的標簽和js代碼，docbox支持多種語言切換，我們在需要的地方加入我們想要加入的標簽，并在/css文件夾中對相應的css文件添加樣式就可以定制我們想要的UI啦?。?！



下面給大家列出一些用docbox定制API文檔的網站



Mapbox API文檔

Mapillary的API文檔和Tiles文檔

HYCON 8th

Wall

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。