Cake PHP 主题集成

Question

I have following html/css theme and trying to convert it to cake php theme.

I was reading through tutorials but I just don't understand it. Either css file is not working or the content is not displaying.

<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>Shedule Me</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- Theme CSS -->
<link href="css/styles.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="framework/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">

<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-custom">
    <div class="container header">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span><i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand logo-text" href="#page-top">New Theme</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#">Home</a>
                </li>
                <li class="page-scroll">
                    <a href="#">About</a>
                </li>
                <li class="page-scroll">
                    <a href="#">Services</a>
                </li>
                <li class="page-scroll">
                    <a href="#">Contact Us</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

<!-- Header -->
<section>
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                <img src="img/benner.png" alt="Banner" class="img-responsive" />
            </div>
            <div class="col-md-5">
                <div class="card">
                    <h3 class="title-log">Already a Member?</h3>
                    <label>
                        Email
                        <input style="display:block;margin:0 auto;" type="text"/>
                    </label>
                    <label>
                        Password
                        <input style="display:block;margin:0 auto;" type="password"/>
                    </label>
                    <input type="button" value="Log in" class="elevator"/>
                    <h3>Not a Member?</h3>
                    <a href="#">Sign up</a>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- jQuery -->
<script src="framework/jquery/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="framework/bootstrap/js/bootstrap.min.js"></script>

Answer 1

webroot/
  custom/ <-- custom css/js plugin folder, for example datepicker plugin
    css/
    js/
  css/
  img/
  js/

CSS

// load css from css folder,  example.com/css/bootstrap.min.css
<?= $this->Html->css('bootstrap.min') ?>

// load css from custom folder, example.com/custom/bootstrap.min.css
<?= $this->Html->css('/custom/bootstrap.min') ?>

// load remote / cdn css file, note without http or https
<?= $this->Html->css('//fonts.googleapis.com/css?family=Montserrat:400,700') ?>

JS / jQuery

// load js file from js folder,  example.com/js/bootstrap.min.js
<?= $this->Html->js('bootstrap.min') ?>

// load js file from custom folder, example.com/custom/bootstrap.min.js
<?= $this->Html->js('/custom/bootstrap.min') ?>

// load remote / cdn js file, note without http or https
<?= $this->Html->js('//code.jquery.com/jquery-2.2.4.min.js') ?>

read more http://book.cakephp.org/3.0/en/views/helpers/html.html