In the features tag on the homepage layout of the Vuepress, any markdown notation can't be used due to get the error.
So, I'd like to make my custom layout which is extended from the default homepage layout and to get possible to use markdown.
Is this possible? Any suggestion is welcome, thank you!
I agree with #Sun Haoran's answer, but want to note a good way to add content/html is using a component.
We created a front page component called HomeFeatures.vue. (see the repo) Also, we pretty much just copied this straight from vuepress.
<template>
<div class="features">
<div class="feature">
<h2>AccuTerm</h2>
<p>
Getting Started<br />
Licensing<br />
Desktop<br />
Web<br />
Mobile
</p>
</div>
<div class="feature">
<h2>jBASE</h2>
<p>All Docs<br /></p>
</div>
<div class="feature">
<h2>OpenQM</h2>
<p>Main (Coming Soon!)<br /></p>
</div>
<div class="feature">
<h2>MV Dashboard</h2>
<p>
Introduction<br />
Installation Guide<br />
Programmers Guide
</p>
</div>
<div class="feature">
<h2>MV Connect</h2>
<p>
Overview<br />
Getting Started<br />
API
</p>
</div>
<div class="feature">
<h2>Customer Portal</h2>
<p>
All Docs
</p>
</div>
</div>
</template>
<script>
export default {
name: 'Features'
};
</script>
And just included it like so: (see the repo)
---
home: true
heroImage: /assets/img/logo-grey.png
heroText: Product Documentation
tagline: Welcome to the future
footer: MIT Licensed | Copyright © 2019-present Company Name
---
<HomeFeatures />
Our docs live here if you'd like to see it in action.
Currently, you can't without going through a lot of trouble. The default theme's homepage is using YAML front matter to pass on user config texts, which will not be parsed as markdown.
Personally, I suggest you try to use HTML directly with a customized layout. To use a customized layout for the homepage, check my other answer, and to use HTML see the relavent issue in VuePress #2186
Related
Say I have this simple scaffold in my app_component.html:
<header>
<div>
<!-- here I have some elements that won't change -->
</div>
<div>
<!-- SECTION HEADER: but I want to change this part's content, based on
navigation or something else (auth roles, for example) -->
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<section class="section">
<router-outlet>
<!-- SECTION MAIN: main content goes here -->
</router-outlet>
</section>
</div>
</div>
</div>
</main>
<div class="divider"></div>
<footer>
<div>
some footer here. nothing important
</div>
</footer>
As you can see in the snippet, I'm using a <router-outlet> in SECTION MAIN to show contents which is fine. The problem is, how can I have a changeable part in header section (the SECTION HEADER in the code) and how can I change it's content based on e.g. navigation, auth roles, etc. ? Does AngularDart support this kind of routing? Thanks in advance.
The short answer is no, the router doesn't currently have support for doing this easily.
Other frameworks support this functionality through "named" router outlets. This allows multiple outlets to exist in the same view, provided they're given unique names. Each route configuration then must designate which component is rendered in which named outlet. If this sounds desirable, please feel free to file a feature request: https://github.com/dart-lang/angular
Of course you could always write your own solution. You could create a component for the header section that dynamically loads a different component, depending on which route is active. It simply needs to inject Router and listen to Router.stream for route changes.
I am using alvarotrigo full page js for wordpress. It works very fine, but there is only an issue for scroll.
As you may know, the basic structure is like this.
<div id="fullpage">
<div class="section">One</div>
<div class="section">
<div class="slide">Two 1</div>
<div class="slide">Two 2</div>
</div>
<div class="section">Three</div>
<div class="section">Four</div>
</div>
However there are sometimes a temporary (dynamic) div or script or style elementary by user's dynamic setting.
http://jsfiddle.net/97tbk/1477/
As you see there are 2 example elementary by user's dynamic settings and scroll is not working to move "four". because of temp style tags, clear div.
Isn't it possible to work scrolling only for "[div class="section"]..[/div]"?
then scroll doesn't need to care other elementary or html tags.
I have tried "sectionSelector". but it's not working for scrolling.
1 more question. The temp style is created by user's dynamic setting. Isn't it possible to move into <head>..</head> automatically? Maybe by script?
You shouldn't have anything between sections. fullPage.js requires a specific structure and you are not following it.
<div id="fullpage">
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
<div class="section">Some section</div>
</div>
You should be asking yourself, why do you have those style tags in between sections and not directly in the <head> where they belong.
I am trying to create a single opt in mailchimp form.
I think they've removed the check box to disable double in verification. wufoo.com creates a form that integrates with mailchimp, it works, but it's their form, and shows a large reference to their site.
Can I modify the mailchimp-generated form to create a single opt effect as well?
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//mynewhealingsite.us3.list-manage.com/subscribe/post?u=1234a5678b80av686fd86a7d7&id=269cdca319" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<label for="mce-EMAIL">Subscribe to our mailing list</label>
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_1234a5678b80av686fd86a7d7_269cdca319" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
All forms provided directly by MailChimp, including their embed code option, only allow double opt-in. So their is no modification of their original form(s) capable of providing single opt-in.
This guide from their docs denotes this: Double Opt-In Signup Form FAQ's
That said, their API can be used to build out custom single opt-in forms. Alternatively, if that is not an option finding a form integration provider like Wufoo as you've done, that have pre-built a single opt-in solution, may be best.
This page from their API 3.0 docs goes over working with subscribers: Manage Subscribers
On Nov. 3, 2017, MailChimp added single opt-in functionality to signup forms. Here is the announce.
Here is the instruction on how to switch between single opt-in and double opt-in. It doesn't change form HTML, so there is no need to change existing markup.
I want to implement schema markup for a mobile app website. I read schema.org/MobileApplication, but there are lot of properties. I am not getting which property are useful to give more effective output for local search?
The schema is important to every website page. Do not confuse, use a required property to your mobile application website.
Schema markup allows search engine to analyze vast information in shortcut method. For Mobile app website you would like to use properties like- downloadUrl, countriesSupported, fileSize, about, author, description and image.
data-structures schema google-local-search
<div itemscope itemtype="http://schema.org/SoftwareApplication">
<span itemprop="name">Angry Birds</span> -
REQUIRES <span itemprop="operatingSystem">ANDROID</span>
<link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>
RATING:
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.6</span> (
<span itemprop="ratingCount">8864</span> ratings )
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Price: $<span itemprop="price">1.00</span>
<meta itemprop="priceCurrency" content="USD" />
</div>
</div>
I apologize if I'm repeating a question. please link to the location that contains the answer I'm looking for, because I couldn't find it.
I looked at the documentation, and it didn't help. http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Minimum_Setup
http://www.elated.com/articles/adding-wysiwyg-editor-to-your-site/
link above is the tutorial I used to get the code below.
I'm struggling to find any good help and I've looked for an hour.
My Goal: to allow my users to click on a link that takes them to another page, where they can write notes and save them for their own personal use in the future. They will have their own login, so their notes are only visible to them and people they give access to.
After researching on StackOverflow, I feel like ckeditor would be the best tool for the job.
Here are my attempts at installing it. (ps. I have downloaded the folder from the site so I doubt "installing" is the correct term.)
My Script tags in the head:
<script type = "text/javascript" src="ckeditor/ckeditor.js"></script>
<script>
window.onload = function () {
CKEDITOR.replaceAll('wysiwyg');
};
</script>
My first webform attempt:
CKEDITOR.replace( 'fieldname');
<textarea id="userNotes" class="wysiwyg"><strong>test</strong></textarea>
My WebForm copy paste from tutorial above:
<form action="form_handler.php" method="post">
<div>
<textarea cols="80" rows="10" id="content" name="content">
<h1>Article Title</h1>
<p>Here's some sample text</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'articleContent' );
</script>
<input type="submit" value="Submit"/>
</div>
Everything I have tried so far gives me a textarea with plain text inside, and that is not how it is supposed to look.
To reiterate my question, how do I properly setup/link my ckeditor files inside my html file and web form to get ckeditor to actually work?
Question Part two: Am I even approaching my goal correctly? is ckeditor a good solution for my goal to allow users to create notes?
Try
CKEDITOR.replace('content');
This is the ID and name of the textbox so you need to target that.
<textarea cols="80" rows="10" id="content" name="content">
<h1>Article Title</h1>
<p>Here's some sample text</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('content');
</script>
Here is the documentation. I am assuming you're using ASP.Net.
If you follow the above tutorial, you can then add CKEditor by:
<CKEditor:CKEditorControl ID="CKEditor1" runat="server">
</CKEditor:CKEditorControl>