2

始める前に、私は最近 CodeIgniter の学習を始めたと言わなければならないので、この話題をもう一度繰り返して申し訳ありません。

手続き型phpでは、私はこのようなことをします

// the header.php
<!DOCTYPE html>
<html>
<head>
      <meta name="description" content="blah blah">
      <title>My Site</title>
      <link href="css/main.css" rel="stylesheet" media="screen">
<php? if($current_page == 'about.php'): ?>
      <link href="css/secondary.css" rel="stylesheet" media="screen"> // or some embed styles (<stlye> ... </style>)
   <?php endif; ?> 


      <script src="http://code.jquery.com/jquery.js"></script>
      <script src="js/main_script.js"></script>

      <php? if($current_page == 'contact.php'): ?>
      <script src="js/validation.js"></script>
      <?php endif; ?>
</head>
<body>
     // end of header.php

     include('template/header.php');

     <h1>Heading1</h1>    
     <p>Lorem Ipsum...</p>

     include('template/footer.php');

    //footer.php
    //maybe some js and here
</body>
</html>

だから私は似たようなことをCIでやりたいと思っています。すべてのページ/ビューには同じメイン スタイルまたはスクリプトがありますが、場合によっては、特定のページ (contact.php など) に特定のスタイルまたはスクリプト (validation.js など) が含まれている場合があります。

CI を使用してテンプレート/レイアウト ライブラリを作成する方法を示すこのビデオを見つけましたが、この機能を適切に適用する方法がよくわかりません。

4

6 に答える 6

1

私は以下のようなレイアウトをしています。

data['content'] 変数にコンテンツを取得します。

これは私のコントローラーです。

    class Article extends MY_Controller {

        function __construct() {
            parent::__construct();
            $this->load->model('article_model');
        }

        public function index() {

            $data['allArticles']    =   $this->article_model->getAll(); 

            $data['content']        =   $this->load->view('article', $data, true);
            $this->load->view('layout', $data);

        }

これが私のレイアウトです。ブートストラップ レイアウトを使用しています。

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <meta name="description" content="">
            <meta name="author" content="">
            <title>Starter Template for Bootstrap</title>
            <base href="<?php echo base_url(); ?>" />

            <!-- Bootstrap core CSS -->
            <link href="assets/bootstrap3.0.1/css/bootstrap.min.css" rel="stylesheet">

            <!-- Custom styles for this template -->
            <!--    <link href="starter-template.css" rel="stylesheet">-->

            <!-- Just for debugging purposes. Don't actually copy this line! -->
            <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

            <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
            <!--[if lt IE 9]>
              <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
              <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
            <![endif]-->
        </head>

        <body>

            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"> Article Management System</a>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="">Home</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Admin <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="article/add">Add Article</a></li>
                                    <li><a href="article">All Article</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>

            <div class="container" style="margin-top: 80px;">

                <?php echo $content; ?>

            </div><!-- /.container -->


            <!-- Bootstrap core JavaScript
            ================================================== -->
            <!-- Placed at the end of the document so the pages load faster -->
            <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
            <script src="assets/bootstrap3.0.1/js/bootstrap.min.js"></script>
        </body>
    </html>

これは私のコンテンツビューです

    <div class="row">

        <div class="col-xs-12 col-sm-12 col-md-12">

            <div class="page-header">
                <h4>All Articles </h4>
            </div>

        </div>

        <div class="col-xs-12 col-sm-12 col-md-12">

            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>Description</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($allArticles as $row) { ?>
                    <tr>
                        <td><?php echo $row->title; ?></td>
                        <td><?php echo substr($row->description,0,100); ?> ....</td>
                        <td></td>
                    </tr>
                    <?php } ?>
                </tbody>
            </table>

        </div>
    </div>
于 2014-08-06T05:06:26.993 に答える
0

私は少し前に同様の問題に苦労しました。それに対する私の解決策は次のとおりです。コントローラーコンストラクターで、cssファイルの1つとjsファイルの1つを2つの配列で作成し、すべてのビューに共通のファイルを配置します。そして、コントローラーの各関数に、ロジック固有のファイルを追加します。あなたの例では、次のようなものがあります：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Home extends CI_Controller
{
    public function __construct()
    {
        parent::__construct();
        $this->page_data = array();
        $this->page_data['css']=array('main.css','bootstrap.css');
        $this->page_data['js']=array('main.js','bootstrap.js');
    }
    public function about()
    {
       array_push($this->page_data['css'],'secondary.css');
       $this->load->view('main_layout',$this->page_data)
    }
    public function contact()
    {}


 }

ビュー ファイルでは、$css および $js 配列を繰り返し処理し、それらを 1 つずつ含めます。これを簡単に拡張して、ヘッダーとフッターのテンプレートを page_data 配列にプッシュすることで含めることができます。

結局、バックボーンを使用してクライアント側ですべてのテンプレートを作成し、REST API としてのみ Code Igniter を使用することに切り替えましたが、この手法により、必要なものの比較的きれいなコードが得られました。

于 2013-05-09T11:02:27.760 に答える
0

私はこれを古いバージョンの CodeIgniter で使用しており、バージョン 3 でも機能します。

<?php  
if (!defined('BASEPATH')) exit('No direct script access allowed');

class Layout
{

    var $obj;
    var $layout;

    function Layout($layout = "layout_main")
    {
        $this->obj =& get_instance();
        $this->layout = $layout;
    }

    function setLayout($layout)
    {
      $this->layout = $layout;
    }

    function view($view, $data=null, $return=false)
    {
        $loadedData = array();
        $loadedData['content_for_layout'] = $this->obj->load->view($view,$data,true);

        if($return)
        {
            $output = $this->obj->load->view($this->layout, $loadedData, true);
            return $output;
        }
        else
        {
            $this->obj->load->view($this->layout, $loadedData, false);
        }
    }
}
?>

そして、私が使用するコントローラーでこれを呼び出すには：

$this->layout->view('apps/apps', $data);
于 2016-02-29T09:50:38.863 に答える