javascript - 通过 JavaScript 重命名 URL

Question

我正在基于这个开发一个网站tutorial 并希望将 /?chapter=# 中的 URL 重命名为其各自的导航名称，例如/work,/about,/services 等

index.php:

<aside id="menu">
    <div id="scroll">
        <nav>
            <ul>
                <li><a href="#introduction">Work</a></li>
                <li><a href="#chapter1">About</a></li>
                <li><a href="#chapter2">Services</a></li>
                <li>Blog <!-- Coming Soon... --> </li>
                <li><a href="#chapter4">Contact</a></li>
            </ul>
        </nav>
    </div> <!-- #scroll -->    
</aside> <!-- #menu -->

...

...

<div class="content-scroller">
    <div class="content-wrapper">
        <article class="content" id="introduction">
            <div class="inner">  
...
...
        <article class="content" id="chapter1">
            <div class="inner">  
...
...

jquery.page.js:

(function(window, undefined) {

    var Page    = (function() {

        var $container          = $( '#container' ),
            // the scroll container that wraps the articles
            $scroller           = $container.find( 'div.content-scroller' ),
            $menu               = $container.find( 'aside' ),
            // menu links
            $links              = $menu.find( 'a' ),
            $articles           = $container.find( 'div.content-wrapper > article' ),
            // button to scroll to the top of the chapter
            // only shown when screen size < 960
            $toTop              = $container.find( 'a.totop-link' ),
            // the browser nhistory object
            History             = window.History,
            // animation options
            animation           = { speed : 800, easing : 'easeInOutExpo' },
            // jScrollPane options
            scrollOptions       = { verticalGutter : 0, hideFocus : true },
            // init function
            init                = function() {

                // initialize the jScrollPane on both the menu and articles
                _initCustomScroll();
                // initialize some events
                _initEvents();
                // sets some css properties 
                _layout();
                // jumps to the respective chapter
                // according to the url
                _goto();

            },
            _initCustomScroll   = function() {

                // Only add custom scroll to articles if screen size > 960.
                // If not the articles will be expanded
                if( $(window).width() > 960 ) {

                    $articles.jScrollPane( scrollOptions );

                }
                // add custom scroll to menu
                $menu.children( '#scroll' ).jScrollPane( scrollOptions );

            },
            _goto               = function( chapter ) {

                    // get the url from history state (e.g. chapter=3) and extract the chapter number
                var chapter     = chapter || History.getState().url.queryStringToJSON().chapter,
                    isHome      = ( chapter === undefined ),
                    // we will jump to the introduction chapter if theres no chapter
                    $article    = $( chapter ? '#' + 'chapter' + chapter : '#' + 'introduction' );

                if( $article.length ) {

                        // left / top of the element
                    var left        = $article.position().left,
                        top         = $article.position().top,
                        // check if we are scrolling down or left
                        // is_v will be true when the screen size < 960
                        is_v        = ( $(document).height() - $(window).height() > 0 ),
                        // animation parameters:
                        // if vertically scrolling then the body will animate the scrollTop,
                        // otherwise the scroller (div.content-scroller) will animate the scrollLeft
                        param       = ( is_v ) ? { scrollTop : (isHome) ? top : top + $menu.outerHeight( true ) } : { scrollLeft : left },
                        $elScroller = ( is_v ) ? $( 'html, body' ) : $scroller;

                    $elScroller.stop().animate( param, animation.speed, animation.easing, function() {

                        // active class for selected chapter
                        $articles.removeClass( 'content-active' );
                        $article.addClass( 'content-active' );

                    } );

                }

            },
            _saveState          = function( chapter ) {

                // adds a new state to the history object
                // this will trigger the statechange on the window
                if( History.getState().url.queryStringToJSON().chapter !== chapter ) {

                    History.pushState( null, null, '?chapter=' + chapter );

                }

            },
            _layout             = function() {

                // control the overflow property of the scroller (div.content-scroller)
                var windowWidth = $(window).width();
                switch( true ) {

                    case ( windowWidth <= 960 ) : $scroller.scrollLeft( 0 ).css( 'overflow', 'visible' ); break;
                    case ( windowWidth <= 1024 ): $scroller.css( 'overflow-x', 'scroll' ); break;
                    case ( windowWidth > 1024 ) : $scroller.css( 'overflow', 'hidden' ); break;

                };

            },
            _initEvents         = function() {

                _initWindowEvents();
                _initMenuEvents();
                _initArticleEvents();

            },
            _initWindowEvents   = function() {

                $(window).on({
                    // when resizing the window we need to reinitialize or destroy the jScrollPanes
                    // depending on the screen size
                    'smartresize' : function( event ) {

                        _layout();

                        $('article.content').each( function() {

                            var $article    = $(this),
                                aJSP        = $article.data( 'jsp' );

                            if( $(window).width() > 960 ) {

                                ( aJSP === undefined ) ? $article.jScrollPane( scrollOptions ) : aJSP.reinitialise();

                                _initArticleEvents();

                            }   
                            else {

                                // destroy article's custom scroll if screen size <= 960px
                                if( aJSP !== undefined )
                                    aJSP.destroy();

                                $container.off( 'click', 'article.content' );

                            }

                        });

                        var nJSP = $menu.children( '#scroll' ).data( 'jsp' );
                        nJSP.reinitialise();

                        // jumps to the current chapter
                        _goto();

                    },
                    // triggered when the history state changes - jumps to the respective chapter
                    'statechange' : function( event ) {

                        _goto();

                    }
                });

            },
            _initMenuEvents     = function() {

                // when we click a menu link we check which chapter the link refers to,
                // and we save the state on the history obj.
                // the statechange of the window is then triggered and the page/scroller scrolls to the 
                // respective chapter's position
                $links.on( 'click', function( event ) {

                    var href        = $(this).attr('href'),
                        chapter     = ( href.search(/chapter/) !== -1 ) ? href.substring(8) : 0;

                    _saveState( chapter );

                    return false;

                });

                // scrolls to the top of the page.
                // this button will only be visible for screen size < 960
                $toTop.on( 'click', function( event ) {

                    $( 'html, body' ).stop().animate( { scrollTop : 0 }, animation.speed, animation.easing );

                    return false;

                });

            },
            _initArticleEvents  = function() {

                // when we click on an article we check which chapter the article refers to,
                // and we save the state on the history obj.
                // the statechange of the window is then triggered and the page/scroller scrolls to the 
                // respective chapter's position
                $container.on( 'click', 'article.content', function( event ) {

                    var id          = $(this).attr('id'),
                        chapter     = ( id.search(/chapter/) !== -1 ) ? id.substring(7) : 0;

                    _saveState( chapter );

            //      return false;

                });

            };

        return { init : init }; 

    })();

    Page.init();

})(window);

我怎样才能做到这一点？

谢谢

Answer 1

好吧，这一行就是在写你的历史状态:

 History.pushState(null, null, '?chapter=' + chapter);

所以你需要修改那个函数来做你想做的事。如果您有一个小型站点，那么您可以设置条件以轻松地将状态交换为您想要的任何状态。如果你有一个大型动态站点，除非你喜欢可怕、乏味的维护，否则你不想这样做......

_saveState = function(chapter) {

    // adds a new state to the history object
    // this will trigger the statechange on the window
    if (History.getState().url.queryStringToJSON().chapter !== chapter) {
        var page;
        if(chapter == 1)
            page = "/about";
        else if(chapter == 2)
            page = "/services";
        else
            page = '?chapter=' + chapter;

        History.pushState(null, null, page);

    }
},

不过，我可能没有捕获您问题的要点。如果是这样我可以更新这个答案