很多朋友搭建了原版或者魔改版的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源码


[html] view plain copy

  1. {include file='header.tpl'}  

  2. <div class="section no-pad-bot" id="index-banner">  

  3.     <div class="container">  

  4.         <br><br>  

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

  6.         <div class="row center">  

  7.             <h5 class="header col s12 light">轻松科学上网   保护个人隐私h5>  

  8.             {$homeIndexMsg}  

  9.         div>  

  10.         {if $user->isLogin}  

  11.             <div class="row center">  

  12.                 <a href="/user" id="download-button" class="btn-large waves-effect waves-light orange">进入用户中心a>  

  13.             div>  

  14.         {else}  

  15.         <div class="row center">  

  16.             <a href="/auth/register" id="download-button" class="btn-large waves-effect waves-light orange">立即注册a>  

  17.         div>  

  18.         {/if}  

  19.         <br><br>  

  20.     div>  

  21. div>  

  22.   

  23.   

  24. <div class="container">  

  25.     <div class="section">  

  26.   

  27.           

  28.         <div class="row">  

  29.             <div class="col s12 m4">  

  30.                 <div class="icon-block">  

  31.                       

  32.     <link href="//fonts.lug.ustc.edu.cn/icon?family=Material+Icons" rel="stylesheet">  

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

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

  35. head>  

  36. <body>  

  37. <nav class="light-blue lighten-1" role="navigation">  

  38.     <div class="nav-wrapper container"><a id="logo-container" href="/" class="brand-logo">{$config["appName"]}a>  

  39.         <ul class="right hide-on-med-and-down">  

  40.             <li><a href="/">首页a>li>  

  41.             <li><a href="https://shadowsocks.org/en/download/clients.html">客户端下载a>li>  

  42.             <li><a href="/code">邀请码a>li>  

  43.             {if $user->isLogin}  

  44.                 <li><a href="/user">用户中心a>li>  

  45.                 <li><a href="/user/logout">退出a>li>  

  46.             {else}  

  47.                 <li><a href="/auth/login">登录a>li>  

  48.                 <li><a href="/auth/register">注册a>li>  

  49.             {/if}  

  50.   

  51.         ul>  

  52.   

  53.         <ul id="nav-mobile" class="side-nav">  

  54.             <li><a href="/">首页a>li>  

  55.             <li><a href="https://shadowsocks.org/en/download/clients.html">客户端下载a>li>  

  56.             <li><a href="/code">邀请码a>li>  

  57.             {if $user->isLogin}  

  58.                 <li><a href="/user">用户中心a>li>  

  59.                 <li><a href="/user/logout">退出a>li>  

  60.             {else}  

  61.                 <li><a href="/auth/login">登录a>li>  

  62.                 <li><a href="/auth/register">注册a>li>  

  63.             {/if}  

  64.         ul>  

  65.         <!-- To be compatible with some old browsers(especially mobile browsers), use  instead of menu. For more information visit the link below.  

  66.          http://google.github.io/material-design-icons/#using-the-icons-in-html  

  67.          -->  

  68.         <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">i>a>  

  69.     div>  

  70. nav>  


在header.tpl中我们可以找到这段代码

[html] view plain copy

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

  2.     <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,第五行


{$config["appName"]}


{$config["appName"]},这里是php的语法,作用是获取config对象的appname元素的值,将它显示在html中,config对象是由控制器传递过来,暂时我们只需要明白它的意义即可。

本期暂时讲到这里,下一期开始对控制器contoller以及页面定向控制进行分析,欢迎有兴趣的小伙伴可以加入我的技术群参与讨论,群号:106669385