客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
开源软件名称（OpenSource Name）：manabuyasuda/equip开源软件地址(OpenSource Url)：https://github.com/manabuyasuda/equip开源编程语言(OpenSource Language)：CSS 76.6%开源软件介绍(OpenSource Introduction)：equip - Make efficient site静的サイトを効率良く作るためのテンプレートです。以下のような特徴があります。
コーディングルールは以下のリンクをベースにします。 始め方とGulpタスクnpmでパッケージをインストールします。 npm install開発に使用するGulpタスクは2つあります。 gulpgulp release
いずれも EJSdevelop/index.ejsがトップページになります。develop/_partialsディレクトリ内にグローバルに使用するテンプレートを保存します。 新規案件でルートディレクトリに制作していくことを想定していますが、そうではない場合でも使えるように基本的に相対パスで記述します。ただし、グローバルナビゲーションで使い回しができるようにすると複雑になってしまうため、必要最低限であればルート相対パスで記述することもできます。 site.jsondevelop/assets/data/site.jsonにサイト共通の値が指定されています。サイトの名前やOGPの指定などがありますので、最初に確認をして、変更してください。site.jsonの値は
{
"name": "サイトのタイトル",
"description": "サイトの概要",
"keywords": "サイトのキーワード1, サイトのキーワード2",
"author": "",
"rootUrl": "http://example.com/",
"css": ".css",
"ogpImage": "http://example.com/images/og-image.jpg",
"facebookAdmins": "",
"facebookAppId": "",
"twitterCard": "summary",
"twitterSite": "@",
"favicon": "",
"appleIcon": "",
"appTitle": "",
"analyticsId": "",
"developDir": "develop/"
}また、develop/assets/dataディレクトリにはsample.jsonファイルが入っています。記事内で記事一覧やニュースなどをループで、処理をしたい場合に使用します。 [
{
"title": "title1",
"description": "description1"
},
{
"title": "title2",
"description": "description2"
}
]jsonファイルを追加する場合はgulpfile.jsにも追加する必要があります。 .pipe(ejs({
site: JSON.parse(fs.readFileSync(develop.data + 'site.json')),
sample: JSON.parse(fs.readFileSync(develop.data + 'sample.json')),
sample2: JSON.parse(fs.readFileSync(develop.data + 'sample2.json'))
},ejsファイルでは <% sample.forEach(function(data){ %>
<article class="article">
<h2><%= data.title %></h2>
<p><%= data.description %></p>
</article>
<% }); %>このように出力されます。 <article class="article">
<h2>title1</h2>
<p>description1</p>
</article>
<article class="article">
<h2>title2</h2>
<p>description2</p>
</article>index.ejsindex.ejsには変更が必要なものや変更ができるものについての変数が定義されているので、ページごとに変更することができます。変数はindex.ejsとインクルードしている_head.ejsや_footer.ejsなどで
<%
var absolutePath = filename.split(site.developDir)[filename.split(site.developDir).length -1].replace('.ejs','.html');
var relativePath = '../'.repeat([absolutePath.split('/').length -1]);
var page = {
title: "",
description: site.description,
keywords: "",
bodyClass: "",
singleCss: [],
singleJs: [],
ogpType: "website",
ogpImage: site.ogpImage,
absolutePath: absolutePath,
relativePath: relativePath
};
-%>
<%- include(page.relativePath + '_partials/_head', {page: page, modifier: ''}); %>
<%- include(page.relativePath + '_partials/_header', {page: page, modifier: ''}); %>
<article>contents</article>
<%- include(page.relativePath + '_partials/_footer', {page: page, modifier: ''}); %>
<header class="header header--fixed">ルートディレクトリのindex.html以外にファイルを作成したり場合は_sample.ejsをコピーして使いまわします。sample.ejsのようにアンダースコアを外すとHTMLとして出力されるようになります。 下層ページのejsファイルはdevelop/page1ディレクトリをコピーして使いまわします。変数は下記のように変更して使います。 <%
var absolutePath = filename.split(site.developDir)[filename.split(site.developDir).length -1].replace('.ejs','.html');
var relativePath = '../'.repeat([absolutePath.split('/').length -1]);
var page = {
title: "ページのタイトル",
description: "ページの概要",
keywords: "",
bodyClass: "",
singleCss: [],
singleJs: [],
ogpType: "article",
ogpImage: site.ogpImage,
absolutePath: absolutePath,
relativePath: relativePath
};
-%>
<%- include(page.relativePath + '_partials/_head', {page: page, modifier: ''}); %>
<%- include(page.relativePath + '_partials/_header', {page: page, modifier: ''}); %>
<%- include('_partials/_breadcrumb', {page: page, pageTitle: page.title, modifier: ''}); %>
<article>contents</article>
<%- include(page.relativePath + '_partials/_footer', {page: page, modifier: ''}); %>ルーディレクトリのindex.ejsファイル以外はパンくずリストをインクルードします。デフォルトでは 変更する場合は _head.ejsdevelop/_partials/_head.ejsには共通で使用するメタタグなどが定義されています。基本的に変更する必要はなく、site.jsonやindex.ejsの設定によって要素を削除したりしています。 <% if (typeof modifier === undefined) { var modifier = ''; } -%>
<!DOCTYPE html>
<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# <%= page.ogpType %>: http://ogp.me/ns/<%= page.ogpType %>#">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<% if(page.title) { %><title><%= page.title %> | <%= site.name %></title><% } else { %><title><%= site.name %></title><% } %>
<meta name="description" content="<%= page.description %>"><% if(page.keywords) { %>
<meta name="keywords" content="<%= page.keywords %>"><% } %><% if(site.author) { %>
<meta name="author" content="<%= site.author %>"><% } %>
<link rel="stylesheet" href="<%= page.relativePath %>assets/css/common<%= site.css %>"><% if(page.singleCss) { %><% page.singleCss.forEach(function(data) { %>
<link rel="stylesheet" href="<%= data %>"><% }); %><% } %>
<meta name="format-detection" content="telephone=no"><% if(site.favicon) { %>
<link rel="shortcut icon" href="<%= site.favicon %>"><% } %><% if(site.appleIcon) { %>
<link rel="apple-touch-icon" sizes="180x180" href="<%= site.appleIcon %>"><% } %><% if(site.appTitle) { %>
<meta name="apple-mobile-web-app-title" content="<%= site.appTitle %>"><% } %>
<!-- OGP -->
<meta property="og:title" content="<% if(page.title) { %><%= page.title %> | <%= site.name %><% } else { %><%= site.name %><% } %>">
<meta property="og:type" content="<%= page.ogpType %>">
<meta property="og:image" content="<%= page.ogpImage %>">
<meta property="og:url" content="<%= site.rootUrl %><%= page.absolutePath %>">
<meta property="og:description" content="<%= page.description %>">
<meta property="og:site_name" content="<%= site.name %>">
<meta property="og:locale" content="ja">
<% if(site.facebookAppId) { %><meta property="fb:app_id" content="<%= site.facebookAppId %>"><% } else if(site.facebookAdmins) { %><meta property="fb:admins" content="<%= site.facebookAdmins -%>"><% } %>
<meta name="twitter:card" content="<%= site.twitterCard %>"><% if(site.twitterSite) { %>
<meta name="twitter:site" content="<%= site.twitterSite %>"><% } %>
<!-- / OGP -->
</head>
<% if(page.bodyClass) { %><body class="<%= page.bodyClass %><%= modifier %>"><% } else { %><body><% } %>_header.ejsvedelop/_partials/_header.ejsには共通で使用するメインナビゲーションが定義されています。グローバルナビゲーションは条件分岐が多く複雑になってしまうため、ルート相対パスで指定をします。 <% if (typeof modifier === undefined) { var modifier = ''; } -%>
<header class="header<%= modifier %>">
<h1><a href="/"><%= site.name %></a></h1>
<nav>
<ul
全部评论
专题导读
热门推荐
热门话题
 阅读排行榜
|
请发表评论