initial commit
This commit is contained in:
commit
cb322cadc4
|
|
@ -0,0 +1,43 @@
|
|||
October CMS Webpack Theme Boilerplate
|
||||
==========
|
||||
|
||||
This is an example theme for October CMS that includes:
|
||||
|
||||
- Webpack (using Laravel Mix)
|
||||
|
||||
To use it:
|
||||
|
||||
- [Install October CMS](https://octobercms.com/docs/setup/installation)
|
||||
- Create a new folder in October /themes folder (call it for example my-awesome-theme)
|
||||
- Clone the repo in your theme folder
|
||||
- Activate the theme from October backend settings
|
||||
|
||||
To modify it:
|
||||
|
||||
- Open a terminal, go to your theme folder and run `npm install` (node_modules folder will be created)
|
||||
- Install more packages using `npm install --save`
|
||||
- Require your installed packages in src/js/app.js
|
||||
- Modify the js and scss files
|
||||
- Run `npm run dev` (`npm run watch` to recompile when something changes)
|
||||
- [Add new pages, partials, content files...](https://octobercms.com/docs/cms/themes)
|
||||
|
||||
When you are ready for production:
|
||||
|
||||
- Run `npm run prod`
|
||||
|
||||
|
||||
## To add ajax framework
|
||||
|
||||
```sh
|
||||
npm install jquery
|
||||
```
|
||||
|
||||
Add framework tag to `layouts/default.htm`:
|
||||
|
||||
```
|
||||
<script src="{{ this.layout.scripts }}"></script>
|
||||
|
||||
{% framework extras %}
|
||||
|
||||
{% scripts %}
|
||||
```
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="170px" height="170px" viewBox="0 0 170 170" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>webpack-icon</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="webpack-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(43.000000, 37.000000)">
|
||||
<polygon id="Path" fill="#FFFFFF" points="42.5 0.016 85 24 85 71.984 42.5 95.968 0 71.984 0 24"></polygon>
|
||||
<path d="M77.4141509,70.32 L43.9113208,89.248 L43.9113208,74.528 L64.7924528,63.056 L77.4141509,70.32 Z M79.7075472,68.256 L79.7075472,28.704 L67.454717,35.76 L67.454717,61.2 L79.7075472,68.256 Z M7.45754717,70.32 L40.9603774,89.232 L40.9603774,74.512 L20.0792453,63.056 L7.45754717,70.32 Z M5.16415094,68.256 L5.16415094,28.704 L17.4169811,35.76 L17.4169811,61.2 L5.16415094,68.256 Z M6.59150943,26.144 L40.9603774,6.752 L40.9603774,20.992 L18.940566,33.072 L18.7641509,33.168 L6.59150943,26.144 Z M78.2641509,26.144 L43.9113208,6.752 L43.9113208,20.992 L65.9150943,33.088 L66.0915094,33.184 L78.2641509,26.144 Z" id="Shape" fill="#8ED6FB" fill-rule="nonzero"></path>
|
||||
<path d="M40.9603774,71.168 L20.3679245,59.856 L20.3679245,37.472 L40.9603774,49.328 L40.9603774,71.168 Z M43.9113208,71.168 L64.5037736,59.872 L64.5037736,37.472 L43.9113208,49.328 L43.9113208,71.168 Z M21.7471698,34.88 L42.4358491,23.536 L63.1084906,34.88 L42.4358491,46.784 L21.7471698,34.88 Z" id="Shape" fill="#1C78C0" fill-rule="nonzero"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,53 @@
|
|||
==
|
||||
<?php
|
||||
function onInit()
|
||||
{
|
||||
$themePath = 'themes/' . $this->theme->getDirName();
|
||||
$this->layout['styles'] = url(mix('assets/css/style.css', $themePath));
|
||||
$this->layout['scripts'] = url(mix('assets/js/scripts.js', $themePath));
|
||||
}
|
||||
?>
|
||||
==
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="author" content="Ray Elliott">
|
||||
|
||||
<title>{{ this.page.title }}</title>
|
||||
|
||||
<meta name="title" content="{{ this.page.meta_title }}">
|
||||
<meta name="description" content="{{ this.page.meta_description }}">
|
||||
|
||||
<meta property="og:title" content="{{ this.page.meta_title }}" />
|
||||
<meta property="og:description" content="{{ this.page.meta_description }}" />
|
||||
|
||||
<meta property="og:url" content="{{ url_current() }}" />
|
||||
<meta property="og:image" content="" />
|
||||
|
||||
<link rel="shortcut icon" href="{{ 'assets/images/favicon.png'|theme }}" type="image/png">
|
||||
<link rel="icon" href="{{ 'assets/images/favicon.png'|theme }}" type="image/png">
|
||||
|
||||
<link href="{{ this.layout.styles }}" rel="stylesheet">
|
||||
|
||||
{% styles %}
|
||||
|
||||
</head>
|
||||
<body class="{{ this.page.bodyClass }}">
|
||||
<div id="js--webapp">
|
||||
|
||||
{% partial 'nav' %}
|
||||
|
||||
{% page %}
|
||||
|
||||
{% partial 'footer' %}
|
||||
|
||||
</div>
|
||||
|
||||
<script src="{{ this.layout.scripts }}"></script>
|
||||
|
||||
{% scripts %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"watch": "npm run development -- --watch",
|
||||
"watch-poll": "npm run watch -- --watch-poll",
|
||||
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
|
||||
"prod": "npm run production",
|
||||
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cross-env": "^5.2.0",
|
||||
"laravel-mix": "^4.0.13",
|
||||
"postcss": "^7.0.35",
|
||||
"sass": "^1.15.2",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-template-compiler": "^2.5.22"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
title = "Home"
|
||||
url = "/"
|
||||
layout = "default"
|
||||
is_hidden = 0
|
||||
|
||||
[viewBag]
|
||||
|
||||
==
|
||||
<?php
|
||||
function onStart()
|
||||
{
|
||||
$this->page['bodyClass'] = 'home';
|
||||
}
|
||||
?>
|
||||
==
|
||||
|
||||
<h1>October CMS Webpack Theme Boilerplate</h1>
|
||||
|
||||
<img src="{{ 'assets/images/webpack-icon.svg'|theme }}" alt="Webpack logo">
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[viewBag]
|
||||
==
|
||||
<footer class="footer">
|
||||
<p>This is ze footer!</p>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
[viewBag]
|
||||
==
|
||||
<nav class="navbar navbar-expand-lg navbar-dark">
|
||||
<p>This is ze nav!</p>
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
try {
|
||||
// uncomment this if using ajax framework (requires jquery) and
|
||||
// jquery has been installed using npm
|
||||
// window.$ = window.jQuery = require('jquery');
|
||||
|
||||
// require npm packages globally here
|
||||
//require('more-packages-installed-with-npm-install');
|
||||
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
||||
require('./main');
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('JavaScript loaded!');
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* scss to go here */
|
||||
|
||||
body {
|
||||
background-color: pink;
|
||||
}
|
||||
Loading…
Reference in New Issue