I've run in to an interesting issue where I'm using a Tumblr static page and instafeedjs.
When I'm editing the page Instafeed works fine. However, when I view the page outside of the editor the images don't load and the link won't take me to the instagram site. Here's code, but like I said, everything works fine in the editor.
<script type="text/javascript">
var feed = new Instafeed({
get: 'user',
userId: USER_ID,
accessToken: 'aTOKEN',
clientId: 'cID',
limit:4,
template: '<img src="{{image}}" /><div class="likes">♥ {{likes}}</div>'
});
feed.run();
</script>
Change your template line to have spaces inside all the curly braces:
template: '<img src="{{ image }}" /><div class="likes">♥ {{ likes }}</div>'
Because Tumblr uses single curly braces for its themes (ex: {SubmitLabel}), it sees your template line an treats {{link}} as a theme variable.
You can trick Tumblr into ignoring those tags by adding spaces inside the curly braces.
For reference, see:
https://github.com/stevenschobert/instafeed.js/issues/41
Custom Tumblr them with Handlebars
Ok, I just got back to it, and as lharby suggested, it is in fact the use of the "template:" that causes the problem. Lots of thanks, now I just have to figure out a work around.
Thanks again,
...still think it's weird that it works in the editor... :^/
Related
https://qiita.com/munieru_jp/items/d7e9f98b5ab5960e7a93
If you do as above, you can get the contents of {{$ t ('HELLO_WORLD')}} in the <template> tag.
How can I get {{$ t ('HELLO_WORLD')}} in the <script> tag in the same file?
The reason is that I want to manage title descriptions and og related items with head.
We apologize for the inconvenience, but we would appreciate it if you could teach us.
Then thank you.
You have access to the nuxt-i18n translation helper in the script of your page with this.$t and the head method on the other hand has access to the this context.
So you could do something like this:
export default {
head () {
return {
title: this.$t('HELLO_WORLD')
}
}
}
Use the head method to set the HTML Head tags for the current page.
https://nuxtjs.org/api/pages-head/
There's always an overlap with Navbar dropdown when more than one is clicked. It focuses and takes a few minutes to clear this becomes a problem because it causes clutter.
The configuration for this in the Vuepress docs is just to add navbar items and ariaLabel any know how I can stop this behaviour.
themeConfig: {
nav: [
{
text: 'Languages',
ariaLabel: 'Language Menu',
items: [
{ text: 'Chinese', link: '/language/chinese/' },
{ text: 'Japanese', link: '/language/japanese/' }
]
}
]
}
Here's an example
To answer your question one would need to address two distinct issues:
how do I run custom JavaSCript in VuePress?
how do I close any previously open dropdowns on click in my current VuePress theme, using JavaScript?
For the first problem there are several solutions (one of them being by using a custom component with code run in its mounted() hook, but this would require you to include that component in every page and make sure it doesn't run more than one time (since you want to bind events to elements).
I believe the cleanest way would be by adding a <script> to <head> which can be achieved by adding this to the head prop of your .vuepress/config.js export:
head: [
// ...existing stuff, if any,
['script', {}, `
(function() {
// your code here...
})();
`]
]
However, there are a few problems with the above solution. Firstly, it's going to be run as soon as it's parsed, and that's inside the <head> tag. Which means none of the contents of your page are rendered yet. And the second problem is you're in a template literal. You don't really want to be writing JavaScript code in a template literal. Ideally you should be able to put your code in a '.js' file and append it as a <script> tag.
In order to do that, you need to create a .vuepress/public/ folder, if you don't already have one. Place your .js file in there (I used test.js but feel free to name it as you like). Modify the above code to:
['script', {}, `
(function() {
var s = document.createElement('script');
s.src = './test.js';
var h = document.querySelector('head');
h.appendChild(s);
})();
`]
Change ./test.js to your file's name.
Now your file has clean JavaScript and the door is open. Your code executes in the window object context.
To answer the second part of your question, well..., it largely depends on the theme you are using. If you're using the default theme (which seems to be the case, from the SS you posted), this should work, if placed inside your .js file:
document.addEventListener('DOMContentLoaded', fixDropDowns);
function fixDropDowns() {
document.body.addEventListener('click', (ev) => {
const header = document.querySelector('header');
if (header) {
const dds = header.querySelectorAll('.dropdown-wrapper');
[...dds].forEach(el => el.classList.remove('open'));
const curr = ev.target.closest('.dropdown-wrapper');
if (curr) {
curr.classList.add('open');
}
}
})
}
But it's based on a close inspection of the generated markup.
Specifically on the fact the dropdowns have a class of .dropdown-wrapper and that they're opened by toggling class open on them. The above is just an example and will likely not work on other themes and might even stop working on the default theme in some future version.
I'm using the riot for the system. but I have a problem using the common tag in every place. because I have to copy the all common tag each page.
I added all tags like this. Does anyone have the solution for this ?
<st-service>
<st-alert></st-alert>
<st-header></st-header>
<st-body></st-body>
<st-footer></st-footer>
</st-service>
<st-profile>
<st-alert></st-alert>
<st-header></st-header>
<st-body></st-body>
<st-footer></st-footer>
</st-profile>
I found a solution, I'm using this method to handle these common tags. like this
<st-common>
<st-alert></st-alert>
<st-header></st-header>
<yeild></yeild>
<st-footer></st-footer>
</st-common>
service-page.tag // page
<st-service-page>
<st-common>
<st-service></st-service>
</st-common>
<st-service-page>
profile-page.tag // page
<st-profile-page>
<st-common>
<st-profile></st-profile>
</st-common>
<st-profile-page>
service-view.tag
<st-service>
// html / code body related to module
</st-service>
profile-view.tag
<st-profile>
// html / code body related to module
</st-profile>
If needed in details about this I can explain.
I'd have to know more about how you're routing to say for sure, but I think you should avoid using a different outer tag for each page. If your HTML looks something like this:
<body>
<st-app />
<script>
const pages = {
"/": "st-home",
"/about/": "st-about",
}
const content_tag = pages[window.location.pathname] || "st-notfound"
riot.mount("st-app", {
content_tag: content_tag
})
</script>
</body>
Then <st-app> would be defined something like:
<st-app>
<st-alert></st-alert>
<st-header></st-header>
<div data-is={this.opts.content_page}></div>
<st-footer></st-footer>
</st-app>
The important thing here being that you're controlling which tag should be used via the data-is attribute and the mounting options for <st-app>. In this example <st-home>, <st-about>, and <st-notfound> are riot components defined elsewhere.
I'm working with express right now. I've built just a simple form that goes to a pug page generated via express after submitting:
form.create-list(action='/test', method='get')
fieldset
legend Add your item
label(for='item-name') Item:
input#name(type='text', name='name', required='')
br
label(for='item-name') Quantity:
input#quantity(type='text', name='quantity', required='')
br
br
input(type='submit')
With the get method, I can see the name properties behind pulled into my URL: http://localhost:4000/test?name=hello&quantity=there
I would like to display specifically the name/quantity parameters on my pug page, but have been unsuccessful. In my routing file I used:
router.get('/test/:name', function(req, res, next) {
res.render('layout', {'title': req.param("name")});
});
And in my pug template just added the below line:
p #{title}
Shouldn't that work? I'm not sure what I'm missing here. Anybody have any suggestions?
The value you should be looking for is req.query.name instead of req.params.name
I'm trying to learn Ember js, doing some experiments, so far not much success, but slowly moving forward.
But now I got stuck, I'm trying to create a dynamic tabs without router. I have these two fiddles
http://jsfiddle.net/drulia/BzRUF/
http://jsfiddle.net/drulia/uNNXy/
one simple, keeping references in the controller and another one with ContainerView, but I have stuck on both approaches. I tried StateManager as well, but once again with no luck.
Problem in first fiddle is that I found no other way to get element's content in the View than using this._parentView.get('content'); which is not right because I'm not suppose to use anything with prefix _ . But I have no idea how else I can actually check if element belongs to active tab.
Second fiddle main problem is that I have no clue how can I attach content to the tabs. Also struggling with ability to remove tabs, because {{action remove this target="App.Tabs"}} allways points to the same element.
I been reading all guides and API on http://emberjs.com, also was reading plenty of other tutorials, most of them have no real value because they outdated, especially for me newbie, because it is already hard enough to attach together up to date pieces provided in the official page.
This todo app example though, was very useful https://github.com/trek/ember-todos-with-build-tools-tests-and-other-modern-conveniences It is very good quality, but areas like tabs is handwritten and they work via router.
To sum-up, at the moment the Views is quite a mystery for me, so any light helping out with dynamic tabs would be much appreciated.
Solution
http://jsfiddle.net/drulia/BzRUF/9/
Not perfect, but does the job, you can navigate, create and delete the tabs.
To make it really usable, there should be some id's with tabs, so then tabs could have same title. But the idea is there and I truly hope that someone will find it useful.
Below are main part from of js to get the idea what's going on
App.IndexController = Ember.ArrayController.extend({
tabs: ['Tab1','Tab2'],
activeTab: 'Tab1',
counter: 2,
closeTab: function(tab) {
var i = this.tabs.indexOf(tab);
this.tabs.removeAt(i);
if(tab === this.activeTab)
this.set('activeTab',this.tabs.objectAt(0));
},
createTab: function() {
var newTab = 'Tab' + ++this.counter;
this.tabs.pushObject(newTab);
this.set('activeTab',newTab);
}
});
App.TabInputView = Ember.TextArea.extend({
placeholder: function() {
return 'Empty Area of ' + this.tab;
}.property(),
isVisible: function(s) {
var activeTab = this.get('controller.activeTab');
return Boolean(activeTab === this.tab);
}.property('controller.activeTab')
});
And here the main part of html
{{#each tab in tabs}}
{{#view App.TabView tabBinding="tab"}}
{{tab}} <span class="close" {{action closeTab tab bubbles=false}}>x</span>
{{/view}}
{{/each}}
<button {{action createTab}}>+</button>