sspanel進階——修改屬於自己的sspanel站點（一）

很多朋友搭建了原版或者魔改版的sspanel，界面以及功能各有千秋，那麼，如何搭建自己的魔改sspanel呢？授人以魚不如授人以漁，這個博文系列將會介紹如何修改出屬於自己的sspanel站點。

今天所述實例基於orvice 的sspanel原版，另外向大家推薦使用glzjin大大的魔改版，git鏈接：https://github.com/glzjin/ss-panel-v3-mod

sspanelV3目前是基於mvc結構，我所講述的也是基於V3的修改。mvc大家應該都很瞭解，分爲model（模型）、view（界面）、controller（控制器）三個模塊，model是數據模型，和數據庫關聯，view是界面，展示我們所看到的直觀界面，controller是控制器，完成邏輯判斷，並且可以傳遞動態數據到view中實現界面數據的變更。這裏就不再對mvc做過多陳述，不清楚的可以查閱相關資料。

首先，我們來看一下sspanel的目錄結構

其中有幾個文件夾分別需要我們注意的，第一個是public，我們知道在配置過程中，項目的根目錄指向的就是這個文件夾，其次分別是app（controller、model源碼目錄），resource（資源文件目錄）

本期只講述最基本的view修改方法，控制代碼以及數據庫等將在以後幾期具體討論

sspanel的view資源文件存放在resource/view目錄中，

文件夾以及文件命名很規範，很容易就可以找到對應的頁面，打開主頁源碼index.tpl，這是基於html的網頁源碼，在開頭及結尾處引用了兩個文件，header.tpl、footer.tpl，把其中源碼加入連貫起來就是一個完整的html網頁，當然其中還包含了部分php源碼

{include file='header.tpl'}
<div class="section no-pad-bot" id="index-banner">
    <div class="container">
        <br><br>
        <h1 class="header center orange-text">{$config["appName"]}</h1>
        <div class="row center">
            <h5 class="header col s12 light">輕鬆科學上網   保護個人隱私</h5>
            {$homeIndexMsg}
        </div>
        {if $user->isLogin}
            <div class="row center">
                <a href="/user" id="download-button" class="btn-large waves-effect waves-light orange">進入用戶中心</a>
            </div>
        {else}
        <div class="row center">
            <a href="/auth/register" id="download-button" class="btn-large waves-effect waves-light orange">立即註冊</a>
        </div>
        {/if}
        <br><br>
    </div>
</div>


<div class="container">
    <div class="section">

        <!--   Icon Section   -->
        <div class="row">
            <div class="col s12 m4">
                <div class="icon-block">
                    <!-- To be compatible with some old browsers(especially mobile browsers), use  instead of flash_on. For more information visit the link below.
                    http://google.github.io/material-design-icons/#using-the-icons-in-html
                    -->
                    <h2 class="center light-blue-text"><i class="material-icons"></i></h2>
                    <h5 class="center">Super Fast</h5>

                    <p class="light">
                        Bleeding edge techniques using Asynchronous I/O and Event-driven programming.
                    </p>
                </div>
            </div>

            <div class="col s12 m4">
                <div class="icon-block">
                    <!-- To be compatible with some old browsers(especially mobile browsers), use  instead of group. For more information visit the link below.
                    http://google.github.io/material-design-icons/#using-the-icons-in-html
                    -->
                    <h2 class="center light-blue-text"><i class="material-icons"></i></h2>
                    <h5 class="center">Open Source</h5>

                    <p class="light">
                        Totally free and open source. A worldwide community devoted to deliver bug-free code and long-term support.
                    </p>
                </div>
            </div>

            <div class="col s12 m4">
                <div class="icon-block">
                    <!-- To be compatible with some old browsers(especially mobile browsers), use  instead of settings. For more information visit the link below.
                    http://google.github.io/material-design-icons/#using-the-icons-in-html
                    -->
                    <h2 class="center light-blue-text"><i class="material-icons"></i></h2>
                    <h5 class="center">Easy to work with</h5>

                    <p class="light">
                        Avaliable on multiple platforms, including PC, MAC, Mobile (Android and iOS) and Routers (OpenWRT).
                    </p>
                </div>
            </div>
        </div>

    </div>
    <br><br>

    <div class="section">

    </div>
</div>
{include file='footer.tpl'}

header

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
    <title>{$config["appName"]}</title>
    <!-- CSS fonts.googleapis.com -->
    <link href="//fonts.lug.ustc.edu.cn/icon?family=Material+Icons" rel="stylesheet">
    <link href="/assets/materialize/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    <link href="/assets/materialize/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo">{$config["appName"]}</a>
        <ul class="right hide-on-med-and-down">
            <li><a href="/">首頁</a></li>
            <li><a href="https://shadowsocks.org/en/download/clients.html">客戶端下載</a></li>
            <li><a href="/code">邀請碼</a></li>
            {if $user->isLogin}
                <li><a href="/user">用戶中心</a></li>
                <li><a href="/user/logout">退出</a></li>
            {else}
                <li><a href="/auth/login">登錄</a></li>
                <li><a href="/auth/register">註冊</a></li>
            {/if}

        </ul>

        <ul id="nav-mobile" class="side-nav">
            <li><a href="/">首頁</a></li>
            <li><a href="https://shadowsocks.org/en/download/clients.html">客戶端下載</a></li>
            <li><a href="/code">邀請碼</a></li>
            {if $user->isLogin}
                <li><a href="/user">用戶中心</a></li>
                <li><a href="/user/logout">退出</a></li>
            {else}
                <li><a href="/auth/login">登錄</a></li>
                <li><a href="/auth/register">註冊</a></li>
            {/if}
        </ul>
        <!-- To be compatible with some old browsers(especially mobile browsers), use  instead of menu. For more information visit the link below.
         http://google.github.io/material-design-icons/#using-the-icons-in-html
         -->
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons"></i></a>
    </div>
</nav>

在header.tpl中我們可以找到這段代碼

<link href="/assets/materialize/css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection"/>
    <link href="/assets/materialize/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>

這裏引用了兩個css樣式文件，需要注意的是，項目的根目錄是是public，這裏引用的相對路徑全是基於public目錄，我們可以在public下找到對應的目錄以及文件，如果需要增加或者修改css樣式那麼就可以定位到改目錄進行增改，如果需要增加css樣式文件，也別忘記在header.tpl中加入新的link引用。在footer文件中，包含了js引用，修改方法同header文件。

這樣一來，修改view對於有html基礎的人來說很簡單，只需要按照html規則修改，就可以修改出自己滿意的界面。界面的事還是交給UI美工妹子吧（霧）

回到index. tpl，第五行

<h1 class="header center orange-text">{$config["appName"]}</h1>

{$config["appName"]}，這裏是php的語法，作用是獲取config對象的appname元素的值，將它顯示在html中，config對象是由控制器傳遞過來，暫時我們只需要明白它的意義即可。

本期暫時講到這裏，下一期開始對控制器contoller以及頁面定向控制進行分析，歡迎有興趣的小夥伴可以加入我的技術羣參與討論，羣號：256950656（伸手黨自行退散）

sspanel進階——修改屬於自己的sspanel站點（一）

maven父子項目bean加載失敗錯誤

圍棋算法實現 java

sspanel進階——修改屬於自己的sspanel站點（二）

簡介：如何利用IndexOf和SubString兩種方法處理字符串

sspanel進階——修改屬於自己的sspanel站點（一）

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結