Question

我在SO上发帖导致我的问题是关于AngularJS，而不是Wordpress。我使用AngularJS（1.6.4）和WP REST API构建单页面应用程序。一切都很好，但我现在正在寻找一个解决方案，以反映帖子的永久链接设置。

我想扩展其余的api以暴露它们，然后将$http服务注入我的模块config

app.config(function ($routeProvider, $locationProvider) {       
    $routeProvider.when('/', {templateUrl: partials.folder + 'home.php', controller: 'allposts'});

    var tags = [
        '%year%',
        '%monthnum%',
        '%day%',
        '%hour%',
        '%minute%',
        '%second%',
        '%post_id%',
        '%postname%',
        '%category%',
        '%author%'
    ];
    var urlvars = '';
    var inj = angular.injector(['ng']);
    var $http = inj.get("$http");
    $http.get('wp-json/permalink_api/v0/settings').then(function (res) {
        var settings = res.data;
        var permalink_settings = settings.permalink_settings;

        //This array contains the permalink settings
        var arr = settings.permalink_settings.permalink_structure.split('/');

        //I'll now generate a string using that array...
        for (var i = 0; i<arr.length; i++) {
            if (arr[i] == "") {
                arr.splice(i,1);
                i=i-1;
            } else {
                if ((ix = tags.indexOf(arr[i]))> -1) {
                    var cleantag = ":" + tags[ix].replace(/%/g, "");
                    urlvars += '/' + cleantag;
                } else {
                    urlvars += '/' +arr[i];
                }
            }
        }
    }).then(function () {
        //...and create a route based on permalink setting
        $routeProvider.when(urlvars, {templateUrl: partials.folder + 'post.html', controller: 'singlepost'});           
    });
    $locationProvider.html5Mode(true);
})

一旦应用程序完全加载，此代码就可以了，但是在这个阶段，$http服务还没有准备就绪。会发生什么是它加载整个应用程序，然后开始应用此配置，这意味着json数据加载太晚。最糟糕的结果是我无法直接从浏览器栏访问路线，只能通过应用程序的链接访问。

我认为使用拦截器不会改变这种情况。镜像永久链接结构对搜索引擎优化是有利的，所以我想实现这一点，即使我正在创建一个SPA，更不用说它可以像对待经典主题那样完全控制用户。

任何意味着实现这一目标？谢谢。

修改的 .htaccess设置设置良好;在任何情况下定义任何静态路由都可以。

Answer 1

我通过Wordpress函数解决了这个问题：它打印了一个包含我的配置的标签。

function pre_configure_angular () {
?>
<script>
    angular.module('single-page').config(function ($routeProvider, $locationProvider) {
        var tags = [
            '%year%',
            '%monthnum%',
            '%day%',
            '%hour%',
            '%minute%',
            '%second%',
            '%post_id%',
            '%postname%',
            '%category%',
            '%author%'
        ];
        var urlvars = '';

        var permalink_structure = '<?php echo get_option('permalink_structure'); ?>';

        var arr = permalink_structure.split('/');
        for (var i = 0; i<arr.length; i++) {
            if (arr[i] == "") {
                arr.splice(i,1);
                i=i-1;
            } else {
                if ((ix = tags.indexOf(arr[i]))> -1) {
                    var cleantag = ":" + tags[ix].replace(/%/g, "");
                    urlvars += '/' + cleantag;
                } else {
                    urlvars += '/' +arr[i];
                }
            }
        }

        $routeProvider.when('/', {templateUrl: partials.folder + 'home.php', controller: 'allposts'});
        $routeProvider.when(urlvars, {templateUrl: partials.folder + 'post.html', controller: 'singlepost'});
        $routeProvider.when('/:page', {templateUrl: partials.folder + 'page.html', controller: ''});

        $locationProvider.html5Mode(true);
    });
</script>
<?php
}
add_action ('wp_head', 'pre_configure_angular');

这使我可以避免向服务器发送另一个http请求。

AngularJS：镜像Wordpress永久链接设置

1 个答案: