{"id":657,"date":"2022-06-02T09:10:03","date_gmt":"2022-06-02T01:10:03","guid":{"rendered":"https:\/\/pdfjs.libertynlp.com\/?p=657"},"modified":"2022-06-25T08:16:22","modified_gmt":"2022-06-25T00:16:22","slug":"%e5%89%8d%e7%ab%af-%e5%a6%82%e4%bd%95%e9%80%89%e6%8b%a9%e5%92%8c%e4%bd%bf%e7%94%a8%e7%bd%91%e9%a1%b5%e6%a8%a1%e6%9d%bf%ef%bc%9f","status":"publish","type":"post","link":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/","title":{"rendered":"How to find and use website templates?"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"657\" class=\"elementor elementor-657\" data-elementor-settings=\"[]\">\n\t\t\t\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5566b541 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no\" data-id=\"5566b541\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-wide\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-c11d6b7\" data-id=\"c11d6b7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-fa0ca51 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"fa0ca51\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-widget-divider{--divider-border-style:none;--divider-border-width:1px;--divider-color:#2c2c2c;--divider-icon-size:20px;--divider-element-spacing:10px;--divider-pattern-height:24px;--divider-pattern-size:20px;--divider-pattern-url:none;--divider-pattern-repeat:repeat-x}.elementor-widget-divider .elementor-divider{display:-webkit-box;display:-ms-flexbox;display:flex}.elementor-widget-divider .elementor-divider__text{font-size:15px;line-height:1;max-width:95%}.elementor-widget-divider .elementor-divider__element{margin:0 var(--divider-element-spacing);-ms-flex-negative:0;flex-shrink:0}.elementor-widget-divider .elementor-icon{font-size:var(--divider-icon-size)}.elementor-widget-divider .elementor-divider-separator{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;direction:ltr}.elementor-widget-divider--view-line_icon .elementor-divider-separator,.elementor-widget-divider--view-line_text .elementor-divider-separator{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.elementor-widget-divider--view-line_icon .elementor-divider-separator:after,.elementor-widget-divider--view-line_icon .elementor-divider-separator:before,.elementor-widget-divider--view-line_text .elementor-divider-separator:after,.elementor-widget-divider--view-line_text .elementor-divider-separator:before{display:block;content:\"\";border-bottom:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--element-align-left .elementor-divider .elementor-divider-separator>.elementor-divider__svg:first-of-type{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:100;flex-shrink:100}.elementor-widget-divider--element-align-left .elementor-divider-separator:before{content:none}.elementor-widget-divider--element-align-left .elementor-divider__element{margin-left:0}.elementor-widget-divider--element-align-right .elementor-divider .elementor-divider-separator>.elementor-divider__svg:last-of-type{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:100;flex-shrink:100}.elementor-widget-divider--element-align-right .elementor-divider-separator:after{content:none}.elementor-widget-divider--element-align-right .elementor-divider__element{margin-right:0}.elementor-widget-divider:not(.elementor-widget-divider--view-line_text):not(.elementor-widget-divider--view-line_icon) .elementor-divider-separator{border-top:var(--divider-border-width) var(--divider-border-style) var(--divider-color)}.elementor-widget-divider--separator-type-pattern{--divider-border-style:none}.elementor-widget-divider--separator-type-pattern.elementor-widget-divider--view-line .elementor-divider-separator,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:after,.elementor-widget-divider--separator-type-pattern:not(.elementor-widget-divider--view-line) .elementor-divider-separator:before,.elementor-widget-divider--separator-type-pattern:not([class*=elementor-widget-divider--view]) .elementor-divider-separator{width:100%;min-height:var(--divider-pattern-height);-webkit-mask-size:var(--divider-pattern-size) 100%;mask-size:var(--divider-pattern-size) 100%;-webkit-mask-repeat:var(--divider-pattern-repeat);mask-repeat:var(--divider-pattern-repeat);background-color:var(--divider-color);-webkit-mask-image:var(--divider-pattern-url);mask-image:var(--divider-pattern-url)}.elementor-widget-divider--no-spacing{--divider-pattern-size:auto}.elementor-widget-divider--bg-round{--divider-pattern-repeat:round}.rtl .elementor-widget-divider .elementor-divider__text{direction:rtl}<\/style>\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93feda1 elementor-widget elementor-widget-heading\" data-id=\"93feda1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-heading-title{padding:0;margin:0;line-height:1}.elementor-widget-heading .elementor-heading-title[class*=elementor-size-]>a{color:inherit;font-size:inherit;line-height:inherit}.elementor-widget-heading .elementor-heading-title.elementor-size-small{font-size:15px}.elementor-widget-heading .elementor-heading-title.elementor-size-medium{font-size:19px}.elementor-widget-heading .elementor-heading-title.elementor-size-large{font-size:29px}.elementor-widget-heading .elementor-heading-title.elementor-size-xl{font-size:39px}.elementor-widget-heading .elementor-heading-title.elementor-size-xxl{font-size:59px}<\/style><h2 class=\"elementor-heading-title elementor-size-default\">Abstract<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f33b6b7 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"f33b6b7\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c6380e1 elementor-widget elementor-widget-heading\" data-id=\"c6380e1\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Find template<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-79f8b5c elementor-widget elementor-widget-heading\" data-id=\"79f8b5c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Template framework introduction<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-865a687 elementor-widget elementor-widget-text-editor\" data-id=\"865a687\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#818a91;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#818a91;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<p>The mainstream front-end frameworks include <span style=\"color: #ff9900;\"><strong>React, Vue, Html5<\/strong><\/span>, and you can find wonderful and free templates. These frameworks may take time to learn except <strong><span style=\"color: #ff9900;\">Html5<\/span><\/strong>, but believe me, as long as you hands on, the questions you encounter will definitely be answered by Google. So boldly choose your favorite template, don&#8217;t worry too much about what framework it belongs to.<\/p><p><span style=\"font-size: 19.2px;\">You can go to the templates website to search template. Since I mainly use the <strong><span style=\"color: #ff9900;\">Vue<\/span><\/strong> framework, it is recommended that you also use <strong><span style=\"color: #ff9900;\">Vue<\/span><\/strong>, so that you can directly copy my solution code when you encounter the same problem.<\/span><\/p><p><span style=\"font-size: 19.2px;\">You can search <span style=\"color: #ff9900;\"><strong>Vue<\/strong><\/span> templates at <span style=\"text-decoration: underline;\"><em><strong><a href=\"https:\/\/vuejs.org\/ecosystem\/themes.html\" target=\"_blank\" rel=\"noopener\">https:\/\/vuejs.org\/ecosystem\/themes.html<\/a><\/strong><\/em><\/span>. As you can see in the screenshot below, there are plenty of free, beautiful, and useful templates out there.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0b97926 elementor-widget elementor-widget-image\" data-id=\"0b97926\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.5.5 - 03-02-2022 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"2736\" height=\"1680\" src=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u9009\u6a21\u677f.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u9009\u6a21\u677f.png 2736w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u9009\u6a21\u677f-300x184.png 300w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u9009\u6a21\u677f-1024x629.png 1024w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u9009\u6a21\u677f-768x472.png 768w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u9009\u6a21\u677f-1536x943.png 1536w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u9009\u6a21\u677f-2048x1258.png 2048w\" sizes=\"auto, (max-width: 2736px) 100vw, 2736px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa5c41e elementor-widget elementor-widget-text-editor\" data-id=\"fa5c41e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>Download your favorite template and get started!<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-07bc0df elementor-widget elementor-widget-heading\" data-id=\"07bc0df\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Start template<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57932a0 elementor-widget elementor-widget-text-editor\" data-id=\"57932a0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-size: 19.2px;\">Open the downloaded template (take <strong><span style=\"text-decoration: underline;\"><em><a href=\"https:\/\/www.creative-tim.com\/product\/vue-now-ui-kit?affiliate_id=116187\" target=\"_blank\" rel=\"noopener\">Vue Now UI Kit<\/a><\/em><\/span><\/strong> as an example) folder<\/span>\u00a0and you will see the following directory structure. The following figure only lists the important files, and I have added the necessary text descriptions. The <span style=\"color: #3366ff;\"><em><strong>README.md <\/strong><\/em><span style=\"color: #000000;\">file<\/span><\/span> in the folder explains how to configure and start the website template.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-28c33b7 elementor-widget elementor-widget-image\" data-id=\"28c33b7\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1750\" height=\"1385\" src=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6a21\u677f\u6587\u4ef6\u7ed3\u6784.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6a21\u677f\u6587\u4ef6\u7ed3\u6784.png 1750w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6a21\u677f\u6587\u4ef6\u7ed3\u6784-300x237.png 300w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6a21\u677f\u6587\u4ef6\u7ed3\u6784-1024x810.png 1024w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6a21\u677f\u6587\u4ef6\u7ed3\u6784-768x608.png 768w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6a21\u677f\u6587\u4ef6\u7ed3\u6784-1536x1216.png 1536w\" sizes=\"auto, (max-width: 1750px) 100vw, 1750px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba571c3 elementor-widget elementor-widget-heading\" data-id=\"ba571c3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Template directory structure<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b2f141d elementor-widget elementor-widget-heading\" data-id=\"b2f141d\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Readme.md contens\u200b<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1d1d94 elementor-widget elementor-widget-heading\" data-id=\"f1d1d94\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Import temlpate<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ef02138 elementor-widget elementor-widget-text-editor\" data-id=\"ef02138\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"color: #000000;\"><span style=\"font-size: 19.2px;\">I once tried to modify the template\u00a0<\/span><\/span><strong><span style=\"font-size: 19.2px; color: #ff9900;\">Vue<\/span><\/strong><span style=\"color: #000000;\"><span style=\"font-size: 19.2px;\"> version because of the version conflict of some dependencies. According to the various tutorials on the Internet, I greatly modified the contents of <em><strong><span style=\"color: #3366ff;\">main.js<\/span><\/strong><\/em> and <em><strong><span style=\"color: #3366ff;\">router.js<\/span><\/strong><\/em> in the template. Even though I put a lot of time and energy into it, and I do it carefully, there were more and more problems that I had to give up.<\/span><\/span><\/p><p><span style=\"color: #000000;\"><span style=\"font-size: 19.2px;\">So, if you want to modify the <strong><span style=\"color: #ff9900;\">Vue<\/span><\/strong> version of the project to adapt to a certain dependency to achieve a certain function, I suggest you complete the development of the target function in the appropriate <strong><span style=\"color: #ff9900;\">Vue<\/span><\/strong> version template, and then build the target function project, import it in the main project, rather than modifying the Vue version directly on the main project.<\/span><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c513995 elementor-widget elementor-widget-heading\" data-id=\"c513995\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Build and import steps<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f491699 elementor-widget elementor-widget-text-editor\" data-id=\"f491699\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-size: 19.2px;\"><span style=\"color: #000000;\">1. Build project<\/span><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5233754 elementor-widget elementor-widget-text-editor\" data-id=\"5233754\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-size: 19.2px;\"><span style=\"color: #000000;\">2. Move project<\/span><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39cf636 elementor-widget elementor-widget-text-editor\" data-id=\"39cf636\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"color: #000000;\"><span style=\"font-size: 19.2px;\">After building the project, you will get a <em><strong><span style=\"color: #3366ff;\">dist<\/span><\/strong><\/em> folder including <em><strong><span style=\"color: #3366ff;\">index.html<\/span><\/strong><\/em>. Move the <em><strong><span style=\"color: #3366ff;\">dist<\/span><\/strong><\/em> folder to the <em><strong><span style=\"color: #3366ff;\">public<\/span><\/strong><\/em> directory of the main project. The directory structure is shown in the figure below.<\/span><\/span><\/p><p><span style=\"font-size: 19.2px; color: #000000;\">In the <strong><span style=\"color: #ff9900;\">Vue<\/span><\/strong> project, <em><strong><span style=\"color: #3366ff;\">dist<\/span><\/strong><\/em> folder must be move to the <em><strong><span style=\"color: #3366ff;\">public<\/span><\/strong><\/em> folder to take effect.<\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44563f1 elementor-widget elementor-widget-image\" data-id=\"44563f1\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"1497\" height=\"396\" src=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6587\u4ef6\u7ed3\u67842-1.png\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6587\u4ef6\u7ed3\u67842-1.png 1497w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6587\u4ef6\u7ed3\u67842-1-300x79.png 300w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6587\u4ef6\u7ed3\u67842-1-1024x271.png 1024w, https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u6587\u4ef6\u7ed3\u67842-1-768x203.png 768w\" sizes=\"auto, (max-width: 1497px) 100vw, 1497px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ecad570 elementor-widget elementor-widget-heading\" data-id=\"ecad570\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Main project public folder structure<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6bf0fa1 elementor-widget elementor-widget-text-editor\" data-id=\"6bf0fa1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"font-size: 19.2px;\"><span style=\"color: #000000;\">3. Import into page<\/span><\/span><\/p>\n<p><span style=\"font-size: 19.2px;\"><span style=\"color: #000000;\">In the pages that needs to use the target function under the <em><strong><span style=\"color: #3366ff;\">\\src\\page<\/span><\/strong><\/em> folder of the main project, use the <strong><span style=\"color: #ff9900;\">&lt;iframe&gt;<\/span><\/strong><\/span><\/span><span style=\"font-size: 19.2px;\"><span style=\"color: #000000;\"> tag to import the target function project.<\/span><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2d0e7c elementor-widget elementor-widget-heading\" data-id=\"e2d0e7c\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Summarize<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-347f973 elementor-widget elementor-widget-text-editor\" data-id=\"347f973\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p><span style=\"color: #000000;\"><span style=\"font-size: 19.2px;\">When we start to DIY a website, we can boldly use free templates, even if it takes some time to learn a new framework, it is worth it. Because compared to the web pages made from 0 by newbies like us, the website template layout is more beautiful and the performance is more stable.<\/span><\/span><\/p><p><span style=\"font-size: 19.2px; color: #000000;\">And whether we want to start a new project or import in other projects, we can find detailed documentation. So, go ahead and try it.<\/span><\/p><p><span style=\"color: #000000;\"><span style=\"font-size: 19.2px;\">However, this article is aimed at application sites with complex functions, if you just want to build a blog, <strong><span style=\"color: #ff9900;\">WordPress<\/span><\/strong> will be the best choice.<\/span><\/span><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ca44543 elementor-widget elementor-widget-heading\" data-id=\"ca44543\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Related articles<\/h2>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa19b89 elementor-widget elementor-widget-heading\" data-id=\"fa19b89\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">Coming soon.<\/h4>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>When we start to DIY our own website, using templates is a good choice, because it can make our website beautiful, smooth, and save time. <\/p>\n","protected":false},"author":1,"featured_media":3616,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,25],"tags":[44,49,29,48],"class_list":["post-657","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-websitetemplate","tag-free","tag-template","tag-vue","tag-web-site"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to find and use website templates? - pdf.js annotation library for everyone!<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to find and use website templates? - pdf.js annotation library for everyone!\" \/>\n<meta property=\"og:description\" content=\"When we start to DIY our own website, using templates is a good choice, because it can make our website beautiful, smooth, and save time.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/\" \/>\n<meta property=\"og:site_name\" content=\"pdf.js annotation library for everyone!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-02T01:10:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-25T00:16:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u5e7b\u706f\u72471.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1123\" \/>\n\t<meta property=\"og:image:height\" content=\"1123\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Chaoxu Wei\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Chaoxu Wei\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/\",\"name\":\"pdf.js annotation library for everyone!\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/pdfjs.libertynlp.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/\",\"name\":\"How to find and use website templates? - pdf.js annotation library for everyone!\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#website\"},\"datePublished\":\"2022-06-02T01:10:03+00:00\",\"dateModified\":\"2022-06-25T00:16:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/pdfjs.libertynlp.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to find and use website templates?\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/\"},\"author\":{\"name\":\"Chaoxu Wei\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"headline\":\"How to find and use website templates?\",\"datePublished\":\"2022-06-02T01:10:03+00:00\",\"dateModified\":\"2022-06-25T00:16:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/\"},\"wordCount\":683,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\"},\"keywords\":[\"Free\",\"Template\",\"Vue\",\"Web Site\"],\"articleSection\":[\"Frontend\",\"Website Template\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/#respond\"]}]},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032\",\"name\":\"Chaoxu Wei\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg\",\"contentUrl\":\"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg\",\"width\":2297,\"height\":2297,\"caption\":\"Chaoxu Wei\"},\"logo\":{\"@id\":\"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/\"},\"description\":\"Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!\",\"sameAs\":[\"https:\/\/pdfjs.libertynlp.com\",\"https:\/\/www.facebook.com\/profile.php?id=100083516062282\",\"https:\/\/www.youtube.com\/channel\/UC1-am0MOM52n2HVeoLlWWxA\"],\"url\":\"https:\/\/pdfjs.libertynlp.com\/index.php\/author\/weichaoxu\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to find and use website templates? - pdf.js annotation library for everyone!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/","og_locale":"en_US","og_type":"article","og_title":"How to find and use website templates? - pdf.js annotation library for everyone!","og_description":"When we start to DIY our own website, using templates is a good choice, because it can make our website beautiful, smooth, and save time.","og_url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/","og_site_name":"pdf.js annotation library for everyone!","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100083516062282","article_author":"https:\/\/www.facebook.com\/profile.php?id=100083516062282","article_published_time":"2022-06-02T01:10:03+00:00","article_modified_time":"2022-06-25T00:16:22+00:00","og_image":[{"width":1123,"height":1123,"url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/\u5e7b\u706f\u72471.jpg","type":"image\/jpeg"}],"author":"Chaoxu Wei","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Chaoxu Wei","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/pdfjs.libertynlp.com\/#website","url":"https:\/\/pdfjs.libertynlp.com\/","name":"pdf.js annotation library for everyone!","description":"","publisher":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pdfjs.libertynlp.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/","url":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/","name":"How to find and use website templates? - pdf.js annotation library for everyone!","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/#website"},"datePublished":"2022-06-02T01:10:03+00:00","dateModified":"2022-06-25T00:16:22+00:00","breadcrumb":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/pdfjs.libertynlp.com\/"},{"@type":"ListItem","position":2,"name":"How to find and use website templates?"}]},{"@type":"Article","@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/#article","isPartOf":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/"},"author":{"name":"Chaoxu Wei","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"headline":"How to find and use website templates?","datePublished":"2022-06-02T01:10:03+00:00","dateModified":"2022-06-25T00:16:22+00:00","mainEntityOfPage":{"@id":"https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/"},"wordCount":683,"commentCount":0,"publisher":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032"},"keywords":["Free","Template","Vue","Web Site"],"articleSection":["Frontend","Website Template"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pdfjs.libertynlp.com\/index.php\/2022\/06\/02\/how-to-find-and-use-website-templates\/#respond"]}]},{"@type":["Person","Organization"],"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/6bac77d073615c351c81d1443558c032","name":"Chaoxu Wei","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/","url":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg","contentUrl":"https:\/\/pdfjs.libertynlp.com\/wp-content\/uploads\/2022\/06\/mmexport1593955346163-1-scaled-e1654163212877.jpg","width":2297,"height":2297,"caption":"Chaoxu Wei"},"logo":{"@id":"https:\/\/pdfjs.libertynlp.com\/#\/schema\/person\/image\/"},"description":"Job hunting, both part-time and full-time jobs are accepted. Job recommendation please email me weichaoxu1998@gmail.com, thank you very much!","sameAs":["https:\/\/pdfjs.libertynlp.com","https:\/\/www.facebook.com\/profile.php?id=100083516062282","https:\/\/www.youtube.com\/channel\/UC1-am0MOM52n2HVeoLlWWxA"],"url":"https:\/\/pdfjs.libertynlp.com\/index.php\/author\/weichaoxu\/"}]}},"_links":{"self":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/comments?post=657"}],"version-history":[{"count":439,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/657\/revisions"}],"predecessor-version":[{"id":3627,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/posts\/657\/revisions\/3627"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media\/3616"}],"wp:attachment":[{"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/media?parent=657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/categories?post=657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pdfjs.libertynlp.com\/index.php\/wp-json\/wp\/v2\/tags?post=657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}