Блог

Главная - Вопросы по программированию - Таблицы стилей Laravel CSS перестают работать на определенных маршрутах

Таблицы стилей Laravel CSS перестают работать на определенных маршрутах

#php #laravel

#php #laravel

Вопрос:

Я работаю над проектом Laravel, который использует CSS-фреймворк Webflow, а не фреймворк начальной загрузки по умолчанию. Это отлично работает для большинства страниц, но у меня есть страница «профиля», где CSS вообще не работает. Я узнал, что это потому, что маршрут для страницы использует переменную, она выглядит так:

 Route::get('/chum/{id}', 'AppHttpControllersProfilesController@display');

Функция:

 public function display($id){
        $users = User::findOrFail($id);

        $following = $users->followings->count();
        $followers = $users->followers->count();

        return view('profile', [
            'users' => $users,
            'following' => $following,
            'followers' => $followers
        ]);

Как вы можете видеть, вы переходите по URL-адресу вместе с идентификатором профиля пользователя, и он должен привести вас туда. Но по какой-то причине тот факт, что вы добавляете эту переменную в конец URL-адреса, приводит к тому, что CSS вообще не работает. Если это вообще помогает, это таблицы стилей и файлы javascript, которые я использую в шаблоне.

     <!DOCTYPE html><!--  This site was created in Webflow. http://www.webflow.com  -->
    <!--  Last Published: Sun Nov 29 2020 00:43:15 GMT 0000 (Coordinated Universal Time)  -->
    <html data-wf-page="5fc2087d6594016e2f088aed" data-wf-site="5fc06e9787e537386fa53575">
    
    <head>
        <meta charset="utf-8">
        <title>Profile</title>
        <meta content="Profile" property="og:title">
        <meta content="Profile" property="twitter:title">
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <meta content="Webflow" name="generator">
        <link href="css/normalize.css" rel="stylesheet" type="text/css">
        <link href="css/webflow.css" rel="stylesheet" type="text/css">
        <link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
        <script type="text/javascript">
            WebFont.load({
                google: {
                    families: ["Courier Prime:regular,italic,700,700italic"]
                }
            });
        </script>
        <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
        <script type="text/javascript">
            ! function(o, c) {
                var n = c.documentElement,
                    t = " w-mod-";
                n.className  = t   "js", ("ontouchstart" in o || o.DocumentTouch amp;amp; c instanceof DocumentTouch) amp;amp; (n.className  = t   "touch")
            }(window, document);
        </script>
        <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
        <link href="images/webclip.png" rel="apple-touch-icon">
    </head>
    <body>


(Content would go here.)


        <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5fc06e9787e537386fa53575" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
        <script src="js/webflow.js" type="text/javascript"></script>
        <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
    </body>
    
    </html>

Ответ №1:

Вы должны изменить путь / URL вашего ресурса на корневую папку вашего сайта. Может быть, просто нужно / в начале. изменить

     <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <link href="css/webflow.css" rel="stylesheet" type="text/css">
    <link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">

Для

     <link href="/css/normalize.css" rel="stylesheet" type="text/css">
    <link href="/css/webflow.css" rel="stylesheet" type="text/css">
    <link href="/css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">

или вы также можете изменить с asset помощью вспомогательной функции laravel, чтобы добавить свой полный URL текущего хоста. Нравится

     <link href="{{asset('css/normalize.css')}}" rel="stylesheet" type="text/css">

{{asset('css/normalize.css')}} будет https://yourhost.com/css/normalize.css

Метки: