{"id":311551,"date":"2020-10-16T09:00:30","date_gmt":"2020-10-16T09:00:30","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=311551"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=311551","title":{"rendered":"\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0431\u043b\u043e\u0433\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Nuxt Content (\u0447\u0430\u0441\u0442\u044c \u0432\u0442\u043e\u0440\u0430\u044f)"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/523074\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9x\/dz\/ew\/9xdzewrcn6hhjqqfh_kk6v5tyaq.jpeg\" alt=\"\u043e\u0431\u043b\u043e\u0436\u043a\u0430\"><br \/>  \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c Nuxt Content.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 <a href=\"https:\/\/habr.com\/ru\/post\/522496\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0443\u0437\u043d\u0430\u0435\u043c \u043a\u0430\u043a \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 API Content \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n<p><a name=\"habracut\"><\/a>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><video controls style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute;\">Your browser does not support HTML5 video.<source src=\"https:\/\/res.cloudinary.com\/nuxt\/video\/upload\/v1588091670\/demo-blog-content_shk6kw.webm\" type=\"video\/webm\"><\/source><\/video><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<p> <a href=\"https:\/\/blog-with-nuxt-content.netlify.app\/\" rel=\"nofollow\">\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0434\u0435\u043c\u043e<\/a> \/<br \/>   <a href=\"https:\/\/github.com\/nuxt-company\/demo-blog-nuxt-content\" rel=\"nofollow\">\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434<\/a>  <\/p>\n<p>  <\/p>\n<h2 id=\"oglavlenie\">\u041e\u0433\u043b\u0430\u0432\u043b\u0435\u043d\u0438\u0435:<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"#dobavlenie-komponenta-author-i-peredacha-emu-vhodyaschih-parametrov\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Author \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0435\u043c\u0443 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/a><\/li>\n<li><a href=\"#dobavlenie-bloka-s-kodom-v-statyu\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0430 \u0441 \u043a\u043e\u0434\u043e\u043c \u0432 \u0441\u0442\u0430\u0442\u044c\u044e<\/a><\/li>\n<li><a href=\"#sozdanie-komponenta-predyduschey-i-sleduyuschey-stati\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a><\/li>\n<li><a href=\"#rabota-s-api\">\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 API<\/a><\/li>\n<li><a href=\"#spisok-vseh-statey\">\u0421\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u0442\u0435\u0439<\/a><\/li>\n<li><a href=\"#ispolzovanie-zaprosa-where-dlya-sozdaniya-stranicy-avtora\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 where \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0432\u0442\u043e\u0440\u0430<\/a><\/li>\n<li><a href=\"#dobavlyaem-pole-poiska\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430<\/a><\/li>\n<li><a href=\"#redaktirovanie-kontenta-v-rezhime-realnogo-vremeni\">\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/a><\/li>\n<li><a href=\"#generaciya-prilozheniya\">\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/a><\/li>\n<li><a href=\"#zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#dalneyshee-izuchenie\">\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435<\/a><\/li>\n<\/ul>\n<p>  <\/p>\n<h3 id=\"dobavlenie-komponenta-author-i-peredacha-emu-vhodyaschih-parametrov\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Author \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0435\u043c\u0443 \u0432\u0445\u043e\u0434\u044f\u0449\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432<\/h3>\n<p>  <\/p>\n<p>\u0414\u0440\u0443\u0433\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 YAML \u0440\u0430\u0437\u0434\u0435\u043b\u0435 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0445 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 props. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435, \u0438 \u0435\u0441\u043b\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u043a, \u043f\u0438\u0448\u0443\u0449\u0438\u0445 \u0434\u043b\u044f \u0431\u043b\u043e\u0433\u0430, \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435 \u0431\u0443\u0434\u0443\u0442 \u043c\u0435\u043d\u044f\u0442\u044c\u0441\u044f \u043e\u0442 \u0441\u0442\u0430\u0442\u044c\u0438 \u043a \u0441\u0442\u0430\u0442\u044c\u0435. \u0412 \u043d\u0430\u0448\u0435\u043c markdown \u0444\u0430\u0439\u043b\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u043e\u0432\u044b\u0439 \u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u0448\u0430\u043f\u043a\u0443 \u0444\u0430\u0439\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0438\u043c\u044f \u0430\u0432\u0442\u043e\u0440\u0430, \u0431\u0438\u043e\u0433\u0440\u0430\u0444\u0438\u044e \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">--- author:   name: Benjamin   bio: All about Benjamin   image: https:\/\/images.unsplash.com\/..... --- <\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0430\u0432\u0442\u043e\u0440\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">touch components\/global\/Author.vue<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u043d\u0435\u043c \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c div, \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0449\u0438\u0439 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435: \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c Author, \u0438\u043c\u0435\u043d\u0435\u043c \u0438 \u0431\u0438\u043e\u0433\u0440\u0430\u0444\u0438\u0435\u0439 \u0430\u0432\u0442\u043e\u0440\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;template&gt;   &lt;div&gt;     &lt;img :src=&quot;author.image&quot; \/&gt;     &lt;div&gt;       &lt;h4&gt;Author&lt;\/h4&gt;       &lt;p&gt;{{ author.name }}&lt;\/p&gt;       &lt;p&gt;{{ author.bio }}&lt;\/p&gt;     &lt;\/div&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u0421\u0442\u0438\u043b\u0438 \u0431\u044b\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0438\u0437 \u044d\u0442\u0438\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 <a href=\"https:\/\/github.com\/nuxt-company\/demo-blog-nuxt-content\" rel=\"nofollow\">\u043e\u0442\u0441\u044e\u0434\u0430<\/a>.<\/p><\/blockquote>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u0442\u0435\u0433\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 props \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e author, \u0442\u0438\u043f \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0438\u043c \u043a\u0430\u043a Object, \u0430 \u0434\u043b\u044f required \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 true.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script&gt;   export default {     props: {       author: {         type: Object,         required: true       }     }   } &lt;\/script&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0444\u0430\u0439\u043b <code>my-first-blog-post.md<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u043e\u0431\u044a\u0435\u043a\u0442 <code>author<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"markdown\">&lt;author :author=&quot;author&quot; \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0420\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0432 \u0444\u0430\u0439\u043b\u0435 \u0441 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u043e\u0439 \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044f\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u043b\u0443\u0447\u0448\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d _slag. \u0422\u043e\u043b\u044c\u043a\u043e \u0442\u0435\u043f\u0435\u0440\u044e \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e <code>author<\/code> \u043d\u0430 <code>article.author<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;template&gt;   &lt;article&gt;     &lt;h1&gt;{{ article.title }}&lt;\/h1&gt;     &lt;p&gt;{{ article.description }}&lt;\/p&gt;     &lt;img :src=&quot;article.img&quot; :alt=&quot;article.alt&quot; \/&gt;     &lt;p&gt;Article last updated: {{ formatDate(article.updatedAt) }}&lt;\/p&gt;      &lt;nuxt-content :document=&quot;article&quot; \/&gt;      &lt;author :author=&quot;article.author&quot; \/&gt;   &lt;\/article&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 <code>global<\/code> \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 \u043f\u0430\u043f\u043a\u0443 <code>components<\/code>, \u0438 \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432 _slag.vue, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0435\u0433\u043e \u0432 \u0448\u0430\u0431\u043b\u043e\u043d\u0435.<\/p>\n<p>  <\/p>\n<h3 id=\"dobavlenie-bloka-s-kodom-v-statyu\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0431\u043b\u043e\u043a\u0430 \u0441 \u043a\u043e\u0434\u043e\u043c \u0432 \u0441\u0442\u0430\u0442\u044c\u044e<\/h3>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/prismjs.com\/\" rel=\"nofollow\">prismJS<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043a \u043f\u043e\u0441\u0442\u0443. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 markdown \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441, \u0438 \u043d\u0430\u0448 \u0431\u043b\u043e\u043a \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0442\u0438\u043b\u044f\u043c\u0438 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u044f\u0437\u044b\u043a\u0430.<\/p>\n<p>  <\/p>\n<pre> ```js export default {   nuxt: 'is the best' } ``` ```html &lt;p&gt;code styling is easy&lt;\/p&gt; ``` <\/pre>\n<p>  <\/p>\n<p>\u0412 \u0438\u0442\u043e\u0433\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043a\u0430\u043a:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/en\/vy\/_o\/envy_osvkmklhouqy1cjavghupc.png\" alt=\"image\"><\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u0443\u0441\u043e\u043a \u043a\u043e\u0434\u0430, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0435\u0433\u043e \u0432 \u043a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0445 \u0441\u043a\u043e\u0431\u043a\u0430\u0445 \u043f\u043e\u0441\u043b\u0435 \u044f\u0437\u044b\u043a\u0430 \u0431\u043b\u043e\u043a\u0430 \u043a\u043e\u0434\u0430.<\/p>\n<p>  <\/p>\n<pre> ```js[my-first-blog-post.md] export default {   nuxt: 'is the best' } ``` <\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043c:<br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qn\/b7\/6c\/qnb76c5of50k_xbzq1ia0bpixyw.png\" alt=\"image\"><\/p>\n<p>  <\/p>\n<blockquote><p>\u041f\u0440\u0438\u043c. \u043f\u0435\u0440.: \u0411\u044b\u043b\u043e \u0431\u044b \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0435 \u0436\u0435 \u0434\u043b\u044f \u0425\u0430\u0431\u0440\u0430. \u0415\u0441\u043b\u0438 \u0442\u0430\u043a\u0430\u044f \u0444\u0438\u0447\u0430 \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442, \u043f\u043e\u0434\u0441\u043a\u0430\u0436\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0445. <\/p><\/blockquote>\n<p>\u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u043e \u0432 span \u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u043c <code>filename<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u043e\u0444\u043e\u0440\u043c\u0438\u0442\u044c \u0442\u0430\u043a, \u043a\u0430\u043a \u043d\u0430\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u043a\u043b\u0430\u0441\u0441\u044b tailwind, \u043d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0431\u044b\u0447\u043d\u044b\u0439 CSS, \u0435\u0441\u043b\u0438 \u0445\u043e\u0442\u0438\u0442\u0435.<\/p>\n<p>  <\/p>\n<p>\u041a\u043e\u0434 \u0432 \u0444\u0430\u0439\u043b\u0435 <code>assets\/css\/tailwind.css<\/code>:<\/p>\n<p>  <\/p>\n<pre><code class=\"css\">.nuxt-content-highlight {   @apply relative; } .nuxt-content-highlight .filename {   @apply absolute right-0 text-gray-600 font-light z-10 mr-2 mt-1 text-sm; }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e \u0442\u0435\u043c\u0443, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/github.com\/PrismJS\/prism-themes\" rel=\"nofollow\">prism-themes<\/a>, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0435\u0435, \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0451 \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043a\u043e\u0444\u0438\u0433\u0430 \u0432 <code>nuxt.config<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">npm install prism-themes \/\/ or yarn add prism-themes<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 <code>nuxt.config<\/code> \u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445 content \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 markdown \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c prism \u0438 \u0432 theme \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0442\u0435\u043c\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">content: {   markdown: {     prism: {       theme: 'prism-themes\/themes\/prism-material-oceanic.css'     }   } }<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"sozdanie-komponenta-predyduschey-i-sleduyuschey-stati\">\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/h3>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u0439 \u043f\u043e\u0441\u0442 \u0432 \u0431\u043b\u043e\u0433\u0435, \u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0437\u0434\u043e\u0440\u043e\u0432\u043e, \u0435\u0441\u043b\u0438 \u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u043b\u0438 \u043b\u0435\u0433\u043a\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u043a \u0434\u0440\u0443\u0433\u043e\u043c\u0443. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0440\u043e\u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0435\u043c \u043d\u0430\u0448 \u043f\u043e\u0441\u0442, \u0447\u0442\u043e\u0431\u044b \u0443 \u043d\u0430\u0441 \u0431\u044b\u043b\u043e 3 \u043f\u043e\u0441\u0442\u0430. \u0417\u0430\u0442\u0435\u043c \u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043d\u0430\u0448\u0438\u0445 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0445 \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u043f\u043e\u0441\u0442\u043e\u0432.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">touch components\/PrevNext.vue<\/code><\/pre>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>v-if<\/code> \u0432\u043d\u0443\u0442\u0440\u0438 \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<code>NuxtLink<\/code>, \u0447\u0442\u043e\u0431\u044b \u0443\u0437\u043d\u0430\u0442\u044c, \u0435\u0441\u0442\u044c \u043b\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f \u0437\u0430\u043f\u0438\u0441\u044c \u0432 \u0431\u043b\u043e\u0433\u0435, \u0438 \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c, \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u0430 \u043d\u0435\u0435 \u0441\u0441\u044b\u043b\u043a\u0443. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 <code>prev<\/code> \u0438 <code>next<\/code>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0432\u0441\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0443 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0438 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0443\u044e \u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e, \u043d\u043e \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a. \u0415\u0441\u043b\u0438 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0433\u043e \u043f\u043e\u0441\u0442\u0430 \u043d\u0435\u0442, \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0435\u0447\u0430\u0442\u0430\u0435\u043c \u043f\u0443\u0441\u0442\u043e\u0439 span, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0434\u043e\u0431\u0435\u043d \u0434\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0434\u0435\u043b\u0430\u0435\u043c \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435 \u0441\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0441\u0441\u044b\u043b\u043a\u043e\u0439.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;template&gt;   &lt;div class=&quot;flex justify-between&quot;&gt;     &lt;NuxtLink       v-if=&quot;prev&quot;       :to=&quot;{ name: 'blog-slug', params: { slug: prev.slug } }&quot;       class=&quot;text-primary font-bold hover:underline&quot;     &gt;       {{ prev.title }}     &lt;\/NuxtLink&gt;     &lt;span v-else&gt;&amp;nbsp;&lt;\/span&gt;     &lt;NuxtLink       v-if=&quot;next&quot;       :to=&quot;{ name: 'blog-slug', params: { slug: next.slug } }&quot;       class=&quot;font-bold hover:underline&quot;     &gt;       {{ next.title }}     &lt;\/NuxtLink&gt;     &lt;span v-else&gt;&amp;nbsp;&lt;\/span&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u043f\u0440\u043e\u043f\u0441\u044b <code>prev<\/code> \u0438 <code>next<\/code> \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u0431\u043b\u043e\u0433\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script&gt;   export default {     props: {       prev: {         type: Object,         default: () =&gt; null       },       next: {         type: Object,         default: () =&gt; null       }     }   } &lt;\/script&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0438\u0445 \u0432 <code>asyncData<\/code>. \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442 \u0441 \u0438\u043c\u0435\u043d\u0430\u043c\u0438 <code>prev<\/code> \u0438 <code>next<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0438\u0437 \u043f\u0430\u043f\u043a\u0438 <code>articles<\/code> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>$content<\/code>. \u041d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438 slug(\u0438\u043c\u044f .md \u0444\u0430\u0439\u043b\u0430), \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u043e \u0446\u0435\u043f\u043e\u0447\u043a\u0435 \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>only()<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u043c\u0443 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c &#8216;title&#8217; \u0438 &#8216;slug&#8217;.<\/p>\n<p>  <\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>sortBy()<\/code> \u0434\u043b\u044f \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e \u0434\u0430\u0442\u0435 createdAt \u0432 \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u044e\u0449\u0435\u043c \u043f\u043e\u0440\u044f\u0434\u043a\u0435. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>surround()<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c <code>slug<\/code> \u0438\u0437 params, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043c\u043e\u0433 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 <code>slug<\/code> \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439 \u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c prev \u0438 next, \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u0435\u0439 <code>article<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">async asyncData({ $content, params }) {     const article = await $content('articles', params.slug).fetch()      const [prev, next] = await $content('articles')       .only(['title', 'slug'])       .sortBy('createdAt', 'asc')       .surround(params.slug)       .fetch()      return {       article,       prev,       next     }   },<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>&lt;prev-next&gt;<\/code> \u043d\u0430 \u043d\u0430\u0448\u0443 _slag \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u0435\u0440\u0435\u0434\u0430\u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b prev \u0438 next.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;template&gt;   &lt;article&gt;     &lt;h1&gt;{{ article.title }}&lt;\/h1&gt;     &lt;p&gt;{{ article.description }}&lt;\/p&gt;     &lt;img :src=&quot;article.img&quot; :alt=&quot;article.alt&quot; \/&gt;     &lt;p&gt;Article last updated: {{ formatDate(article.updatedAt) }}&lt;\/p&gt;      &lt;nuxt-content :document=&quot;article&quot; \/&gt;      &lt;author :author=&quot;article.author&quot; \/&gt;      &lt;prev-next :prev=&quot;prev&quot; :next=&quot;next&quot; \/&gt;   &lt;\/article&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438 <code>components: true<\/code> \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 nuxt.config, \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u0447\u0442\u043e\u0431\u044b \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p><\/blockquote>\n<p>  <\/p>\n<h3 id=\"rabota-s-api\">\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 API<\/h3>\n<p>  <\/p>\n<p>\u041f\u0440\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0443\u043b\u044c Content \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f \u043a API, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0438 \u0432\u0438\u0434\u0435\u0442\u044c, \u0447\u0442\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a API \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c\u0443 URL-\u0430\u0434\u0440\u0435\u0441\u0443: <a href=\"http:\/\/localhost:3000\/_content\/\" rel=\"nofollow\">http:\/\/localhost:3000\/_content\/<\/a>. \u0412 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0432\u0435\u0440\u043d\u0435\u0442, \u0442\u0430\u043a \u043a\u0430\u043a \u043d\u0430\u0448\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c article, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u043e\u0442 URL <a href=\"http:\/\/localhost:3000\/_content\/articles\" rel=\"nofollow\">http:\/\/localhost:3000\/_content\/articles<\/a>, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043f\u0438\u0441\u043e\u043a \u0441\u0442\u0430\u0442\u0435\u0439.<\/p>\n<p>  <\/p>\n<blockquote><p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430<a href=\"http:\/\/localhost:3000\/_content\/articles\/my-first-blog-post\" rel=\"nofollow\">http:\/\/localhost:3000\/_content\/articles\/my-first-blog-post<\/a><\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 Chrome, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/json-viewer\/gbmdgpbipfallnflgajpaliibnhdgobh\" rel=\"nofollow\">JSON Viewer Awesome<\/a>, \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u0447\u0442\u0435\u043d\u0438\u044f.<\/p><\/blockquote>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u0440\u044f\u043c\u043e \u0432 URL \u0438 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0432 \u0432\u0438\u0434\u0435 JSON \u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0437\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0431\u043b\u043e\u0433\u0430 \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u0442\u0435\u0439. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f API, \u043c\u043e\u0436\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u0448\u0438\u0442\u044c \u043a\u0430\u043a\u0438\u0435 \u0438\u0437 \u043d\u0438\u0445 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b, \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0430\u043c \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, img, slug \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u0440\u0430. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043d\u0430 \u0447\u0442\u043e \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0445\u043e\u0436\u0435.<\/p>\n<p>  <\/p>\n<p><a href=\"http:\/\/localhost:3000\/_content\/articles?only=title&amp;only=description&amp;only=img&amp;only=slug&amp;only=author\" rel=\"nofollow\">http:\/\/localhost:3000\/_content\/articles?only=title&amp;only=description&amp;only=img&amp;only=slug&amp;only=author<\/a><\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><video controls style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute;\">Your browser does not support HTML5 video.<source src=\"https:\/\/res.cloudinary.com\/nuxt\/video\/upload\/v1588091670\/content-api_aocbcn.webm\" type=\"video\/webm\"><\/source><\/video><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h3 id=\"spisok-vseh-statey\">\u0421\u043f\u0438\u0441\u043e\u043a \u0432\u0441\u0435\u0445 \u0441\u0442\u0430\u0442\u0435\u0439<\/h3>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0431\u043b\u043e\u0433\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0441\u0442\u0430\u0442\u044c\u0438. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0443 \u043d\u0430\u0441 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 index.vue, \u043d\u0430\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0435\u0441\u044c \u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p>\n<p>  <\/p>\n<blockquote><p>\u0412 <a href=\"https:\/\/github.com\/nuxt-company\/demo-blog-nuxt-content\" rel=\"nofollow\">\u044d\u0442\u043e\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/a> \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443(index.vue \u0432 \u043f\u0430\u043f\u043a\u0435 <code>pages<\/code>) \u0432\u043c\u0435\u0441\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 index.vue \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u0430\u043f\u043a\u0438 <code>blog<\/code>, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0432 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0443 \u043c\u0435\u043d\u044f \u043d\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446, \u043d\u043e \u043e\u0431\u044b\u0447\u043d\u043e \u0443 \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0434\u043e\u043c\u0430\u0448\u043d\u044f\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430, \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043a\u043e\u043d\u0442\u0430\u043a\u0442\u043e\u0432, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0431\u043b\u043e\u0433\u0430 \u0438 \u0442. \u0434.<\/p><\/blockquote>\n<p>\u041f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u044f <code>$content<\/code> \u0438 <code>params<\/code> \u0438\u0437 <a href=\"https:\/\/ru.nuxtjs.org\/guides\/concepts\/context-helpers\" rel=\"nofollow\">\u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430<\/a> \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>asyncData<\/code>, \u043c\u044b \u0437\u0430\u0442\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u0443 articles, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0438\u0437 <code>$content<\/code>, \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u043b\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043f\u043a\u0438 articles, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0449\u0435\u0439 \u0432\u0441\u0435 \u0441\u0442\u0430\u0442\u044c\u0438, \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 slug \u0438\u0437 params. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>only()<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, img, slug \u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u0440\u0430, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043b\u0438 API, \u0438 \u0443\u0437\u043d\u0430\u043b\u0438, \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0430\u0441\u0442 \u043d\u0430\u043c \u0438\u043c\u0435\u043d\u043d\u043e \u0442\u043e, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e. \u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>sortBy()<\/code> \u0434\u043b\u044f \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0438 \u043f\u043e \u0434\u0430\u0442\u0435 <code>createdAt<\/code>, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u0432\u044f\u0437\u044b\u0432\u0430\u0435\u043c <code>fetch()<\/code> \u0438 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script&gt;   export default {     async asyncData({ $content, params }) {       const articles = await $content('articles', params.slug)         .only(['title', 'description', 'img', 'slug', 'author'])         .sortBy('createdAt', 'asc')         .fetch()        return {         articles       }     }   } &lt;\/script&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u041c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0430\u0442\u0435\u0439 \u0442\u0435\u043f\u0435\u0440\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043d\u0430\u043c, \u043a\u0430\u043a \u043b\u044e\u0431\u0430\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0430\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0448\u0430\u0431\u043b\u043e\u043d\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <code>v-for<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0438 \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0442\u0430\u0442\u044c\u0438, \u0438\u043c\u044f \u0430\u0432\u0442\u043e\u0440\u0430, \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435, \u0434\u0430\u0442\u0443 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0438, \u0434\u0430\u0442\u0443 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 <code>&lt;NuxtLink&gt;<\/code> \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0442\u0430\u0442\u044c\u0438.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;template&gt;   &lt;div&gt;     &lt;h1&gt;Blog Posts&lt;\/h1&gt;     &lt;ul&gt;       &lt;li v-for=&quot;article of articles&quot; :key=&quot;article.slug&quot;&gt;         &lt;NuxtLink :to=&quot;{ name: 'blog-slug', params: { slug: article.slug } }&quot;&gt;           &lt;img :src=&quot;article.img&quot; \/&gt;           &lt;div&gt;             &lt;h2&gt;{{ article.title }}&lt;\/h2&gt;             &lt;p&gt;by {{ article.author.name }}&lt;\/p&gt;             &lt;p&gt;{{ article.description }}&lt;\/p&gt;           &lt;\/div&gt;         &lt;\/NuxtLink&gt;       &lt;\/li&gt;     &lt;\/ul&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"ispolzovanie-zaprosa-where-dlya-sozdaniya-stranicy-avtora\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 <code>where<\/code> \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0430\u0432\u0442\u043e\u0440\u0430<\/h3>\n<p>  <\/p>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c Content \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0437\u0430\u043f\u0440\u043e\u0441 where. \u0423 \u043d\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0430\u0432\u0442\u043e\u0440\u0430, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u0434\u0430\u043d\u043d\u044b\u0435 \u043e\u0431 \u0430\u0432\u0442\u043e\u0440\u0435 \u0438 \u0432\u0441\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u044d\u0442\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u0440\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">touch pages\/blog\/author\/_author.vue<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0438 \u0440\u0430\u043d\u044c\u0448\u0435, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c asyncData \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445, \u043d\u043e \u043d\u0430 \u044d\u0442\u043e\u0442 \u0440\u0430\u0437 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>where()<\/code>. \u041c\u044b \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0430\u0432\u0442\u043e\u0440 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u0435\u0442 \u0441 \u0438\u043c\u0435\u043d\u0435\u043c \u0430\u0432\u0442\u043e\u0440\u0430, \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c \u0438\u0437 params.<\/p>\n<p>  <\/p>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<p>  <\/p>\n<p><a href=\"http:\/\/localhost:3000\/_content\/articles?author.name=Maria\" rel=\"nofollow\">http:\/\/localhost:3000\/_content\/articles?author.name=Maria<\/a><\/p>\n<p>  <\/p>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0430, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c <code>nestedProperties<\/code> \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u043f\u0446\u0438\u0438 \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 content \u0432 \u043d\u0430\u0448\u0435\u043c \u0444\u0430\u0439\u043b\u0435 nuxt.config \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0435\u043c\u0443 \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0438\u0442\u044c (\u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u0442\u043e\u0447\u0435\u0447\u043d\u043e\u0439 \u043d\u043e\u0442\u0430\u0446\u0438\u0435\u0439).<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">export default {   content: {     nestedProperties: ['author.name']   } }<\/code><\/pre>\n<p>  <\/p>\n<p>\u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0430 \u041c\u0430\u0440\u0438\u0438. \u0415\u0441\u043b\u0438 \u0431\u044b \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 maria \u0431\u0435\u0437 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b, \u043c\u044b \u0431\u044b \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>$regex<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u043e\u0441\u044c \u0441 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0431\u0443\u043a\u0432\u044b.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0432\u0441\u0435 \u0434\u0435\u0442\u0430\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043d\u0430 \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 <code>only()<\/code> \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u043d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0430\u043c \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>without()<\/code> \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0432 \u043d\u0435\u0433\u043e \u0442\u043e, \u0447\u0442\u043e \u043c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432 \u0442\u0435\u043b\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script&gt;   export default {     async asyncData({ $content, params }) {       const articles = await $content('articles', params.slug)         .where({           'author.name': {             $regex: [params.author, 'i']           }         })         .without('body')         .sortBy('createdAt', 'asc')         .fetch()        return {         articles       }     }   } &lt;\/script&gt;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u043b\u043e, \u043c\u0435\u0442\u043e\u0434\u0443 <code>without()<\/code>:<\/p><\/blockquote>\n<p>  <\/p>\n<pre><code class=\"plaintext\">without(['body', 'title'])<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0438 \u0434\u0430\u043d\u043d\u044b\u0435, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u043a\u0440\u0430\u0441\u0438\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0430\u0432\u0442\u043e\u0440\u0430, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0449\u0443\u044e \u0435\u0433\u043e \u0438\u043c\u044f \u0430\u0432\u0442\u043e\u0440\u0430, \u0431\u0438\u043e\u0433\u0440\u0430\u0444\u0438\u044e, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0432\u0441\u0435 \u0435\u0433\u043e \u043f\u043e\u0441\u0442\u044b.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;template&gt;   &lt;div&gt;     &lt;h1&gt;Author: {{ articles[0].author.name }}&lt;\/h1&gt;     &lt;p&gt;Bio: {{ articles[0].author.bio }}&lt;\/p&gt;     &lt;h3&gt;Here are a list of articles by {{ articles[0].author.name }}:&lt;\/h3&gt;     &lt;ul&gt;       &lt;li v-for=&quot;article in articles&quot; :key=&quot;article.slug&quot;&gt;         &lt;NuxtLink :to=&quot;{ name: 'blog-slug', params: { slug: article.slug } }&quot;&gt;           &lt;img :src=&quot;article.img&quot; :alt=&quot;article.alt&quot; \/&gt;           &lt;div&gt;             &lt;h2&gt;{{ article.title }}&lt;\/h2&gt;             &lt;p&gt;{{ article.description }}&lt;\/p&gt;             &lt;p&gt;{{ formatDate(article.updatedAt) }}&lt;\/p&gt;           &lt;\/div&gt;         &lt;\/NuxtLink&gt;       &lt;\/li&gt;     &lt;\/ul&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0432\u0441\u0435 \u0441\u0442\u0438\u043b\u0438 \u0431\u044b\u043b\u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u044b \u0438\u0437 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u0430. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u043b\u0438 \u0441\u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0438\u0437 <a href=\"https:\/\/github.com\/nuxt-company\/demo-blog-nuxt-content\" rel=\"nofollow\">\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430<\/a>.<\/p><\/blockquote>\n<p>\u0427\u0442\u043e\u0431\u044b \u043e\u0442\u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0434\u0430\u0442\u0443, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043c\u0435\u0442\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u0440\u0430\u043d\u0435\u0435:<\/p>\n<p>  <\/p>\n<pre><code class=\"plaintext\">methods: {     formatDate(date) {       const options = { year: 'numeric', month: 'long', day: 'numeric' }       return new Date(date).toLocaleDateString('en', options)     }   }<\/code><\/pre>\n<p>  <\/p>\n<p>\u0418, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u0438\u0437 \u043f\u043e\u0441\u0442\u0430 \u0432 \u0431\u043b\u043e\u0433\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0430\u0432\u0442\u043e\u0440\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;NuxtLink :to=&quot;`\/blog\/author\/${author.name}`&quot;&gt;   &lt;img :src=&quot;author.img&quot; \/&gt;   &lt;div&gt;     &lt;h4&gt;Author&lt;\/h4&gt;     &lt;p&gt;{{ author.name }}&lt;\/p&gt;     &lt;p&gt;{{ author.bio }}&lt;\/p&gt;   &lt;\/div&gt; &lt;\/NuxtLink&gt;<\/code><\/pre>\n<p>  <\/p>\n<h3 id=\"dobavlyaem-pole-poiska\">\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430<\/h3>\n<p>  <\/p>\n<p>\u041c\u043e\u0434\u0443\u043b\u044c Nuxt Content \u0434\u0430\u0435\u0442 \u043d\u0430\u043c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438\u0441\u043a\u0430\u0442\u044c \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u0435\u0442\u043e\u0434\u0430 search().<\/p>\n<p>  <\/p>\n<p>\u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0438\u0441\u043a\u0430.<\/p>\n<p>  <\/p>\n<pre><code class=\"bash\">touch components\/AppSearchInput.vue<\/code><\/pre>\n<p>  <\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e data(), \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c searchQuery, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430, \u0438 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0430\u0442\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u043f\u0443\u0441\u0442. \u0417\u0430\u0442\u0435\u043c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434 watch \u0438\u0437 Vue, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0431\u043b\u044e\u0434\u0430\u0442\u044c \u0437\u0430 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c searchQuery. \u0415\u0441\u043b\u0438 \u0432 searchQuery \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u0442, \u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u0443\u0441\u0442, \u0438 \u043c\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c return. \u0412 \u0434\u0440\u0443\u0433\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043c\u044b \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u0442\u0430\u0442\u044c\u0438, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>$content<\/code>. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <code>limit()<\/code>, \u0447\u0442\u043e\u0431\u044b \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0445 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432, \u0430 \u0437\u0430\u0442\u0435\u043c \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>search()<\/code>, \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0435\u043c\u0443 searchQuery \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043c\u0435\u0442\u043e\u0434 <code>fetch()<\/code>.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;script&gt;   export default {     data() {       return {         searchQuery: '',         articles: []       }     },     watch: {       async searchQuery(searchQuery) {         if (!searchQuery) {           this.articles = []           return         }         this.articles = await this.$content('articles')           .limit(6)           .search(searchQuery)           .fetch()       }     }   } &lt;\/script&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u0448\u0430\u0431\u043b\u043e\u043d input \u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e v-model \u043c\u044b \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0435\u0433\u043e \u043a \u043d\u0430\u0448\u0435\u043c\u0443 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 SearchQuery. \u0417\u0430\u0442\u0435\u043c, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043f\u043e\u0438\u0441\u043a\u0430, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c <code>v-for<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0438\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<code>&lt;NuxtLink&gt;<\/code>\u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0438\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;template&gt;   &lt;div&gt;     &lt;input       v-model=&quot;searchQuery&quot;       type=&quot;search&quot;       autocomplete=&quot;off&quot;       placeholder=&quot;Search Articles&quot;     \/&gt;     &lt;ul v-if=&quot;articles.length&quot;&gt;       &lt;li v-for=&quot;article of articles&quot; :key=&quot;article.slug&quot;&gt;         &lt;NuxtLink :to=&quot;{ name: 'blog-slug', params: { slug: article.slug } }&quot;&gt;           {{ article.title }}         &lt;\/NuxtLink&gt;       &lt;\/li&gt;     &lt;\/ul&gt;   &lt;\/div&gt; &lt;\/template&gt;<\/code><\/pre>\n<p>  <\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442  \u0433\u0434\u0435 \u0443\u0433\u043e\u0434\u043d\u043e \u043d\u0430 \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.  <\/p>\n<pre><code class=\"html\">&lt;AppSearchInput \/&gt;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p>\u0421\u043c. <a href=\"https:\/\/github.com\/nuxt-company\/demo-blog-nuxt-content\" rel=\"nofollow\">\u043a\u043e\u0434 \u0434\u0435\u043c\u043e<\/a> \u0434\u043b\u044f \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0430\u0432\u0442\u043e\u0440\u0430 \u0438 \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/p><\/blockquote>\n<p>  <\/p>\n<h2 id=\"redaktirovanie-kontenta-v-rezhime-realnogo-vremeni\">\u0420\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438<\/h2>\n<p>  <\/p>\n<p>\u041d\u0430\u0448 \u0431\u043b\u043e\u0433 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u0435\u043b\u0438\u043a\u043e\u043b\u0435\u043f\u043d\u043e, \u0438 \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043b\u0438\u0431\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438. \u0412\u0441\u0435, \u0447\u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c, \u044d\u0442\u043e \u0434\u0432\u0430\u0436\u0434\u044b \u0449\u0435\u043b\u043a\u043d\u0443\u0442\u044c \u043f\u043e \u0441\u0432\u043e\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0438 \u043e\u0442\u043a\u0440\u043e\u0435\u0442\u0441\u044f \u043e\u043a\u043d\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0417\u0434\u0435\u0441\u044c \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0442\u0435\u043a\u0441\u0442, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u043b\u043e\u0436\u043a\u0443. \u0412\u044b \u0434\u0430\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043f\u0430\u043f\u043a\u0435 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438, \u043f\u0440\u043e\u0441\u0442\u043e \u0449\u0435\u043b\u043a\u043d\u0443\u0432 \u043c\u044b\u0448\u044c\u044e \u0432\u043d\u0435 \u043e\u043a\u043d\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 \u0441\u0432\u043e\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0430 \u0432 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0435 \u0438 \u0432 \u043a\u043e\u043d\u0441\u043e\u043b\u0438 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0444\u0430\u0439\u043b \u0431\u044b\u043b \u0438\u0437\u043c\u0435\u043d\u0435\u043d \u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d.<\/p>\n<p>  <\/p>\n<div class=\"oembed\">\n<div>\n<div style=\"left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;\"><video controls style=\"top: 0; left: 0; width: 100%; height: 100%; position: absolute;\">Your browser does not support HTML5 video.<source src=\"https:\/\/res.cloudinary.com\/nuxt\/video\/upload\/v1588091670\/live-edit-content_kdorvi.webm\" type=\"video\/webm\"><\/source><\/video><\/div>\n<\/div>\n<\/div>\n<p>  <\/p>\n<h2 id=\"generaciya-prilozheniya\">\u0413\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/h2>\n<p>  <\/p>\n<p>\u0415\u0441\u043b\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0445\u043e\u0442\u0438\u043c \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0430\u0448 \u043d\u043e\u0432\u044b\u0439 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043b\u043e\u0433, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>nuxt generate<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0437\u0434\u0430\u0441\u0442 \u043d\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0432\u0441\u0435 webpack \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u0438 \u0441\u043e\u0437\u0434\u0430\u0432 \u0434\u043b\u044f \u043d\u0430\u0441 .js \u0431\u0430\u043d\u0434\u043b\u044b, \u0430 \u0437\u0430\u0442\u0435\u043c \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u0442 \u043d\u0430\u0448\u0438 html, css, js \u0444\u0430\u0439\u043b\u044b \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u0430\u043a \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435, \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e routes \u0438\u043b\u0438 \u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u043b\u0438\u0431\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043d\u043e\u0432\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 &quot;crawler&quot; \u0431\u0443\u0434\u0435\u0442 \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b.<\/p>\n<p>  <\/p>\n<p>\u0417\u0430\u0442\u0435\u043c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 <code>nuxt start<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043a \u0440\u0430\u0431\u043e\u0442\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0441\u0430\u0439\u0442, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0435\u0433\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043f\u0435\u0440\u0435\u0434 \u0440\u0430\u0437\u0432\u0435\u0440\u0442\u044b\u0432\u0430\u043d\u0438\u0435\u043c.<\/p>\n<p>  <\/p>\n<p>\u0421 nuxt generate, \u0435\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043a\u043e\u043c\u0430\u043d\u0434\u0430 <code>nuxt generate<\/code> \u0431\u0443\u0434\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0438 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u0431-\u043f\u0430\u043a\u0435\u0442 \u0434\u043b\u044f \u0432\u043e\u0441\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0441\u0430\u0439\u0442\u0430, \u0447\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u043d\u0430\u0448 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d \u0437\u0430 \u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n<p>  <\/p>\n<h2 id=\"zaklyuchenie\">\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 Nuxt Content \u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u0443\u0434\u043e\u0432\u043e\u043b\u044c\u0441\u0442\u0432\u0438\u0435, \u0438 \u0432\u044b \u0442\u043e\u0436\u0435 \u0441\u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438 \u043f\u043e\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435. \u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u043e\u0434\u0435\u043c\u043e\u043d\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438 \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430 \u043d\u0430\u0448\u0435\u043c \u043a\u0430\u043d\u0430\u043b\u0435 \u0432 Discord \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <strong>showcase<\/strong>, \u0447\u0442\u043e\u0431\u044b \u043c\u044b \u0441\u043c\u043e\u0433\u043b\u0438 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u044b\u0435 \u0432\u0435\u0449\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438, \u0438, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0434\u0430\u0436\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0438\u0445 \u0432 \u043d\u0430\u0448\u0435\u043c NuxtLetter. \u0415\u0449\u0435 \u043d\u0435 \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b\u0438\u0441\u044c? \u0427\u0442\u043e \u0436, \u0441\u0435\u0439\u0447\u0430\u0441 \u043f\u0440\u0435\u043a\u0440\u0430\u0441\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0447\u0442\u043e\u0431\u044b <a href=\"https:\/\/nuxtjs.org\/#subscribe-to-newsletter\" rel=\"nofollow\">\u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f<\/a>, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0432\u044b\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f Nuxt.js. \u041d\u0430\u0441\u043b\u0430\u0436\u0434\u0430\u0439\u0442\u0435\u0441\u044c \ud83d\ude42<\/p>\n<p>  <\/p>\n<h2 id=\"dalneyshee-izuchenie\">\u0414\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u0435 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  <\/p>\n<p>\u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0443 \u0441\u0430\u0439\u0442\u0430 \u0432 \u0441\u0432\u043e\u0439 \u0431\u043b\u043e\u0433, \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435\u0439: <a href=\"https:\/\/redfern.dev\/articles\/adding-a-sitemap-using-nuxt-content\/\" rel=\"nofollow\">\u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043a\u0430\u0440\u0442\u044b \u0441\u0430\u0439\u0442\u0430 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c Nuxt Content<\/a> \u043e\u0442 <a href=\"https:\/\/twitter.com\/garethredfern\" rel=\"nofollow\">\u0413\u0430\u0440\u0435\u0442\u0430 \u0420\u0435\u0434\u0444\u0435\u0440\u043d\u0430<\/a>.<\/p>\n<\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/523074\/\"> https:\/\/habr.com\/ru\/post\/523074\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/523074\/\">\n<p><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/9x\/dz\/ew\/9xdzewrcn6hhjqqfh_kk6v5tyaq.jpeg\" alt=\"\u043e\u0431\u043b\u043e\u0436\u043a\u0430\"><br \/>  \u041f\u0440\u043e\u0434\u043e\u043b\u0436\u0430\u0435\u043c \u0438\u0437\u0443\u0447\u0430\u0442\u044c Nuxt Content.<\/p>\n<p>  <\/p>\n<p>\u041f\u0435\u0440\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0430 <a href=\"https:\/\/habr.com\/ru\/post\/522496\/\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  <\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043c\u044b \u0443\u0437\u043d\u0430\u0435\u043c \u043a\u0430\u043a \u0441\u0442\u0438\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u0434 \u0432 \u0441\u0442\u0430\u0442\u044c\u044f\u0445, \u0441\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u0438 \u043f\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c, \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 API Content \u0438 \u043c\u043d\u043e\u0433\u043e\u0435 \u0434\u0440\u0443\u0433\u043e\u0435.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-311551","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/311551","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=311551"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/311551\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=311551"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=311551"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=311551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}