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

Question

I have a website built with PHP and I want to implement something similar to ASP's masterpages. 我有一个使用PHP构建的网站，并且想要实现类似于ASP的主页。 So I built something like this: 所以我建立了这样的东西：

<!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>

My problem is that this clutters the controller and makes SEO Analyzers very unhappy. 我的问题是，这会使控制器混乱，并使SEO分析器非常不满意。 So here is a list of problems I am facing and would like to know how to resolve. 因此，这里列出了我所面临的问题，并且想知道如何解决。

Is there any other way to include page/plugin specific css to the header tag without having a bunch of $config->addCSS(//Tag goes here//) in my controller? 还有其他方法可以将页面/插件特定的CSS包含到header标记中，而无需在控制器中添加一堆$ config-> addCSS（// Tag进入此处//）吗？
Google says to remove jQuery and Bootstrap scripts from the header, but I have page specific scripts (handlebars) that require jQuery. Google表示要从标头中删除jQuery和Bootstrap脚本，但我有需要jQuery的特定于页面的脚本（车把）。 How can I move jQuery to the bottom of the body tag, but before my page scripts which are included in $page? 如何将jQuery移到body标签的底部，但在$ page中包含的页面脚本之前呢？

Possible solutions that I don't really like: 我不太喜欢的可能解决方案：

Use javascript to include the page specific css within the $page variable. 使用javascript在$ page变量中包含特定于页面的CSS。 That's possible, but won't I get a FOUT("Flash of Unstyled Text")? 这是可能的，但是我不会得到FOUT（“ Flash of Unstyled Text”）吗？

2.1 Inlcude jQuery/Bootstrap at the bottom of the $page variable. 2.1在$ page变量的底部包含jQuery / Bootstrap。 That's nice until a new version comes out and all the pages have to be updated. 在发布新版本并且必须更新所有页面之前，这很好。

2.2 For every single page, have another page that contains the scripts and the include that in the masterpage afer I have included required scripts (jQuery/Boostrap). 2.2对于每个页面，都有另一个包含脚本的页面，并且在我包含所需脚本（jQuery / Boostrap）之后，将其包含在母版页中。

Answer 1

Output buffering has solved this problem for me. 输出缓冲为我解决了这个问题。

  <? 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>

Add the following below to store the output buffer. 在下面添加以下内容以存储输出缓冲区。 We can then change things around... 然后我们可以改变周围的事情...

<?
// 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;

This is what my source code now looks like: 这是我的源代码现在的样子：

<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 个解决方案

解决方案1
0 2015-02-02 09:20:29

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

问题描述

1 个解决方案

解决方案1 0 2015-02-02 09:20:29

解决方案1
0 2015-02-02 09:20:29