Question

我有静态html文件，其中包含＆＃34; / about＆＃34;等链接。在里面。对于开发我使用gulp与browsersync并希望像＆＃34; / about＆＃34;被内部重定向到＆＃34; /about.html"。

我尝试将使用modRewrite作为中间件添加到browsersync并定义一个正则表达式，这样所有没有文件结尾和尾随斜杠或没有尾部斜杠的网址都会重定向到$ 1。但我无法让它发挥作用。

此规则可行，但我需要为每个页面定义它：

^(.+about)\/?$ $1.html [L]

然后我尝试定义一个规则（当文件没有文件结束时，将其重定向到html，但这不起作用：

(!\.html|\.js|\.css|\.png$)\/?$ $1.html [L]

Answer 1

在一个完全不同的方向，我为了类似的目的一时间开发了一些东西。它使用一些非常简单的Javascript / jQuery代码对内部URL进行动态修改。

您可以将Javascript放在静态.js文件中，然后从CDN中包含jQuery并包含公共目录中的Javascript代码。假设您调用文件'link-rewriter.js'，您将从.html文件中使用它：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript" src="/public/javascript/link-rewriter.js"></script>

链接重写器的代码如下所示：

jQuery(document).ready(function() {
    var parser = document.createElement('a');
    parser.href = '/';

    var domain = parser.protocol + '//' + parser.host;
    var regexp = new RegExp('^' + escapeRegExp(domain), 'i');

    $('a[href^="http://"],a[href^="https://"],a[href^="//"]]').each(function(index, link) {
        var href = link['href'].replace(regexp, '');

        if ((!/^\//.test(href)) && (!/\.html$/i.test(href)) {
            link['href'] = link['href'] + '.html';
        }
    });
});

分解，此代码首先创建一个原型链接（anchor）元素，用于查询页面的协议和主机，以便定义域。

然后，处理每个 http ， https 和相对本地链接元素以查看是否需要重写它。处理代码首先剥离网页的域，并留下另一个域（或协议）或该域的链接。进一步处理此域的链接，以查看哪些域名缺少.html扩展名，以及那些自动添加.html扩展名的域名。

这种方法的优点：

只需向页面添加标签即可升级链接
它非常快，所以用户永远不会注意到它发生，即使页面上有数千（!!）个链接
仅修改同一域的链接，甚至可以定位特定的链接组

这种方法的缺点：

用户必须在浏览器中启用Javascript（真的，这些天不是谁？）
这是代码，因此最终可能需要维护或功能增强

Answer 2

我现在想出了这两个对我有用的正则表达式。这些正则表达式不考虑所有可能的URL ...我在使用mod重写时遇到了问题。但它现在对我有用，我会在需要时纠正它：

'^/$ /index.html [L]', 
'^(\/?(?!\.(?:html|js|css|png|jpg|svg)$)[a-z-]*   (?:\/+[a-z-]+)*)\/?$ $1.html [L]'

Answer 3

找到一个不需要modRewrite的解决方案。 serve-static包可以为您完成所有艰苦的工作。为您提供指定扩展名的选项，以便在找不到所请求的文件时查找。

var serveStatic = require('serve-static')

gulp.task('server', function() {
    return browserSync.init({
        server: {
            baseDir: '/',
            middleware: [
                serveStatic('/', { extensions: ['html'] })
            ]
        }
    });
});

与静态.html文件的browsersync - 需要正则表达式帮助

3 个答案: