使用 Angular UI 路由器预渲染不渲染根页面动态内容

问题描述

我为除根(主页)页面之外的所有页面进行了预渲染工作和运行.

I have prerender working and running for all pages except the root(home) page.

例如:

http://www.example.com/?_escaped_fragment_=

不呈现动态数据.所有其他页面都像

doesn't render the dynamic data. All other pages works like

http://www.example.com/contact?_escaped_fragment_=

这就像 Angular UI 路由器不知道它的根处于什么状态，因此它使视图保持空白.但是，没有 escaped_fragment 的根页面 http://www.example.com 确实可以正确呈现.

It's like angular UI router doesn't know what state the root it's in so it leaves the view blank. However root page http://www.example.com without escaped_fragment does render it correctly.

我在头部和 html5 中添加了片段元标记，在 angular 配置中为 true.

I have added the fragment meta tag in the header and html5 to true in angular config.

index.html:

index.html:

<meta name="fragment" content="!">

app.js:

$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');

.htaccess:

# Change YOUR_TOKEN to your prerender token and uncomment that line if you want to cache urls and view crawl stats
# Change http://example.com (at the end of the last RewriteRule) to your website url

<IfModule mod_headers.c>
    #RequestHeader set X-Prerender-Token "MY TOKEN"
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On

    <IfModule mod_proxy_http.c>
        RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
        RewriteCond %{QUERY_STRING} _escaped_fragment_

        # Only proxy the request to Prerender if it's a request for HTML
        RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff))(.*) http://service.prerender.io/http://www.example.com$2 [P,L]
    </IfModule>

</IfModule>


# BEGIN WordPress
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]
    </IfModule>
# END WordPress

推荐答案

您的 .htaccess 可能将主页的 URL 设置为/index.php.如果是这样，您可以将重写规则更改为:

Your .htaccess might have the URL set to /index.php for the homepage. If so, you could change your rewrite rule to this:

RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent|\.ttf|\.woff))(index\.php)?(.*) http://service.prerender.io/http://www.example.com$3 [P,L]

我添加了 (index.php)?如果找到并将$ 2更改为$ 3，则将其捕获.不要忘记将 http://www.example.com 更改为您的域.

I added (index.php)? to capture that out if found and changed the $2 to $3. Don't forget to change the http://www.example.com to your domain.

这篇关于使用 Angular UI 路由器预渲染不渲染根页面动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！