-2

私はこのサイトを持っており、CSS と JavaScript へのリンクは機能していますが、問題は CSS がサイトに適用されていないことです。また、CSS のリンクにアクセスすると、ブラウザは CSS と JavaScript ファイルをダウンロードします。Google の PageSpeed Insights を試してみたところ、

スクロールせずに見えるコンテンツで、外部のレンダリングをブロックする Javascript と CSS を排除する

このため、スタイルシートが機能しません。

Resource interpreted as Stylesheet but transferred with MIME type application/x-httpd-php

これは私のサイトのファイル構造です。私のサイトでは Smarty テンプレートと Bootstrap を使用しています。

ここに画像の説明を入力

私のテンプレートはビューフォルダー内にあります

ここに画像の説明を入力

サンプルコード

index.php

<?php
require_once('includes/initialize.php');
$smarty = new Smarty_skyerp();
//$smarty->testInstall();

$smarty->assign('title','Skyerp | Home'); 
$smarty->assign('year',date("Y", time()));

$smarty->display('index.tpl.html');


?>

index.tpl.html

{extends file='layout.tpl.html'}

{block name='nav'}
    <ul class="nav">
        <li class="active"><a href="index.php">Home</a></li>
        <li><a href="skyerp.php">SkyERP</a></li>
        <li><a href="payroll.php">SkyPayroll</a></li>
        <li><a href="manual.php">Manuals</a></li>
        <li><a href="support.php">Support</a></li>
        <li><a href="about.php">About Us</a></li>
        <li><a href="contact.php">Contact Us</a></li>       
    </ul>
{/block}

{block name='content'}
    <div class="row-fluid"></div>
{/block}

layout.tpl.html

  <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>{$title}</title>

    <link href="assets/css/bootstrap.css" type="text/css" rel="stylesheet">
    <link href="assets/css/bootstrap-responsive.min.css" type="text/css" rel="stylesheet">
    <link href="assets/css/docs.css" type="text/css" rel="stylesheet">
    <style type="text/css">
      body {
        <!--background-image: url('assets/img/skyerp_blue.jpg');-->
        background-size: 80%;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:bottom;

      }
    </style>
    <link href="assets/css/stickyfooter.css" rel="stylesheet">
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    {block name="head"}{/block}

</head>
<body data-spy="scroll" data-target=".module-sidebar">
    <div id="wrap" style="height: 100%;">
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand" href="index.php" style="padding: 6px 10px 1px 0;"><img src="assets/img/headerfull.png"/></a>
                    <div class="nav-collapse collapse" style="margin-top: 14px;">
                        {block name='nav'}{/block}
                        <!--<form class="navbar-form pull-right">
                            <input class="span2" type="text" placeholder="Email">
                            <input class="span2" type="password" placeholder="Password">
                            <button type="submit" class="btn btn-primary">Sign in</button>
                        </form>-->
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            {block name='banner'}{/block}
            {block name='content'}{/block}
        </div>
        <div id="push"></div>
    </div>

        <footer id="footer" class="footer">
          <div class="container">
            <p>SkyErp © {$year}. All Rights Reserved.</p>
            <p></p>
            <p></p>
            <ul class="footer-links">
              <li><a href="http://blog.getbootstrap.com">Blog</a></li>
              <li class="muted">&middot;</li>
              <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Issues</a></li>
              <li class="muted">&middot;</li>
              <li><a href="https://github.com/twitter/bootstrap/blob/master/CHANGELOG.md">Changelog</a></li>
            </ul>
          </div>
        </footer>

    <script src="assets/js/bootstrap.min.js"></script>
    {block name='script'}{/block}

</body>

`

問題の原因は何ですか? サーバー側の問題ですか、それともファイルの処理方法ですか? これを修正するにはどうすればよいですか?

4

1 に答える 1

2

これに対する修正を見つけました。問題はサーバー側にあったと思います。. 私の Web サイトは Windows Server で実行されています。カスタム MIME タイプの IIS 設定で、.cssset mime type totext/cssと.jsset mime type to を追加しましたtext/javascript。Apache は試していません。

于 2013-08-08T15:31:58.363 に答える