[ruby on rails] Rails 6 使用 AndminLTE

微信-since81192

于 2022-09-01 00:26:07 发布

阅读量402

点赞数

本文链接：https://blog.csdn.net/qq_41037744/article/details/126634699

版权

ruby on rails 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

1. 新建项目

rails new adminlte-rails-template

# cd adminlte-rails-template/
rails generate controller home index

2. 安装 JQuery and Bootstrap

yarn add bootstrap jquery popper.js

Configure config/webpack/environment.js

const {environment} = require('@rails/webpacker')

const webpack = require('webpack')

environment.plugins.append('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        Popper: ['popper.js', 'default']
    })
)

module.exports = environment

3. 加载JQuery and Bootstrap

# app/javascript/packs/application.js
// import 'jquery'  # jquery没加载上的话就把这个加上
import 'bootstrap';
import '../stylesheets/application'; // This file will contain your custom CSS

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
});

新建文件夹 app/javascript/stylesheets/ 用来放css文件

mkdir app/javascript/stylesheets
touch app/javascript/stylesheets/application.scss

#  app/javascript/stylesheets/application.scss
@import "bootstrap";

4. 加载AdminLTE

yarn add admin-lte
yarn add @fortawesome/fontawesome-free

# app/javascript/packs/application.js
import 'admin-lte'
import "@fortawesome/fontawesome-free/js/all";

# app/javascript/stylesheets/application.scss
@import "admin-lte";
@import '@fortawesome/fontawesome-free';

4. 设置Layout

修改app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title> Rails6 AdminLTE 3.0</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body data-scrollbar-auto-hide="n" class="hold-transition sidebar-mini layout-fixed">
      <div class="wrapper">
        <%= render "base/header" %>
        <%= render "base/sidebar" %>

        <div class="content-wrapper">
          <div class="content-header">
            <div class="container-fluid">
              <div class="row mb-2">
                <div class="col-sm-6">
                  <h1 class="m-0 text-dark">Starter Page</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                  <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item active">Starter Page</li>
                  </ol>
                </div><!-- /.col -->
              </div><!-- /.row -->
            </div><!-- /.container-fluid -->
          </div>

          <div class="content container-fluid">
            <div class="container-fluid">
              <%= yield %>
            </div>
          </div>
        </div>

        <%= render "base/footer" %>
        <%= render "base/control_sidebar" %>
      <div>
  </body>
</html>

修改views结构

mkdir app/views/base
touch app/views/base/_header.html.erb
touch app/views/base/_sidebar.html.erb
touch app/views/base/_footer.html.erb
touch app/views/base/_control_sidebar.html.erb

用 starter.html中的内容替换我们的html

# node_modules/admin-lte/starter.html
复制 class="main-header" section 到 app/views/base/_header.html.erb 
复制 class="main-sidebar ..." section 到 app/views/base/_sidebar.html.erb
复制 class="main-footer" section 到 app/views/base/_footer.html.erb 
复制 class="control-sidebar ..." and class="control-sidebar-bg" sections 到 app/views/base/_control_sidebar.html.erb.

4. 启动服务器

bin/webpack-dev-server
rails s

webpack如果报错

SassError: Top-level selectors may not contain the parent selector "&".
  ╷
7 │   &.bg-#{$name} {

解决方案

# node_modules/admin-lte/build/scss/mixins/_backgrounds.scss line 7:
 &.bg-#{$name} {
 改成
 .bg-#{$name} {

最后查看 home/index

微信-since81192

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[ruby on rails] Rails 6 使用 AndminLTE

【代码】[ruby on rails] Rails 6 使用 AndminLTE。
复制链接

扫一扫

专栏目录

[ruby on rails] Rails 6 使用 AndminLTE

1. 新建项目

2. 安装 JQuery and Bootstrap

3. 加载JQuery and Bootstrap

4. 加载AdminLTE

4. 设置Layout

4. 启动服务器

“相关推荐”对你有帮助么？