The simplest template libary for Codeigniter ever. The code is easy to understand and modify it for your needs.
Download Layout.php
to your application/libraries/
folder.
$this->load->library('Layout');
Put CI_head() inside <head> and </head> tag in view.
Put CI_footer() before </body> tag in view.
Put CI_title() inside <title> and </title> tag in view.
Put CI_body_attr() into <body> to control attrbutes such as "id", "class" and more.
<!DOCTYPE html>
<html lang="en">
<head>
<title><?= CI_title() ?></title>
<?= CI_head() ?>
</head>
<body<?= CI_body_attr() ?>>
<?= CI_footer() ?>
</body>
</html>
All HTML output are handled by CI_head() , CI_footer(), CI_body_attr() and CI_title()
Use the following APIs in controller.
Parameters
/*
* add_meta (string $name, string $value, string $type = 'meta')
* @param string $name
* @param string $value
* @param string $type - 'meta' or 'link'. Default: 'meta'
*/
Example
$this->layout->add_meta('author', 'Terry Lin');
Output
<meta name="author" content="Terry Lin" />
Parameters
/*
* add_custom_meta(string $type, array $attributes)
* @param string $type
* @param string array $attributes
*/
Example
$this->layout->add_custom_meta('link', array(
'href' => 'test.php',
'rel' => 'parent',
'rev' => 'subsection',
'hreflang' => 'en'
));
Output
<link href="test.php" rel="parent" rev="subsection" hreflang="en">
Build special meta tags:
$this->layout->add_custom_meta('meta', array(
'charset' => 'utf-8'
));
$this->layout->add_custom_meta('meta', array(
'http-equiv' => 'X-UA-Compatible',
'content' => 'IE=edge'
));
Output
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Parameters
/*
* add_css_file ( string $tag_css, string $path = '' )
* @param string $tag_css
* @param string $path - $path can be ignored if you set $tag_css as a remote file with full URL, or a local file with absolute path.
*/
Example
$this->layout->add_css_file('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
Output
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Parameters
/*
* add_css_files ( array $tag_css, string $path = '')
* @param array $tag_css
* @param string $path - $path can be ignored if you set $tag_css as remote files with full URL, or local files with absolute path.
*/
Example
$this->layout->add_css_files(array('bootstrap.min.css','style.css'), base_url('assets/css/'));
Output
<link href="http://dictpedia.org/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://dictpedia.org/assets/css/style.css" rel="stylesheet" />
Parameter
/*
* add_css_rawtext ( string $content )
* @param string $content
*/
Example
$css_text = <<<EOF
.text {
font-size: 12px;
background-color: #eeeeee;
}
EOF;
$this->layout->add_css_rawtext($css_text);
Output
<style>
.text {
font-size: 12px;
background-color: #eeeeee;
}
</style>
Parameters
/*
* add_js_file ( string $tag_js , string $path = '', string $position = 'header', $attr = '' )
* @param string $tag_js
* @param string $path - $path can be ignored if you set $tag_js as a remote file with full URL, or a local file with absolute path.
* @param string $position - 'header' or 'footer'
* @param string $attr - default: null [ async, defer ]
*/
Example
$this->layout->add_js_file('https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js');
Output
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Parameters
/*
* add_js_files ( array $tag_js , string $path = '', string $position = 'header', $attr = '' )
* @param array $tag_js
* @param string $path - $path can be ignored if you set $tag_js as remote files with full URL, or local files with absolute path.
* @param string $position - 'header' or 'footer'. Default: 'header'.
* @param string $attr - default: null [ async, defer ]
*/
Example
$this->layout->add_js_files(array('bootstrap.min.js','script'), base_url('assets/js/'), '', 'async');
Output
<script src="http://dictpedia.org/assets/js/bootstrap.min.js" async></script>
<script src="http://dictpedia.org/assets/js/script.js" async></script>
- Without async or defer, browser will run your script immediately, before rendering the elements that's below your script tag.
- With async (asynchronous), browser will continue to load the HTML page and render it while the browser load and execute the script at the same time.
- With defer, browser will run your script when the page finished parsing. (not necessary finishing downloading all image files. This is good.)
Parameters
/*
* add_js_rawtext ( string $content , string $position = 'header')
* @param string $content
* @param string $position - 'header' or 'footer'. Default: 'header'.
*/
Example
$js_text = <<<EOF
alert('this is just a test');
EOF;
$this->layout->add_js_rawtext($js_text, 'header');
Output
<script>
alert('this is just a test');
</script>
Parameter
/*
* set_title ( string $title )
* @param string $title
*/
Example
$this->layout->set_title('Test! This is a test title');
Output
<title>Test! This is a test title</title>
Parameter
/*
* set_body_attr ( array $attribute )
* @param array $attribute
*/
Example
$this->layout->set_body_attr(array('id' => 'home', 'class' => 'global white-bg'));
Output
<body id="home" class="global white-bg">
alias => CI_title()
$this->layout->get_title();
alias => CI_body_attr()
$this->layout->get_body_attr();
alias => CI_head()
$this->layout->get_header();
alias => CI_footer()
$this->layout->get_footer();
It is suggested to use set_meta() to set built-in meta tags, make sure every varibles are saved in same instant. (fixed for CI 3.1).
author, viewport, keywords, description, canonical, robots
// examples
$this->layout->set_meta('author', 'Terry Lin');
$this->layout->set_meta('description', 'This is just a test file');
$this->layout->set_meta('robots', 'noindex, nofollow');
url, site, creator, card, title, description, image_src
// examples
$this->layout->set_meta('card', 'summary_large_image', 'twitter');
$this->layout->set_meta('image_src', 'http://test.test/test.gif', 'twitter');
site_name, url, title, type, description, image, admins, app_id
// examples
$this->layout->set_meta('site_name', 'Demo Site', 'facebook');
$this->layout->set_meta('description', 'This is just a test file', 'facebook');
$this->layout->set_meta('app_id', '1123123152', 'facebook');