В этом руководстве мы добавляем шаблон панели инструментов vali-admin в приложение Buffalo.
Настройка проекта Buffalo
1. Перейдите к своему $GOPATH
cd $GOPATH/src/github.com/$USER/
2. Создайте новый проект Buffalo.
buffalo new valibuffalo
3. Измените каталог проекта.
cd valibuffalo
4. Создайте базу данных для проекта.
buffalo db create — env development
5. Сделайте пробный запуск
buffalo dev
и перейдите на localhost: 3000 /
Подготовьте файлы шаблонов панели инструментов vali-admin
1. Перейдите на страницу vali-admin Github
2. Нажмите кнопку Клонировать или загрузить.
3. Нажмите кнопку Загрузить ZIP, чтобы загрузить сжатые исходные файлы.
4. Извлеките загруженный zip-файл в любую папку по вашему выбору.
5. Из извлеченной папки скопируйте все файлы html из папки docs в папку templates проекта. Обязательно замените существующий index.html.
6. Скопируйте /docs/css/main.css в ./assets/css/main.css.
7. Скопируйте /docs/js/main.js в ./assets/js/main.js.
Обновите application.scss
1. Откройте assets / css / application.scss и закомментируйте строку импорта начальной загрузки.
2. Добавьте @import “./main.css”; под font-awesome.css.
По завершении файл должен иметь следующее содержимое:
// File: assets/css/application.scss // @import “~bootstrap/scss/bootstrap.scss”; @import “~font-awesome/css/font-awesome.css”; @import “./main.css”;
Обновите application.js
1. Откройте assets / js / application.js и вставьте require(“./main.js”); под require(“bootstrap/dist/js/bootstrap.bundle.js”);.
После того, как вы выполнили вышеуказанный шаг, содержимое файла должно быть примерно таким:
// File: assets/js/application.js
require(“expose-loader?$!expose-loader?jQuery!jquery”);
require(“bootstrap/dist/js/bootstrap.bundle.js”);
require(“./main.js”);
$(() => {
});
Обновите templates / index.html
1. Откройте templates / index.html и удалите открывающие теги <!DOCTYPE html> и <html lang=”en”> и все содержимое в разделе <head>. Также удалите открывающий тег <body class=”app sidebar-mini rtl”>
2. Прокрутите страницу вниз и удалите следующие строки под тегом </main>.
<! — Essential javascripts for application to work → <script src=”js/jquery-3.2.1.min.js”></script> <script src=”js/popper.min.js”></script> <script src=”js/bootstrap.min.js”></script> <script src=”js/main.js”></script> <! — The javascript plugin to display page loading on top → <script src=”js/plugins/pace.min.js”></script> <! — Page specific javascripts → <script type=”text/javascript” src=”js/plugins/chart.js”></script>
3. Переместитесь вниз по странице и удалите скрипт Google Analytics над тегом </body>. Мы сохраняем скрипт данных диаграмм, так как он нам понадобится по мере продолжения.
4. Прокрутите вниз и удалите теги </body> и </html>closing.
5. Откройте templates / application.html и замените открывающий тег <body> на <body class=”app sidebar-mini rtl”>.
Первый тематический тест
Из Терминала запустите
buffalo dev
и перейдите на localhost: 3000 /
Переместить верхний заголовок Nav в отдельный файл
1. Создайте частичный файл _app-header-nav.html в папке шаблонов.
2. Переместите содержимое <header> в index.htnl, начиная с <header class=”app-header”><a class=”app-header__logo” href=”index.html”>Vali</a> и заканчивая <\header>, в _app-header-nav.html. После этого шага ваше содержимое _app-header-nav.html должно напоминать следующий отрывок.
<! — Navbar → <header class=”app-header”><a class=”app-header__logo” href=”index.html”>Vali</a> <! — Sidebar toggle button → <a class=”app-sidebar__toggle” href=”#” data-toggle=”sidebar” aria-label=”Hide Sidebar”></a> <! — Navbar Right Menu → <ul class=”app-nav”> <li class=”app-search”> … </ul> </header>
3. Замените href = ”index.html” в файле _app-header-nav.html на href = ”/”.
Переместить заголовок бокового меню в отдельный файл
1. Создайте частичный файл _app-side-nav.html в папке шаблонов.
2. Переместите все содержимое (в index.html), начиная с <! — Sidebar menu → и заканчивая <\aside>, в _app-side-nav.html. После этого шага ваше содержимое _app-side-nav.html должно напоминать следующий отрывок.
<! — Sidebar menu → <div class=”app-sidebar__overlay” data-toggle=”sidebar”></div> <aside class=”app-sidebar”> <div class=”app-sidebar__user”> … </aside>
3. Удалите открывающий тег <main class=”app-content”>.
4. Прокрутите вниз и удалите закрывающий тег </main>.
5. Замените href = ”index.html” в файле _app-side-nav.html на href = ”/”.
Переместить заголовок приложения в отдельный файл
1. Создайте частичный файл _app-title.html в папке шаблонов.
2. Переместите все содержимое (в index.html), начиная с <div class=”app-title”> и заканчивая закрывающим тегом <\div> в _app-title.html. После этого шага содержимое _app-title.html должно выглядеть следующим образом:
<div class=”app-title”> <div> <h1><i class=”<%= task-icon %>”></i> <%= task-title %></h1> <p><%= task-desc %></p> </div> <ul class=”app-breadcrumb breadcrumb”> <li class=”breadcrumb-item”><i class=”fa fa-home fa-lg”></i></li> <li class=”breadcrumb-item”><a href=”#”><%= task-title %></a></li> </ul> </div>
Мы использовали теги <%= task-icon %>, <%= task-title %> и <%= task-desc %>, чтобы во время выполнения теги отображались динамически.
Обновите application.html с частичными данными
1. Откройте templates / application.html.
2. Замените открывающий тег <div class=”container”> в templates / application.html на <main class=”app-content”> и замените закрывающий <\div> на <\main>.
3. Вставьте <%= partial(“app-header-nav.html”) %> и <%= partial(“app-side-nav.html”) %> в application.html под начальным тегом <body>. <%= partial(“app-title.html”) %> следует поставить после <main class=”app-content”>.
<body class=”app sidebar-mini rtl”> <%= partial(“app-header-nav.html”) %> <%= partial(“app-side-nav.html”) %> <main class=”app-content”> <%= partial(“app-title.html”) %> <%= partial(“flash.html”) %> <%= yield %> </main> <%= javascriptTag(“application.js”) %> </body>
Обновить обработчики маршрутов
1. Замените содержимое actions / home.go следующим:
// actions/home.go
package actions
import “github.com/gobuffalo/buffalo”
// HomeHandler is a default handler to serve up
// a home page.
func HomeHandler(c buffalo.Context) error {
c.Set(“task-title”, “Dashboard”)
c.Set(“task-icon”, “fa fa-dashboard”)
c.Set(“task-desc”, “A free and open source Bootstrap 4 admin template”)
return c.Render(200, r.HTML(“index.html”))
}
// ChartsHandler testing dynamic content handling of vali-admin theme
func ChartsHandler(c buffalo.Context) error {
c.Set(“task-title”, “Charts”)
c.Set(“task-icon”, “fa fa-pie-chart”)
c.Set(“task-desc”, “Various type of charts for your project”)
return c.Render(200, r.HTML(“charts.html”))
}
2. Добавьте app.GET(“/charts”, ChartsHandler) в actions / app.go ниже app.GET(“/”, HomeHandler.
// actions/app.go // Setup and use translations: app.Use(translations()) app.GET(“/”, HomeHandler) app.GET(“/charts”, ChartsHandler)
Настройка графиков
1. Установите плагин Графики, запустив
yarn add chart.js
в окне терминала
2. Обновите application.js, чтобы включить require(“chart.js”); до require(“./main.js”);.
// File: assets/js/application.js
require(“expose-loader?$!expose-loader?jQuery!jquery”);
require(“bootstrap/dist/js/bootstrap.bundle.js”);
require(“chart.js”);
require(“./main.js”);
$(() => {
});
Настроить пользовательские сценарии страницы
На странице index.htnl есть настраиваемый сценарий. В настоящее время сценарий будет отображаться до application.js в браузере. Это предотвратит отображение диаграмм. Если вы проверите страницу в браузере, вы заметите ошибку ReferenceError `$ is not defined`.
Чтобы исправить ошибку и отобразить диаграммы, выполните следующие действия:
1. Включите настраиваемый сценарий страницы в index.html в contentFor(“pageScript”) помощник.
<% contentFor(“pageScript”) { %>
<script>
…
var ctxl = $(‘#lineChartDemo’).get(0).getContext(‘2d’);
var lineChart = new Chart(ctxl, {type:’line’, data: data});
var ctxp = $(‘#pieChartDemo’).get(0).getContext(‘2d’);
var pieChart = new Chart(ctxp, {type: ‘pie’, data: pdata});
</script>
<% } %>
2. В файле макета application.html мы добавляем contentOf(“pageScript”) помощник под <%= javascriptTag(“application.js”) %>.
<body class=”app sidebar-mini rtl”> <%= partial(“app-header-nav.html”) %> <%= partial(“app-side-nav.html”) %> <main class=”app-content”> <%= partial(“app-title.html”) %> <%= partial(“flash.html”) %> <%= yield %> </main> <%= javascriptTag(“application.js”) %> <%= contentOf(“pageScript”) %> </body>
Если мы сейчас запустим приложение
buffalo dev
и перейдите на localhost: 3000 /. На странице указателя теперь должны отображаться диаграммы.
Теперь остается только обновить все остальные страницы, чтобы они соответствовали изменениям, которые мы внесли в index.html, и добавить обработчики маршрутов для этих страниц.
Полный исходный код этого примера доступен на Github.
