Question

我有一个用PHP构建的网站，我想实现与ASP的主页类似的东西。所以我建造了这样的东西：

<!DOCTYPE hmtl>
<html>
  <head>
    //Generated from PHP (meta,css,javascript,title)
    //Can be modified in the controller before page display
  </head>
  <body>
     //Include the page content 
     //Includes page specific javascript
    <?php include $page ?>       
  </body>
</html>

我的问题是这会使控制器变得混乱并使SEO分析师非常不满意。所以这里列出了我面临的问题，并希望知道如何解决。

在我的控制器中没有任何其他方法可以将页面/插件特定的css包含到标头标签中，而没有一堆$ config-＆gt; addCSS（// Tag to here //）？
Google表示要从标头中删除jQuery和Bootstrap脚本，但我有需要jQuery的页面特定脚本（手柄）。如何将jQuery移动到body标签的底部，但是在我的页面脚本包含在$ page之前？

我不太喜欢的可能解决方案：

使用javascript在$ page变量中包含特定于页面的css。这是可能的，但我没有获得FOUT（＆＃34; Flash of Unstyled Text＆＃34;）？

2.1在$ page变量的底部包含jQuery / Bootstrap。在新版本发布并且所有页面都必须更新之前，这很不错。

2.2对于每一页，都有另一个页面包含脚本和包含在masterpage中的包含，我已经包含了所需的脚本（jQuery / Boostrap）。

Answer 1

输出缓冲为我解决了这个问题。

  <? ob_start(); ?>
    <html>
    <head>
        <link rel="stylsheet" type="text/CSS" href="my-main.css" />
        <!--no-custom-app-css-yet-->
        <title>Balloon App</title>
    </head>
    <body>

        <p>I write content until I introduce my app below</p>

        <div class="balloon-app"></div>
        <!--my-app-css-->
        <style type="text/CSS">
            .balloon-app {
                color: green;
            }
        </style>
        <!--/my-app-css-->

        <!--my-app-js-->
        <script type="text/javascript">
            document.writeln('jQuery has been called before balloon app script. Hooray!');  
        </script>
        <!--/my-app-js-->

        <script type="text/javascript" src="jquery-file.min.js"></script>
        <!--no-custom-app-js-yet-->

    </body>
</html>

添加以下内容以存储输出缓冲区。然后我们可以改变一切......

<?
// Get output buffer
$content = ob_get_clean();

// A function for finding the stuff in between [tag]*[/tag]
function get_string_between($string, $start, $end){
    $string = " ".$string;
    $ini = strpos($string,$start);
    if ($ini == 0) return "";
    $ini += strlen($start);
    $len = strpos($string,$end,$ini) - $ini;
    return substr($string,$ini,$len);
}

// Here's where it re-places everything...

// Get app JS & CSS stuff
$appDataJS = get_string_between($content, '<!--my-app-js-->', "<!--/my-app-js-->");
$appDataCSS = get_string_between($content, '<!--my-app-css-->', "<!--/my-app-css-->");

// Move the stuff to these locations
$JSMoved = str_replace('<!--no-custom-app-js-yet-->', $appDataJS, $content);
$CSSMoved = str_replace('<!--no-custom-app-css-yet-->', $appDataCSS, $JSMoved); // (JS already re-placed)

// Clear the old script/stylesheet locations in body tags
$ClearOldJS = preg_replace('#<!--my-app-js-->(.*?)<!--/my-app-js-->#is', '', $CSSMoved);
$ClearOldCSS = preg_replace('#<!--my-app-css-->(.*?)<!--/my-app-css-->#is', '', $ClearOldJS); // (old JS already removed)

$FinalBuffer = $ClearOldCSS;

echo $FinalBuffer;

这就是我的源代码现在的样子：

<html>
    <head>
        <link rel="stylsheet" type="text/CSS" href="my-main.css" />
        <style type="text/CSS">
            .balloon-app {
                color: green;
            }
        </style>
        <title>Balloon App</title>
    </head>
    <body>

        <p>I write content until I introduce my app below</p>
        <div class="balloon-app"></div>

        <script type="text/javascript" src="jquery-file.min.js"></script>
        <script type="text/javascript">
            document.writeln('jQuery has been called before balloon app script. Hooray!');  
        </script>

    </body>
</html>

SEO，PHP MasterPage和渲染阻止Javascript / CSS

1 个答案: