<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                # 首頁控件化 想像一下,我們是不是可以把一個網頁分成多個塊,而可以單獨管理每個塊,比如可以設置某個塊是否顯示, 每個塊也可以有自己名稱,屬性等。 [TOC] ## 1.把首頁分塊 我們先把首頁分成兩塊`分塊一`和`分塊二` ## 2.更改首頁配置文件 我們把`public/themes/quick_start/portal/index.json` 文件內容更改如下: ``` { "name": "首頁", "action": "portal/Index/index", "description": "首頁模板文件", "order": 5.0, "more": { "vars": { "name": { "title": "姓名", "value": "", "type": "text", "placeholder": "請填寫用戶姓名", "tip": "設置后您的姓名將會顯示在首頁", "rule": { "require": true } } }, "widgets": { "block1": { "title": "分塊一", "display": "1", "vars": { "background": { "title": "背景色", "value": "red", "type": "select", "options": { "red": "紅色", "green": "綠色", "blue": "藍色" }, "tip": "背景色", "rule": { "require": true }, "message": { "require": "不能為空" } } } }, "block2": { "title": "分塊二", "display": "1", "vars": { "background": { "title": "背景色", "value": "blue", "type": "select", "options": { "red": "紅色", "green": "綠色", "blue": "藍色" }, "tip": "背景色", "rule": { "require": true }, "message": { "require": "不能為空" } }, "border_width": { "title": "邊框寬度", "value": "1", "type": "text", "placeholder": "請填寫邊框寬度,整數", "tip": "邊框寬度,整數", "rule": { "require": true } }, "border_color": { "title": "邊框顏色", "value": "red", "type": "select", "options": { "red": "紅色", "green": "綠色", "blue": "黃色" }, "tip": "邊框顏色", "rule": { "require": true }, "message": { "require": "不能為空" } } } } } } } ``` 在這一步我們給首頁添加了兩個控件,分別是`block1`和`block2`,并為它們設置了不同的屬性 ## 3.更改首頁模板文件 我們把`public/themes/quick_start/portal/index.html` 文件內容更改如下: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{$theme_vars.name|default='ThinkCMF'}的網站</title> </head> <body> Hello {$theme_vars.name|default='ThinkCMF'}! <widget name="block1"> <div style="background:{$widget.vars.background|default='red'};height: 100px;line-height: 100px;margin-bottom: 10px;color:#fff;"> {$widget.title|default='分塊一'} </div> </widget> <widget name="block2"> <div style="background:{$widget.vars.background|default='blue'};border:{$widget.vars.border_width|default=1}px solid {$widget.vars.border_color|default='red'};height: 100px;line-height: 100px;color:#fff;"> {$widget.title|default='分塊二'} </div> </widget> </body> </html> ``` ## 4.更新模板 打開后臺,設置->模板管理->所有模板,找到`quick_start`模板,點`更新`按鈕,此時模板更新成功。 打開前臺首頁,看到如下圖: ![](https://box.kancloud.cn/d2a8781e59fb83d7a0748c1039d85dd8_1000x210.png) ## 5.設計模板 點`quick_start`模板的`設計`按鈕,打開模板文件列表對話框 ![](https://box.kancloud.cn/5b9b9526ed3900ab4b8626760237126b_1000x261.png) 點首頁文件的`設計`按鈕,打開模板文件設計對話框,并選擇`組件設置`選項卡 ![](https://box.kancloud.cn/5136985d543b20c1257140bfded9ede1_1000x491.png) 隨意更改組件的設置 ## 6.查看更改后的首頁 刷新前臺首頁,此時顯示的內容: ![](https://box.kancloud.cn/f2dd1da500286b145fa96bbee1a9edaa_1000x223.png) 同時你也可以隱藏控件,更改組件名稱,這兩個問題,大家可以自己思考一下。 > 請在`附件`下載本節源碼。
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看