2017-01-01 37 views
4

我开发了一个Laravel网站,现在我想将Yoast插件添加到博客部分以改进网站博客。
正如我可以从Yoast github看到的,它有一个javascript version它可以添加到自定义网站。
使用帮助不是很有帮助,所以如果有任何机构可以帮助我。
如何将Yoast wordpress插件添加到laravel

var SnippetPreview = require("yoastseo").SnippetPreview; 
var App = require("yoastseo").App; 

window.onload = function() { 
var focusKeywordField = document.getElementById("focusKeyword"); 
var contentField = document.getElementById("content"); 

var snippetPreview = new SnippetPreview({ 
    targetElement: document.getElementById("snippet") 
}); 

var app = new App({ 
    snippetPreview: snippetPreview, 
    targets: { 
     output: "output" 
    }, 
    callbacks: { 
     getData: function() { 
      return { 
       keyword: focusKeywordField.value, 
       text: contentField.value 
      }; 
     } 
    } 
}); 

app.refresh(); 

focusKeywordField.addEventListener('change', app.refresh.bind(app)); 
contentField.addEventListener('change', app.refresh.bind(app)); 
}; 

的使用帮助与node.js的,但我怎么能添加到PHP后台和HTML + JS前端。
谢谢。

+1

我无法使用npm安装yoast.js。 我使用这个命令“npm install https://github.com/Yoast/YoastSEO.js#develop” –

+0

从git repo下载它。 – soha1410

+1

我已经从git下载了,现在该怎么办?你能指导我吗? –

回答

4

经过几天的搜索终于找到答案。 将这个或任何类型的nodejs库转换为浏览器javascript支持只需转到browserify。 首先

npm install -g browserify 

安装它,然后安装所有需要的库

npm install <module_name> 

末生成

browserify <main.js> -o <destination.js> 

现在你可以添加脚本到你的HTML单一的js文件像

<script src="destination.js"></script> 
用于YOAST库的

示例中有一个browserify目录。我将browserify用于根目录下的index.js文件,并将生成的文件添加到此示例html文件中,并且所有内容都像魅力一样。

+1

我设法从browserify生成新的捆绑JS文件,但我不明白如何使示例HTML文件工作。除了页面上包含的其他文件外,是否还包含新的.js文件?另外,其他包含的文件是“example-browserified.js”,它不存在于目录中。应该改为“example.js”吗? – Concept211

+1

您只需将一个生成的js文件添加到HTML,删除其他文件。 HTML中的重要注意事项是元素的名称和标识,所有工作都在js中进行,包括文本输入更改事件。 – soha1410

+0

我正在努力与Browserify。我这样做: 'browserify index.js -o〜/ code/yoast/public/seo.js' 错误:未找到模块:“/home/eugene/code/yoast/node_modules/yoastseo/index.js” from file /home/eugene/code/yoast/node_modules/yoastseo/_fake.js 从2个月前有一个Github问题https://github.com/Yoast/YoastSEO.js/issues/1174它说,纱线安装'。 我试过了,它没有任何区别。 –

相关问题