sinatraでcssとjsファイルをインポートする

こんにちは、現在、私はブートストラップとjqueryを使用している小さなアプリケーションを作成していて、cssとjsファイルをインポートする際に少し問題があります。sinatraでcssとjsファイルをインポートする

これは私のlayout.erbのようです。私は私のビューのファイルが

require 'rubygems' 
require 'sinatra' 
require_relative './app' 

module Portfolio 

    class MainRoutes < Sinatra::Base 

    before do 
     @user_authentication = Portfolio::Main 
    end 

    configure do 
     set :views   , File.expand_path('../../../Portfolio-FE/views', __FILE__) 
     set :root   , File.dirname(__FILE__) 
    end 

    helpers do 
     include Rack::Utils 
     alias_method :h, :escape_html 
    end 

    get '/' do 
     erb :index 
    end 
    end 
end

をフォルダ設定し、これが私のファイルがどのように見えるかですここ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Portfolio</title> 
    <link href="public/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="public/js/bootstrap.min.js"></script> 
    <script src="public/js/jquery-3.1.0.min.js"></script> 

</head> 
<body> 
    <header> 
     <nav class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container"> 
       <ul class="nav navbar-nav"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Projects & Tutorials</a></li> 
        <li><a href="#">The Division Highlights</a></li> 
        <li><a href="#">Contact Us</a></li> 
       </ul> 
       <p class="navbar-text navbar-right"><a href="#" class="navbar-link"><span class="glyphicon glyphicon-user"></span> Login/Signup</a></p> 
      </div> 
     </nav> 
    </header> 

    <section> 
     <%= yield %> 
    </section> 

    <footer> 
     <div class="panel panel-default"> 
      <div class="panel-footer">&copy; Copywrite JDG</div> 
     </div> 
     </footer> 
</body> 
</html>

です。

CSSやjsがプロジェクトにインポートされていないと私はなぜだろうか。

ありがとうございます。

出典

2016-07-18 John Geliberte

私は

はちょうどこのようなパブリックフォルダの設定、答えを考え出した：

set :public   , File.expand_path('../../../Portfolio-FE/public', __FILE__)

をし、このようなファイルをインポートします。

<link href="css/bootstrap.min.css" rel="stylesheet"> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/jquery-3.1.0.min.js"></script>

出典

2016-07-18 07:20:07

パブリックフォルダの設定以外に、スプロケットを使用することもできます。

私はここに例のアプリがあります。https://github.com/katgironpe/simple-sinatra-mvc

http://www.sinatrarb.com/configuration.html

set :root, File.dirname(__FILE__) 
set :public_folder, Proc.new { File.join(root, "static") }

は公式のガイドに従ってください。あなたのアプリのルートを設定することを忘れないでください。

出典

2016-07-19 18:12:40 kgpdeveloper

sinatraでcssとjsファイルをインポートする

答えて

関連する問題