使用Sage WordPress主题包含JS文件的正确方法 [英] Proper way to include JS files with Sage WordPress theme

问题描述

从文档，我无法弄清楚将我的JS文件包含到Sage主题中。

解决方案

包括自定义脚本（未通过bower软件包管理器安装）

您可以使用脚本/ ** / * glob模式。这将将 assets / scripts / 目录内的所有脚本捆绑到 dist / scripts / main.js 文件中。 / p>

编辑您的 assets / manifest.json 如下：

  {
dependencies：{
main.js：{
vendor：[
 //您的外部库通过bower 
] 
files不可用：[
scripts / ** / *，
scripts / main.js
] 
main：true 
}，
。 
。 
。 
  

• 供应商 - 属性路径是相对于你的项目根




• 文件 - 属性是相对于你的资产文件夹

有关更多信息，请访问一些示例。

安装&包括凉亭依赖

例如，让我们安装轮播 Slick 图书馆

1. 通过bower安装图书馆

     bower install --save slick-carousel 
     




2. 接下来你需要告诉你从安装的包中你需要哪些文件。所以你需要添加这些文件的路径到覆盖 c $ c> bower.json 文件。

注意路径相对于 / bower_components /< package_name> 。

 slick-carousel：{
main：[
。 /slick/slick.min.js，
./slick/slick.css
] 
} 
  

现在库将是编译的dist / scripts / main.js文件的一部分。

From the doc I can't figure out the right way to include my JS files into Sage theme. What's the correct procedure for this?

解决方案

Including custom script (not installed via bower package manager)

You can use scripts/**/* glob pattern. This will bundle all scripts that are inside assets/scripts/ directory into dist/scripts/main.js file.

Edit your assets/manifest.json like this:

{ 
  "dependencies": {
    "main.js": {
      "vendor": [
        // Your external libs that are not available via bower
      ]
      "files": [
        "scripts/**/*",
        "scripts/main.js"
      ],
      "main": true
    },
    .
    .
    .

• vendor - property paths are relative to your project root

• files - property is relative to your assets folder

For more info visit some examples.

Installing & including bower dependency

For example, let's install carousel Slick library.

1. Install library via bower

   bower install --save slick-carousel
   

2. Next you need to tell which files do you need from installed package. So you need add paths of those files to overrides section of bower.json file.

NOTE: Paths are relative to /bower_components/<package_name>.

    "slick-carousel": {
      "main": [
        "./slick/slick.min.js",
        "./slick/slick.css"
       ]
    }

Now library will be part of compiled dist/scripts/main.js file.

这篇关于使用Sage WordPress主题包含JS文件的正确方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！