i want to add title, description and other html meta for SEO.
how i can do it in vue template?
for example i want to add the meta on my template.vue.
for some reason i have to add script too on that template.
my code is like this:
head: {
title: 'my title',
script: [
{ src: '/js/theme.js', defer: true }
]
},
code above is error.
if i use return like this:
head () {
return {
title: this.title,
meta: [
{ hid: 'description', name: 'description', content: 'My custom description' }
],
script: [
{ src: '/js/theme.js', defer: true }
]
}
}
meta will work, but the script will not showing.
like i say, i can't put the script on nuxt-config.js don't know why, but the page will error.
check this image hope it will help your problem
Related
I'm upgrading an old internal system used in my academic department. The page that I'm rewriting allows users to modify webpages containing information and content relevant to a course. The old system is using cleditor which I am replacing with the free version of tinyMCE 6.2.0.
One of the functionalities that needs to be replaced is a custom button that brings up a list of URLs to uploaded content and then turns the highlighted text into a link to the selected content (example of this in current system). I have been able to create my own custom button, and I have found the panel and selectbox features, but I haven't found how to populate the list in selectbox using a URL like one can for link_list.
Below is an example of the javascript that I have:
tinymce.init({
selector: '.course_page_editor',
toolbar: 'custContentLink',
setup: (editor) => {
editor.ui.registry.addButton('custContentLink', {
text: 'Insert Content Link',
onAction: (_) => insert_content_link_dialog(tinymce.activeEditor)
});
}
});
function insert_content_link_dialog(editor)
{
editor.windowManager.open({
title: 'Insert Content Link',
body: {
type: 'panel',
items: [{
type: 'selectbox',
name: 'content_list',
label: 'Choose the file that the link should point to:',
size: 5,
//TODO: generate list of uploaded content URLs
items: [
{text: 'Primary', value: 'primary style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
flex: true
}]
},
onSubmit: function () {
//TODO: replace highlighted text with selected link
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Add content link',
type: 'submit',
primary: true,
enabled: true
}
]
});
};
How do I create a popup list of links to server side content
My original process was overly complicated. TinyMCE has the link_list functionality which does exactly what I'm looking for. I then created a page to return a JSON array of link items as outlined in this other question I asked.
is there anyone ask that question yet ? if yes, please give me the link to read this question, if not, how to do that ?
I want to change the head tittle and description each user switch the language , how can I do that ?? I do love to get some help, I am. a beginner for this :D
i have gallery.vue
i am using nuxt js here
and using nuxt-i18n
based vue-i18n
<template lang="html">
<div class="">
<p> {{ $t('post') }}</p>
</div>
</template>
<script>
export default {
head () {
return {
tittle: // how to change tittle here for the spesific languange
}
}
}
</script>
<style lang="css">
</style>
i want the result like
when in english the head tittle to be Gallery
and when user switch the italianq , the head will be the Galleria
This maybe a bit late but to help new comers.
As per documentation you may use function to set meta data so with function you access data and computed (including this), check the code:
head() {
return {
title: this.$t('myTitle'),
htmlAttrs: {
lang: this.$i18n.locale,
},
meta: [
{
hid: 'description',
name: 'description',
content: this.$t('myDescription'),
},
],
}
},
source: https://nuxtjs.org/docs/2.x/features/meta-tags-seo#local-settings
Look for vue-meta library. I'm using it for this purposes. In App.vue:
<script>
export default {
name: 'App',
metaInfo () {
return {
htmlAttrs: {
lang: this.$i18n.locale
},
...
}
},
data () {
...
}
</script>
i got it
just add head function and return the tittle: this.$i18n.messages[this.$i18n.locale].yourPropHere
I am using below code to create a ckeditor plugin to upload images. While i am trying to create a ckeditor dialog, I am getting below errors. Below piece of code i took from the below link.
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dialog.definition.button.html
In chrome :
Uncaught TypeError: Cannot read property '_' of undefined
In firefox :
b.getContentElement(...) is undefined
Any help will be greateful.
{
type : 'file',
id : 'upload',
label : 'Select file from your computer',
size : 38
},
{
type : 'fileButton',
id : 'fileId',
label : 'Upload file',
'for' : [ 'tab1', 'upload' ],
filebrowser : {
onSelect : function( fileUrl, data ) {
alert( 'Successfully uploaded: ' + fileUrl );
}
}
},
I think that what you have there, is not "code" as it. Is just the object definition you must do to initialize a button in a dialog, as the docs you pasted say:
This class is not really part of the API. It just illustrates the
properties that developers can use to define and create buttons.
Once the dialog is opened, the created element becomes a
CKEDITOR.ui.dialog.button object and can be accessed with
CKEDITOR.dialog#getContentElement. For a complete example of dialog
definition, please check CKEDITOR.dialog.add.
Then, if we check that: http://docs.ckeditor.com/#!/api/CKEDITOR.dialog.definition
We will find this code:
CKEDITOR.dialog.add( 'testOnly', function( editor ) {
return {
title: 'Test Dialog',
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 500,
minHeight: 400,
contents: [
{
id: 'tab1',
label: 'First Tab',
title: 'First Tab Title',
accessKey: 'Q',
elements: [
{
type: 'text',
label: 'Test Text 1',
id: 'testText1',
'default': 'hello world!'
}
]
}
]
};
} );
Then it seems you need to call the method CKEDITOR.dialog.add with the object you prepared. (anyway, I din´t checked all the data and the formats you have in your object) this example should work.
Anyway, you should check this part of the same documentation and be sure on which one is the dialog/plugin you need.
Hope it may help to you.
I'm trying to implement [ngTagsInput][1] in my angularjs project. Following is my setup
#js file
$scope.loadTags = function(query) {
$scope.tags = [
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
]
//return $http.get('/tags?query=' + query);
}
and in my view (myview.html.haml)
%tags-input{"ng-model" => "tags"}
%auto-complete{:source => "loadTags($query)"}
which is same as
<tags-input ng-model="tags">
<auto-complete source="loadTags($query)"></auto-complete>
</tags-input>
** Above code I copied from the ngTagInput plugin website itself. and I'm using CDN to load the same versions as in the plugin website. But when I type tags im getting the following error in my javascript console
TypeError: Cannot read property 'then' of undefined
at http://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.0.1/ng-tags-input.min.js:1:5150
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:13777:28
at completeOutstandingRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:4236:10)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js:4537:7
it looks like something to do with promises. (I'm pretty new to angularjs and Im just guessing), but I wonder how it works in the example given in the website
But if I load the tags with the page load, it works fine. What could be going wrong here. any help would be much appreciated
edit after #Pierre comments and my new code looks like this
I probably have forgot the most important part, I'm calling this tags autocomplete method (in controller) from a directive. (sorry about that... :()
recipeform.tags is my model
#haml form
%tags-input{"ng-model" => "recipeform.tags"}
%auto-complete{:source => "loadTags($query)"}
#js
$scope.loadTags = function(query) {
var defer = $q.defer();
defer.resolve([
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
]);
return defer.promise;
/*return [*/
//{ text: 'just' },
//{ text: 'some' },
//{ text: 'cool' },
//{ text: 'tags' }
/*]*/
}
Both the js codes give the same error as previous :(
<auto-complete source="loadTags($query)"></auto-complete>
The "source" is a method supposed to return a promise, which will be used to return the tags. Not to inject them into your model...
$scope.loadTags = function(query) {
return[
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
]
}
should work. If not, it means the directive need a REAL promise, then you will need to do (but I dont think you will need to go this far) :
$scope.loadTags = function(query) {
var defer = $q.defer();
defer.resolve([
{ text: 'just' },
{ text: 'some' },
{ text: 'cool' },
{ text: 'tags' }
]);
return defer.promise;
}
i think its an easy question but i am stuck ...
now i am developing for PalmPAD with WebOS 3.0
and i want to design login system in that.
now i want to know if user click on (in login.js page) Register Button on click event i need to open my register.js page
in doc i found this code
Code:
enyo.kind({
name: "MyApps.Sample",
kind: "enyo.VFlexBox",
style: "width: 400px; padding: 5px",
components: [
{kind: "CustomButton", caption: "unstyled (CustomButton)",
onclick: "buttonClick"},
{kind: "Button", caption: "styled (Button)", onclick: "buttonClick"}
],
buttonClick: function() {
// respond to click
}
});
in this buttonClick: function() what should i write to navigate to the register.js page?
follow this code:
buttonClick: function() {
enyo.create({kind: "register"}).renderInto(document.body);
}
"register" kind is name of the kind of created in register.js file
ex: register.js
enyo.kind({
name: "register",
kind: "enyo.VFlexBox",
style: "width: 400px; padding: 5px",
components: [
//add the components whatever you want
],
});
Thanks