I am using NuxtJS's head tag. The meta tags in my application are often repeated or only have a slight variation.
I would like to pass the title into the mixin and then reuse the code for all pages in the application. However, I am not sure how to do this in vuejs. any suggestions?
export const metatags = {
head () {
const organization = this.$store.state.loadedData
const title = 'Classes & Lessons - ' + organization.organization.name + ' ' +
organization.target_locations[0]
const description =
(organization.organization.name
? organization.organization.name
: '') +
' is ' +
(organization.services.length > 0
? organization.target_locations[0]
: '') +
"'s premier " +
(organization.services.length > 0
? organization.services[0].name
: '') +
' and ' +
(organization.services.length > 1
? organization.services[1].name
: '') +
' training centers'
const logo = process.env.AMAZONAWS_IMAGE_URL +
organization.organization.primary_logo_id + '_350.' + organization.organization.logo_extension
const favicon = logo
const domain = 'https://' + this.$store.state.domain
return {
title,
meta: [
{
name: 'description',
content: description
},
{
property: 'og:title',
content: title
},
{
property: 'og:site_name',
content: organization.organization.name
},
{
property: 'og:description',
content: description
},
{
property: 'og:image',
content: logo
},
{
property: 'og:url',
content: domain
},
{
name: 'twitter:title',
content: title
},
{
name: 'twitter:description',
content: description
},
{
name: 'twitter:image',
content: logo
}
],
link: [
{ rel: 'canonical', href: domain },
{ rel: 'icon', href: logo },
{ rel: 'shortcut icon', href: logo },
{ rel: 'apple-touch-icon', href: logo },
{ rel: 'icon', type: 'image/x-icon', href: favicon }
]
}
}
}
It's not possible to pass any argument into your head() method directly, but this is available there. It doesn't matter whether the head() is defined on the page directly or using a mixin. Just make sure to not override it on individual pages....
Related
I'm using CoreUI sidebar , and using CRenderFunction for items previewing ,
I want to add SVG icon and dropdown for each nav item
here's content to render :-
export default [
{
_name: 'CSidebarNav',
_children: [
{
_name: 'CSidebarNavTitle',
_children: [i18n.tc('orders')],
},
{
_name: 'CSidebarNavItem',
name: i18n.tc('create_order'),
to: '/' + prefix + '/create-order',
icon: '',
},
{
_name: 'CSidebarNavItem',
name: i18n.tc('POS'),
to: '/' + prefix + '/pos',
icon: '',
},
{
_name: 'CSidebarNavItem',
name: "POS Report",
to: '/' + prefix + '/pos/daily',
icon: '',
},
{
_name: 'CSidebarNavItem',
name: i18n.tc('orders'),
to: '/' + prefix + '/orders',
icon: ''
},
]
}
]
I am trying to customize the prview section for a document insanity.io. To that extent, I have created the following document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
subtitle: 'author',
}
}
}
This works exactly as I want in Studio. The title section in the preview pane shows the title of the document and the subtitle section shows the name of the author.
However, if I try to modify the output of author by using prepare, then it no longer works. For instance, take a look at the following variation of the same document:
export default {
name: 'news',
type: 'document',
title: 'News',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
},
...
{
name: 'author',
title: 'Author',
type: 'string',
},
...
],
preview: {
select: {
title: 'title',
author: 'author',
}
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
The title preview field is rendered, but nothing shows up in the subtitle section. However, as far as I understand -- this should work. And I wondering why not.
Any ideas?
prepare is actually a function called in preview. You have it as a seperate field of the root object. Move prepare inside preview like so:
preview: {
select: {
title: 'title',
author: 'author'
},
prepare(selection) {
const { author } = selection
return {
...selection,
subtitle: author && `${author} is the author`
}
}
}
how to do that when changing the site language, the meta page also changed?
I use
vue-i18n - https://kazupon.github.io/vue-i18n/
vue-meta - https://www.npmjs.com/package/vue-meta.
App.vue
export default {
name: 'Name',
metaInfo: {
title: 'Title', // set a title
titleTemplate: '%s - title', // %s required
htmlAttrs: {
lang: 'ru',
amp: undefined // "amp" has no value
},
meta: [
{ 'name':'og:title',
'content': 'title',
},
{ 'name':'metatitle',
'content': 'title',
},
{ 'name':'og:description',
'content': 'Description',
},
{ 'name':'description',
'content': 'Description',
}
]
},
data(){return{ }},
mounted() {}
Instead of defining metaInfo as an object, define it as a function and access this as usual.
export default {
metaInfo () {
return { title: this.$t("home.title") }
}
}
Et voilà ! :)
I want to preview a reference name in the studio
I have and icon type, for example one which has the title 'facebook'
export default {
name: 'icon',
title: 'Icon',
type: 'document',
fields: [
{
name: 'name',
title: 'Name',
type: 'string'
},
]
}
I reference this in a menu elsewhere like this
{
name: 'icon',
title: 'Icon',
type: 'reference',
to: [{ type: 'icon' }]
},
and then try to preview like this
preview: {
select: {
title: 'icon',
},
prepare(selection) {
const { title } = selection;
return {
title: title.name,
}
}
}
but my selection returns the reference object, with _ref etc. not the object itself. Is there a way to preview this reference?
You can dot your way into the property on the reference that you'd like to use in the preview like this:
preview: {
select: {
title: 'icon.name',
},
prepare(selection) {
const { title } = selection;
return {
title: title.name,
}
}
}
Side note: Since the prepare function now just passes through its input, you can remove it altogether. This would be sufficient:
preview: {
select: {
title: 'icon.name'
}
}
Example
I've been looking into getting this to work but so far instead of a dropdown I get and empty textbox which doesn't do anything.
Below is my present code:-
#section js {
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="external">Show checks by ex:</label>
<input type="search" id="external" style="width: 230px"></input>
</div>
</script>
<script type="text/javascript">
var theGrid;
$().ready(function () {
$('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '#Url.Action("_IList", "Entry", new { #ExId = Model.ExId })',
data: { ignore: Math.random() }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Name: { type: 'string' },
Ex: { type: 'string' },
Date: { type: 'string' },
Check1: { type: 'string' },
Check2: { type: 'string' },
Check3: { type: 'string' },
Check4: { type: 'string' },
Check5: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
toolbar: kendo.template($("#template").html()),
columns:
[
{
field: 'Name'
},
{
field: 'Ex'
},
{
field: 'Date'
},
{
template: '#=Template1#' + sitePath + '#=Patient1#',
field: 'Patient1',
title: 'Patient 1',
width: 50
},
{
template: '#=Template2#' + sitePath + '#=Patient2#',
field: 'Patient2',
title: 'Patient 2',
width: 50
},
{
template: '#=Template3#' + sitePath + '#=Patient3#',
field: 'Patient3',
title: 'Patient 3',
width: 50
},
{
template: '#=Template4#' + sitePath + '#=Patient4#',
field: 'Patient4',
title: 'Patient 4',
width: 50
},
{
template: '#=Template5#' + sitePath + '#=Patient5#',
field: 'Patient5',
title: 'Patient 5',
width: 50
}
],
pageable: true
});
var dropDown = grid.find("#external").kendoDropDownList({
dataTextField: "ExName",
dataValueField: "ExId",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "json",
severFiltering: true,
transport: {
url: '#Url.Action("_Ex", "Entry")',
data: { ignore: Math.random() }
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
theGrid = $('#listDiv').data('kendoGrid');
});
</script>
<style scoped="scoped">
#grid .k-toolbar
{
min-height: 27px;
}
.external-label
{
vertical-align: middle;
padding-right: .5em;
}
#external
{
vertical-align: middle;
}
.toolbar {
float: right;
margin-right: .8em;
}
</style>
}
<h2>Check Lists</h2>
<div id="listDiv"></div>
<br />
It works to display all check lists for each Ex which I can select on a previous page and pass in the string Id to this one but I'd like to be able to figure out what's wrong with with the toolbar template as having the functionality on 1 page rather than spread over 2 is far more desirable.
Any help/guidance will be much appreciated.
Edit:
I did also find someone else who encountered the problem except they didn't get a forum response.
Example 2
You mention that somebody else encountered the problem and didn't receive a response, however the linked forum thread does contain a response and an answer to this issue. In that particular case a Javascript error had occurred on the page which prevented the dropdown from initializing correctly and I believe this is also the case for yourself.
Although not completely working because there isn't a valid datasource, I took your example code and dumped it into a jsFiddle and (after fixing some JS errors) you can see that the dropdown appears absolutely fine.
In particular, there were errors regarding grid and sitePath not being defined that prevented the dropdown from initializing.
var grid;
var sitePath = '';
$().ready(function () {
grid = $('#listDiv').kendoGrid({
dataSource: {
type: 'json',
serverPaging: true,
pageSize: 10,
transport: {
read: {
url: '',
data: { ignore: Math.random() }
}
},
schema: {
model: {
id: 'Id',
fields: {
Id: { type: 'number' },
Name: { type: 'string' },
Ex: { type: 'string' },
Date: { type: 'string' },
Check1: { type: 'string' },
Check2: { type: 'string' },
Check3: { type: 'string' },
Check4: { type: 'string' },
Check5: { type: 'string' },
Edit: { type: 'string' }
}
},
data: "Data",
total: "Count"
}
},
scrollable: false,
toolbar: kendo.template($("#template").html()),
columns:
[
{
field: 'Name'
},
{
field: 'Ex'
},
{
field: 'Date'
},
{
template: '#=Template1#' + sitePath + '#=Patient1#',
field: 'Patient1',
title: 'Patient 1',
width: 50
},
{
template: '#=Template2#' + sitePath + '#=Patient2#',
field: 'Patient2',
title: 'Patient 2',
width: 50
},
{
template: '#=Template3#' + sitePath + '#=Patient3#',
field: 'Patient3',
title: 'Patient 3',
width: 50
},
{
template: '#=Template4#' + sitePath + '#=Patient4#',
field: 'Patient4',
title: 'Patient 4',
width: 50
},
{
template: '#=Template5#' + sitePath + '#=Patient5#',
field: 'Patient5',
title: 'Patient 5',
width: 50
}
],
pageable: true
});
var dropDown = grid.find("#external").kendoDropDownList({
dataTextField: "ExName",
dataValueField: "ExId",
autoBind: false,
optionLabel: "All",
dataSource: {
type: "json",
severFiltering: true,
transport: {
url: '#Url.Action("_Ex", "Entry")',
data: { ignore: Math.random() }
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "ExId", operator: "eq", value: parseString(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
theGrid = $('#listDiv').data('kendoGrid');
});