boilerplate._5个可从HTML5 Boilerplate借用的.htaccess片段

鞠子轩
2023-12-01

boilerplate.

HTML5 Boilerplate is an awesome website template when you want all best pieces in place for you when you start your project.  A while back I covered 7 CSS Snippets to Borrow from HTML5 Boilerplate, so today I want to feature a few .htaccess settings which could speed up, secure, and make your site very much more useful!

HTML5 Boilerplate是一个很棒的网站模板,当您在启动项目时想要所有适合您的最佳作品时。 前一段时间,我介绍了7个CSS片段,这些片段将从HTML5 Boilerplate借用 ,所以今天我想提供一些.htaccess设置,这些设置可以加快速度,提高安全性并使您的网站更加有用!

阻止对隐藏文件和目录的访问 (Block Access to Hidden Files and Directories)

We try to push our code to productions servers without hidden files and directors, like our revision system directors, but that doesn't always happen.  This snippet prevents those files from being accessible:

我们尝试将代码推送到没有隐藏文件和导演的生产服务器,例如我们的修订系统导演,但这并非总是如此。 此代码段阻止访问这些文件:


<IfModule mod_rewrite.c>
    RewriteCond %{SCRIPT_FILENAME} -d [OR]
    RewriteCond %{SCRIPT_FILENAME} -f
    RewriteRule "(^|/)\." - [F]
</IfModule>

Hackers shouldn't have the ability to get those files so now they can't!

黑客不应该具有获取这些文件的能力,所以现在他们不能!

按MIME类型压缩服务文件 (Compress Served Files by MIME Type)

There are a number of file types we know we want compressed on the way out, and with mod_deflate, we can direct the server to do so:

我们知道有很多文件类型需要在输出时进行压缩,而使用mod_deflate,我们可以指示服务器这样做:


<IfModule mod_deflate.c>

    # Compress all output labeled with one of the following MIME-types
    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
    #  and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
    #  as `AddOutputFilterByType` is still in the core directives).
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/x-web-app-manifest+json \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
    </IfModule>

</IfModule>

I love how easy it is to compress files by MIME type with .htaccess.  Tiny amount of code, massive enhancement for all of your users!

我喜欢使用.htaccess按MIME类型压缩文件有多么容易。 少量的代码,为您的所有用户带来了巨大的增强!

允许带有CORS的跨域字体 (Allow Cross-Domain Fonts with CORS)

I had no idea how big of a response I'd have when I first posted about cross-domain fonts.  They're a big, confusing problem for people but HTML5BP also has a solution:

我不知道我第一次发布有关跨域字体的反馈会有多大。 对于人们来说,这是一个大而令人困惑的问题,但是HTML5BP也有一个解决方案:


<IfModule mod_headers.c>
    <FilesMatch "\.(eot|otf|ttc|ttf|woff)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

Fonts are best served off of CDN so now you can do so without issue!

最好使用CDN上的字体,因此现在您可以毫无问题地使用它!

允许使用CORS的跨域图像 (Allow Cross-Domain Images with CORS)

Images are usually cool to serve from a different domain but if you want access to their data with canvas, you're in trouble.  This snippet allows you to get raw image data via canvas:

图像通常很酷,可以从其他域提供图像,但是如果您想使用画布访问图像数据,则会遇到麻烦。 该代码段允许您通过画布获取原始图像数据:


<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

After you get that image data, you can add filters and more.  Here's a tutorial showing you how to convert the image to canvas!

获取该图像数据后,您可以添加过滤器等。 这是一个教程,向您展示如何将图像转换为画布

过期 (Expires)

Expires headers are an awesome way of setting long cache expirations on your files.  Setting long expiration times on your static files (CSS, images, JavaScript, etc.) can be a massive performance boost!

过期标头是一种在文件上设置长缓存过期的绝妙方法。 在静态文件(CSS,图像,JavaScript等)上设置较长的到期时间可以大大提高性能!


<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS
    ExpiresByType text/css                              "access plus 1 year"

  # Data interchange
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!) and cursor images
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML components (HTCs)
    ExpiresByType text/x-component                      "access plus 1 month"

  # HTML
    ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"

  # Manifest files
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"

  # Web feeds
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

  # Web fonts
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"

</IfModule>

You may be asking yourself about updating your files and issues with new file versions not being update.  Add a querystring to your file URL and the file version will be downloaded by clients at the appropriate time!

您可能会问自己有关更新文件以及新文件版本未更新的问题。 将查询字符串添加到您的文件URL,客户端将在适当的时间下载文件版本!

HTML5 Boilerplate is a goldmine of useful code.  Even if you don't want to included all of it within your project, take a few minutes to check out the CSS, htaccess, and JavaScript code it provides you -- it could teach you a technique to carry with you throughout your career!

HTML5 Boilerplate是有用代码的金矿。 即使您不想将所有内容都包含在项目中,也请花几分钟时间检查一下它提供CSS,htaccess和JavaScript代码-它可以教您一种在您的整个职业生涯中随身携带的技术!

翻译自: https://davidwalsh.name/html5-boilerplate-htaccess

boilerplate.

 类似资料: