html模块化静态组装_如何使用组装建立静态博客

最新推荐文章于 2021-06-27 10:33:27 发布

cune1359

最新推荐文章于 2021-06-27 10:33:27 发布

阅读量434

点赞数

文章标签： java python vue javascript docker ViewUI

今天，我们将看一下Assemble ，这是一个Grunt插件，可让我们轻松创建和管理静态网站。组装可能与Jekyll稍微相似，但是它为桌子带来了更多的灵活性和功能，使其更强大。

永久链接，Bootstrap样板文件和LESS编译器是使Assemble能够与成熟的CMS应用程序媲美的工具的功能。在这里，我们将向您展示如何使用Assemble创建静态博客 。

步骤1.安装项目依赖项

组装需要Grunt起作用 （如果需要进一步的帮助，请参阅我们先前关于Node.js和Grunt的帖子）。然后，在Node和Grunt都设置好之后，在项目文件夹中创建package.json文件，以指定用于构建博客的Node包。

在package.json中添加以下代码：

{
  "devDependencies": {
    "assemble": "~0.4.40",
    "grunt": "~0.4.5",
    "grunt-contrib-connect": "~0.8.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

package.json中的这些代码行告诉Node我们的项目将依赖于Grunt ， Grunt Connect ， Grunt Watch和Assemble。现在，我们将通过终端运行此命令来安装这些软件包。

npm install

步骤2.加载并注册Grunt任务

下载所有依赖项后，创建grunfile.js并将以下行放入：

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json')
    });

    grunt.loadNpmTasks('assemble');
	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-watch');

	grunt.registerTask('default', ['connect:livereload','assemble','watch']);
};

我们上面的gruntfile.js中放置的行仅加载和注册我们刚刚通过npm install命令下载的依赖项 。在后面的步骤中，我们将使这些任务“起作用”。

步骤3.文件夹和文件结构

现在，我们将组织博客的文件夹和文件结构 ，如下所示：

MyBlog/
	package.json
	gruntfile.js
	app/
		layout/
			default.hbs
		content/
			page/
				index.hbs
			blog/
				first-posting.hbs
		partials/

组装允许我们通过gruntfile.js配置文件和目录的组织。但是，现在，让我们继续使用默认配置，如上所示。

步骤4.博客布局

在“组装”中，“ 布局”设置了page的基础 。在第3步中，我们在MyBlog/app/layout/文件夹中创建了一个名为default.hbs的MyBlog/app/layout/文件。使用.hbs扩展名是因为Assemble使用Handlebars模板语言。

default.hbs将被引用该文件的博客中的所有页面使用。在这里，我们将通过BootstrapCDN使用Bootstrap来设置博客的样式基础。然后，我们在default.hbs添加以下代码：

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>My Blog</title>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1 class="page-header text-center">MY BLOG</h1>
			</div>
			<div class="col-md-9 main">
			{{> body }}
			</div>
		</div>
	</div>
</body>

</html>

步骤5.配置Grunt任务

下一步，创建一个Gruntfile.js来配置目录和文件以供Assemble进行编译 。打开Gruntfile.js并在Grunt.initConfig部分中添加以下代码：

grunt.initConfig({
	pkg: grunt.file.readJSON('package.json'),
	watch: {
		assemble: {
			files: [
				'app/content/blog/*.hbs',
				'app/content/pages/*.hbs',
				'app/layouts/*.hbs',
				'app/partials/*.hbs'
			],
			tasks: ['assemble']
		},
		livereload: {
    options: {
      livereload: '<%= connect.options.livereload %>'
    },
    files: [
      './dist/*.html'
    ]
  },
	},
	assemble: {
		options:{
			layoutdir: 'app/layouts',
			flatten: true,
			layout: 'default.hbs',
			partials: 'app/partials/*.hbs'
		},
		page: {
			files: {
				'dist/': ['app/content/page/*.hbs']
			}
		},
		blog: {
			files: {
				'dist/': ['app/content/blog/*.hbs']
			}
		}
	},
connect: {
  options: {
    port: 8800,
    // change this to '0.0.0.0' to access the server from outside
    hostname: 'localhost',
    livereload: 35728
  },
  livereload: {
    options: {
      open: true,
      base: './dist'
    }
  }
}
});

步骤6.生成页面和第一篇文章

现在我们可以建立一个页面 。让我们在MyBlog/app/content/page/文件夹中打开index.hbs文件并添加内容。

<h3>Home Page</h3>

<section>
<p>This is our Home Page. </p>
</section>

通过命令提示符或终端，运行grunt命令。此命令会将index.hbs文件生成为html文件，并立即在浏览器中启动该文件。让我们在浏览器中查看结果。

我们还将生成博客的第一篇文章 。打开MyBlog/app/content/blog/文件夹中的first-post.hbs并布置内容，就像这样。

<h3>First Post</h3>
<section>
<p>I am the first post. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, esse, perferendis, earum in sunt voluptate officiis voluptates quam pariatur veritatis quis deleniti fugit expedita aliquam est repellendus autem dolor non?</p>
</section>

再次运行grunt命令，您将看到在名为dist的新创建的文件夹中生成的first-post.html文件。在浏览器上导航到localhost:8800/first-post.html ，您应该发现第一条帖子与下面的图片相同。

您可以通过创建更多.hbs文件并将其放置在MyBlog/app/content/blog/文件夹中来创建更多帖子。

步骤7.创建博客文章列表

现在，我们将创建一个帖子列表，并将其放在Blog边栏中 。为此，我们将使用“ 部分装配”功能。 “部分”是可重复使用的代码片段，可以包含在其他页面中。

边栏旨在包含我们的博客文章列表以及相应文章的链接。让我们创建一个名为sidebar.hbs的新文件。在其中添加以下代码，并将其保存在MyBlog/app/partials/文件夹中。

<h3>Sidebar</h3>
{{#each pages}}
<li class="list-unstyled">
	<a href="{{relative dest this.dest}}">{{ data.title }}</a>
</li>
{{/each}}

然后，在default.hbs调用补充工具栏的部分，如下所示：

<div class="col-md-3 sidebar">
{{> sidebar }}
</div>

#each是一个循环，它将在MyBlog/app/content/blog/文件夹中列出我们所有的博客文章。结果如下所示：

步骤8.使用变量

有了Assemble，我们可以使用使用YAML前件的变量。 YFM（YAML前件）是一个可选部分，位于页面顶部，用于维护页面及其内容的元数据 。我们将使用它来指定帖子标题；打开first-post.hbs ，然后像下面那样修改代码：

---
title: Post One
---

<h3>{{ title }}</h3>
<section>
blahblah...
</section>

步骤9.帖子排序列表

Assemble允许我们根据指定的'term'对帖子列表进行排序和排序 。例如，在这里我们将按日期在边栏上订购博客文章。让我们通过在YML前端问题上添加日期来修改帖子，如下所示：

---
title: Post One
date: 2014-07-10
---

还可以在MyBlog/app/content/blog/修改其他帖子文件。然后，在sidebar.hbs ，我们将在帖子标题下方显示日期。像这样修改代码：

<ul class="list-unstyled">
{{#withSort pages "data.title"}}
	<li>
		<h4><a href="{{relative dest this.dest}}">{{ data.title }}</a></h4>
		<small>Posted on: {{formatDate data.date "%B %d, %Y"}}</small>
	</li>
{{/withSort}}
</ul>

结果是边栏中的帖子列表，按日期排序。

结论

现在，我们有了一个由Assemble生成的简单博客。正如我们已经向您展示的那样，Assemble可以用作构建网站的替代工具 。并且，如果愿意，您可以使用免费的网络托管服务（如Github Pages）或支持Node.js的服务器（如Heroku）将您的网站置于在线状态。

翻译自: https://www.hongkiat.com/blog/blogging-with-assemble/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html模块化静态组装_如何使用组装建立静态博客

今天，我们将看一下Assemble ，这是一个Grunt插件，可让我们轻松创建和管理静态网站。组装可能与Jekyll有点相似，但是它为桌子带来了更多的灵活性和功能，使其更强大。 Permalink，Bootstrap Boilerplates和LESS编译器是使Assemble成为成熟CMS应用程序可比的工具的功能。在这里，我们将向您展示如何使用Assemble创建静态博客。推...
复制链接

扫一扫