sspanel进阶——修改属于自己的sspanel站点（一）

来源：互联网发布：中国信息数据安全领域编辑：程序博客网时间：2024/06/05 21:31

很多朋友搭建了原版或者魔改版的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（伸手党自行退散）

0 0