Skip to content

Commit 8a6a386

Browse files
uttamukkojiuttamukkoji
committed
layout added
1 parent 0ae3416 commit 8a6a386

File tree

1 file changed

+260
-0
lines changed

1 file changed

+260
-0
lines changed

‎contentstack-templates/tmpl/layout.tmpl‎

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title><?js= title ?> - Documentation</title>
6+
<link rel="shortcut icon" href="./favicon.ico">
7+
<script src="scripts/prettify/prettify.js"></script>
8+
<script src="scripts/prettify/lang-css.js"></script>
9+
<!--[if lt IE 9]>
10+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11+
<![endif]-->
12+
<link rel="canonical" href="https://www.contentstack.com/docs/developers/javascript-browser/api-reference/">
13+
<link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
14+
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
15+
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
16+
<!-- Google Tag Manager -->
17+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
18+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
19+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
20+
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
21+
})(window,document,'script','dataLayer','GTM-WGP99J7');</script>
22+
<!-- End Google Tag Manager -->
23+
</head>
24+
<body>
25+
<!-- Google Tag Manager (noscript) -->
26+
<noscript><iframe title="Google Tag Manager" src="https://www.googletagmanager.com/ns.html?id=GTM-WGP99J7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
27+
<!-- End Google Tag Manager (noscript) -->
28+
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
29+
<label for="nav-trigger" class="navicon-button x">
30+
<div class="navicon"></div>
31+
</label>
32+
33+
<label for="nav-trigger" class="overlay"></label>
34+
35+
<nav>
36+
<?js= this.nav ?>
37+
</nav>
38+
39+
<div id="main">
40+
<?js if (title != 'Home') { ?>
41+
<h1 class="page-title"><?js= title ?></h1>
42+
<?js } else { ?>
43+
<h1 class="page-title">Contentstack - Javascript Delivery SDK</h1>
44+
<div id="installation" class="group">
45+
<h2><a id="JavaScript_SDK_for_Contentstack_1"></a>JavaScript Delivery SDK for Contentstack</h2>
46+
<p>Contentstack is a headless CMS with an API-first approach. It is a CMS that developers can use to build powerful cross-platform applications in their favorite languages. Build your application frontend, and Contentstack will take care of the rest. <a href="https://www.contentstack.com/">Read More</a>.</p>
47+
<p>Contentstack provides JavaScript Delivery SDK to build application on top of JavaScript. Given below is the detailed guide and helpful resources to get started with our JavaScript Delivery SDK.</p>
48+
<p>The JavaScript Delivery SDK can also be used to create Node.js and React native applications.</p>
49+
<h3><a id="Prerequisite_9"></a>Prerequisite</h3>
50+
<p>You need Node.js version 4.4.7 or later installed to use the Contentstack JavaScript Delivery SDK.</p>
51+
<h3><a id="Setup_and_Installation_13"></a>Setup and Installation</h3>
52+
<h4><a id="For_JavaScript_Browser_15"></a>For JavaScript (Browser)</h4>
53+
<p>To use the JavaScript Delivery SDK, download it from <a href="https://www.contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest">here</a> and include it in the &lt;script&gt; tag:</p>
54+
<pre class="prettyprint"><code>&lt;script type="text/javascript" src="/path/to/contentstack.min.js"&gt;&lt;/script&gt;;
55+
</code></pre>
56+
<p>To initialize the SDK, you will need to specify the API Key, Delivery Token, and Environment Name of your stack.</p>
57+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
58+
</code></pre>
59+
60+
<p>To initialize the SDK for European Region you want to set and use European region, refer to the code below:</p>
61+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment", "region": Contentstack.Region.EU });
62+
</code></pre>
63+
64+
<h4><a id="For_Nodejs_25"></a>For Node.js</h4>
65+
<p>Node.js uses the Javascript SDK to create apps. To use the JavaScript Delivery SDK, download it from <a href="https://www.contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest">here</a>, OR install it via npm:</p>
66+
<pre class="prettyprint"><code>npm i contentstack
67+
</code></pre>
68+
<p>To import the SDK in your project, use the following command:</p>
69+
<pre class="prettyprint"><code>import contentstack from ‘contentstack’
70+
</code></pre>
71+
<p>To initialize the SDK, you will need to specify the API Key, Delivery Token, and Environment Name of your stack.</p>
72+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment");
73+
</code></pre>
74+
<p>To initialize the SDK for European Region you want to set and use European region, refer to the code below:</p>
75+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment", "region": Contentstack.Region.EU });
76+
</code></pre>
77+
<h4><a id="For_React_Native_39"></a>For React Native</h4>
78+
<p>React Native uses the Javascript SDK to create apps. To use the JavaScript Delivery SDK, download it from <a href="https://www.contentstack.com/docs/platforms/javascript-browser/javascript_sdk_latest">here</a>, OR install ist via npm:</p>
79+
<pre class="prettyprint"><code>npm i contentstack
80+
</code></pre>
81+
<p>To import the SDK in your project, use the following command:</p>
82+
<pre class="prettyprint" class="prettyprint"><code>import contentstack from `contentstack/react-native`
83+
</code></pre>
84+
<p>To initialize the SDK, you will need to specify the API Key, Delivery Token, and Environment Name of your stack.</p>
85+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
86+
</code></pre>
87+
<p>To initialize the SDK for European Region you want to set and use European region, refer to the code below:</p>
88+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment", "region": Contentstack.Region.EU };
89+
</code></pre>
90+
<h3><a id="Key_Concepts_for_using_Contentstack_54"></a>Key Concepts for using Contentstack</h3>
91+
<h4><a id="Stack_56"></a>Stack</h4>
92+
<p>A stack is like a container that holds the content of your app. Learn more about <a href="https://www.contentstack.com/docs/guide/stack">Stacks</a>.</p>
93+
<h4><a id="Content_Type_60"></a>Content Type</h4>
94+
<p>Content type lets you define the structure or blueprint of a page or a section of your digital property. It is a form-like page that gives Content Managers an interface to input and upload content. <a href="https://www.contentstack.com/docs/guide/content-types">Read more</a>.</p>
95+
<h4><a id="Entry_64"></a>Entry</h4>
96+
<p>An entry is the actual piece of content created using one of the defined content types. Learn more about <a href="https://www.contentstack.com/docs/guide/content-management#working-with-entries">Entries</a>.</p>
97+
<h4><a id="Asset_68"></a>Asset</h4>
98+
<p>Assets refer to all the media files (images, videos, PDFs, audio files, and so on) uploaded to Contentstack. These files can be used in multiple entries. Read more about <a href="https://www.contentstack.com/docs/guide/content-management#working-with-assets">Assets</a>.</p>
99+
<h4><a id="Environment_72"></a>Environment</h4>
100+
<p>A publishing environment corresponds to one or more deployment servers or a content delivery destination where the entries need to be published. Learn how to work with <a href="https://www.contentstack.com/docs/guide/environments">Environments</a>.</p>
101+
<h3><a id="Contentstack_JavaScript_SDK_5minute_Quickstart_78"></a>Contentstack JavaScript Delivery SDK: 5-minute Quickstart</h3>
102+
<h4><a id="Initializing_your_SDK_80"></a>Initializing your SDK</h4>
103+
<p>You will need to specify the API key, Access token, and Environment Name of your stack to initialize the SDK:</p>
104+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
105+
</code></pre>
106+
<p>Once you have initialized the SDK, you can start getting content in your app.</p>
107+
<h4><a id="Querying_content_from_your_stack_90"></a>Querying content from your stack</h4>
108+
<p>To get a single entry, you need to specify the content type as well as the ID of the entry.</p>
109+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
110+
111+
const Query = Stack.ContentType('blog').Entry("entry_uid");
112+
113+
Query.fetch()
114+
.then(function success(entry) {
115+
console.log(entry.get('title')); // Retrieve field value by providing a field's uid
116+
console.log(entry.toJSON()); // Convert the entry result object to JSON
117+
}, function error(err) {
118+
// err object
119+
});
120+
</code></pre>
121+
<p class="note"><strong>Note</strong>: We have a method on query for a specific language. For example, consider the following query:
122+
<pre class="prettyprint"><code>Stack.ContentType(type).Query().language('fr-fr').toJSON().find()</code></pre>
123+
It will provide all entries of a content type published on the French locale.</p>
124+
<p>To retrieve multiple entries of a content type, you need to specify the content type uid. You can also specify search parameters to filter results.</p>
125+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
126+
127+
const Query = Stack.ContentType('blog').Query();
128+
129+
Query
130+
.where("title", "welcome")
131+
.includeSchema()
132+
.includeCount()
133+
.toJSON()
134+
.find()
135+
.then(function success(result) {
136+
// result is array where -
137+
// result[0] =&amp;gt; entry objects
138+
// result[result.length-1] =&amp;gt; entry objects count included only when .includeCount() is queried.
139+
// result[1] =&amp;gt; schema of the content type is included when .includeSchema() is queried.
140+
}, function error(err) {
141+
// err object
142+
});
143+
</code></pre>
144+
<p class="note"><strong>Note:</strong> Currently, the JavaScript SDK does not support multiple content types referencing in a single query. For more information on how to query entries and assets, refer the <a href="/docs/developers/apis/content-delivery-api/#queries">Queries</a> section of our Content Delivery API documentation.</p>
145+
146+
<h4><a id="Paginating_Responses"></a>Paginating Responses</h4>
147+
<p>In a single instance, the Get Multiple Entries query will retrieve only the first 100 items of the specified content type. You can paginate and retrieve the rest of the items in batches using the <a href="/docs/platforms/javascript-browser/api-reference/Query.html#skip">skip</a> and <a href="/docs/platforms/javascript-browser/api-reference/Query.html#limit">limit</a> parameters in subsequent requests.</p>
148+
149+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
150+
let blogQuery = Stack.ContentType('example').Query();
151+
let data = blogQuery.skip(20).limit(20).find()
152+
data.then(function(result) {
153+
// result is array where -
154+
// result[0] =&amp;gt; entry objects
155+
},function (error) {
156+
// error function
157+
})</code></pre>
158+
159+
<h4><a id="Querying_content_from_your_stack_90"></a>Querying Assets from your stack</h4>
160+
<p>To get a single asset, you need to specify the UID of the asset.</p>
161+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
162+
163+
const Asset = Stack.Asset("<asset_uid>");
164+
165+
Asset.fetch()
166+
.then(function success(asset) {
167+
console.log(asset.get('title')); // Retrieve field value by providing a field's uid
168+
console.log(asset.toJSON()); // Convert the entry result object to JSON
169+
}, function error(err) {
170+
// err object
171+
});
172+
</code></pre>
173+
<p>To retrieve multiple assets. You can also specify search parameters to filter results.</p>
174+
<pre class="prettyprint"><code>const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
175+
176+
const Query = Stack.Asset().Query();
177+
178+
Query
179+
.limit(20)
180+
.toJSON()
181+
.find()
182+
.then(function success(result) {
183+
// result is array where -
184+
// result[0] =&amp;gt; asset objects
185+
}, function error(err) {
186+
// err object
187+
});
188+
</code></pre>
189+
190+
191+
<h4><a id="Cache_Policies_123"></a>Cache Policies</h4>
192+
<p>You can set a cache policy on a stack and/or query object.</p>
193+
<h5><a id="Setting_a_cache_policy_on_a_stack_127"></a>Setting a cache policy on a stack</h5>
194+
<p>This option allows you to globalize a cache policy. This means the cache policy you set will be applied to all the query objects of the stack.</p>
195+
<pre class="prettyprint"><code>//Setting a cache policy on a stack
196+
Stack.setCachePolicy(Contentstack.CachePolicy.NETWORK_ELSE_CACHE)
197+
</code></pre>
198+
<h5><a id="Setting_a_cache_policy_on_a_query_object_134"></a>Setting a cache policy on a query object</h5>
199+
<p>This option allows you to set/override a cache policy on a specific query object.</p>
200+
<pre class="prettyprint"><code>// setting a cache policy on a queryobject
201+
Query.setCachePolicy(Contentstack.CachePolicy.CACHE_THEN_NETWORK)
202+
</code></pre>
203+
<h3><a id="Advanced_Queries_141"></a>Advanced Queries</h3>
204+
<p>You can query for content types, entries, assets and more using our JavaScript API Reference.</p>
205+
<p><a href="https://www.contentstack.com/docs/platforms/javascript-browser/api-reference/">JavaScript API Reference Doc</a></p>
206+
<h3><a id="Working_with_Images_147"></a>Working with Images</h3>
207+
<p>We have introduced Image Delivery APIs that let you retrieve images and then manipulate and optimize them for your digital properties. It lets you perform a host of other actions such as crop, trim, resize, rotate, overlay, and so on.</p>
208+
<p>For example, if you want to crop an image (with width as 300 and height as 400), you simply need to append query parameters at the end of the image URL, such as, <a href=" https://images.contentstack.io/owl.jpg?crop=300,400"> https://images.contentstack.io/owl.jpg?crop=300,400</a>. There are several more parameters that you can use for your images.</p>
209+
<p><a href="https://www.contentstack.com/docs/apis/image-delivery-api/">Read Image Delivery API documentation</a>.</p>
210+
211+
<h5><a id="Following_are_Image_Delivery_API_examples_203"></a>Following are Image Delivery API examples</h5>
212+
<p>Following are Image Delivery API examples.</p>
213+
<pre class="prettyprint"><code>
214+
// Set the quality 100
215+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
216+
217+
const imageUrl = Stack.imageTransform(imageUrl, {
218+
'quality': 100
219+
})
220+
</code></pre>
221+
<pre class="prettyprint"><code>
222+
// set the quality to 100, auto optimization, width and height
223+
const Stack = Contentstack.Stack({ "api_key": "api_key", "delivery_token": "delivery_token", "environment": "environment" });
224+
225+
const imageUrl = Stack.imageTransform(imageUrl, {
226+
'quality': 100,
227+
'auto': 'webp',
228+
'width': 100,
229+
'height': 100
230+
})
231+
</code></pre>
232+
<h3><a id="Helpful_Links_157"></a>Helpful Links</h3>
233+
<ul>
234+
<li><a href="https://www.contentstack.com">Contentstack Website</a></li>
235+
<li><a href="https://www.contentstack.com/docs">Official Documentation</a></li>
236+
<li><a href="https://www.contentstack.com/docs/apis/content-delivery-api/">Content Delivery API Docs</a></li>
237+
</ul>
238+
<h3><a id="The_MIT_License_MIT_163"></a>The MIT License (MIT)</h3>
239+
<p>Copyright © 2016-2021 <a href="https://www.contentstack.com">Contentstack</a>. All Rights Reserved</p>
240+
<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>
241+
<p>The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>
242+
<p>THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>
243+
</div>
244+
</div>
245+
<?js } ?>
246+
<?js= content ?>
247+
</div>
248+
249+
<br class="clear">
250+
251+
<footer>
252+
<div class="inner-content center">
253+
<span class="copy-right"><a href="mailto:support@contentstack.com" target="_self">support@contentstack.com</a> | © 2016-2020 Contentstack. All rights reserved.</span>
254+
</div>
255+
</footer>
256+
257+
<script>prettyPrint();</script>
258+
<script src="scripts/linenumber.js"></script>
259+
</body>
260+
</html>

0 commit comments

Comments
 (0)