Skip to content

Commit 3feebc0

Browse files
committed
add notes on "hash" vs "history" routing in the config docs
1 parent ef6905b commit 3feebc0

File tree

1 file changed

+39
-0
lines changed

1 file changed

+39
-0
lines changed

docs/configuration.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -659,6 +659,8 @@ window.$docsify = {
659659

660660
## routerMode
661661

662+
Configure the URL format that the paths of your site will use.
663+
662664
- Type: `String`
663665
- Default: `'hash'`
664666

@@ -668,6 +670,43 @@ window.$docsify = {
668670
};
669671
```
670672

673+
For statically-deployed sites (f.e. on GitHub Pages) hash-based routing is
674+
simpler to set up. For websites that can re-write URLs, the history-based format
675+
is better (especially for search-engine optimization, hash-based routing is not
676+
so search-engine friendly)
677+
678+
Hash-based routing means all URL paths will be prefixed with `/#/` in the
679+
address bar. This is a trick that allows the site to load `/index.html`, then it
680+
uses the path that follows the `#` to determine what markdown files to load. For
681+
example, a complete hash-based URL may look like this:
682+
`https://example.com/#/path/to/page`. The browser will actually load
683+
`https://example.com` (assuming your static server serves
684+
`index.html` by default, as most do), and then the Docsify JavaScript code will
685+
look at the `/#/...` and determine the markdown file to load and render.
686+
Additionally, when clicking on a link, the Docsify router will change the
687+
content after the hash dynamically. The value of `location.pathname` will still be
688+
`/` no matter what. The parts of a hash path are _not_ sent to the server when
689+
visiting such a URL in a browser.
690+
691+
On the other hand, history-based routing means the Docsify JavaScript will use
692+
the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)
693+
to dynamically change the URL without using a `#`. This means that all URLs will
694+
be considered "real" by search engines, and the full path will be sent to the
695+
server when visiting the URL in your browser. For example, a URL may look like
696+
`https://example.com/path/to/page`. The browser will try to load that full URL
697+
directly from the server, not just `https://example.com`. The upside of this is
698+
that these types of URLs are much more friendly for search engines, and can be
699+
indexed (yay!). The downside, however, is that your server, or the place where
700+
you host your site files, has to be able to handle these URLs. Various static
701+
website hosting services allow "rewrite rules" to be configured, such that a
702+
server can be configured to always send back `/index.html` no matter what path
703+
is visited. The value of `location.pathname` will show `/path/to/page`, because
704+
it was actually sent to the server.
705+
706+
TLDR: start with `hash` routing (the default). If you feel adventurous, learn
707+
how to configure a server, then switch to `history` mode for better experience
708+
without the `#` in the URL and SEO optimization.
709+
671710
## routes
672711

673712
- Type: `Object`

0 commit comments

Comments
 (0)