- Building Single:page Web Apps with Meteor
- Fabian Vogelsteller
- 332字
- 2021-08-06 19:29:37
Building the basic templates
Now, let's add the basic templates to our blog by creating a file called layout.html
in the my-meteor-blog/client/templates
folder. This template will serve as the wrapper template for our blog layout. To build the basic templates, perform the following steps:
- Add the following lines of code to
layout.html
, which we just created:<template name="layout"> <header> <div class="container"> <h1>My Meteor Single Page App</h1> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/about">About</a> </li> </ul> </div> </header> <div class="container"> <main> </main> </div> </template>
- Next, we will create the home page template, which will later list all our blogs posts. In the same templates folder as
layout.html
, we will create a file namedhome.html
with the following lines of code:<template name="home"> {{#markdown}} ## Welcome to my Blog Here I'm talking about my latest discoveries from the world of JavaScript. {{/markdown}} </template>
- The next file will be a simple About page and we save it as
about.html
with the following code snippet:<template name="about"> {{#markdown}} ## About me Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud **exercitation ullamco** laboris nisi ut aliquip ex ea commodo consequat. Link to my facebook: [facebook.com][1] [1]: http://facebook.com {{/markdown}} </template>
As you can see, we used a
{{#markdown}}
block helper to wrap our texts. The curly braces are handlebars syntax, which Blaze uses to bring logic to the HTML. The{{#markdown}}...{{/markdown}}
block will transform all markdown syntax inside into HTML when the template gets rendered. - To be able to use
{{#markdown}}
block helper, we need to first add themarkdown
core package to our app. To do this, we quit our running app in the terminal using Ctrl + C and type the following command:$ meteor add markdown
- Now we can run the
meteor
command again to start our server.
However, when we now go to our browser, we will still see Hello World. So how can we make now our templates visible?
推薦閱讀
- C# 7 and .NET Core Cookbook
- 解構產品經理:互聯網產品策劃入門寶典
- Cocos2D-X權威指南(第2版)
- 在最好的年紀學Python:小學生趣味編程
- Android 9 Development Cookbook(Third Edition)
- Apache Mesos Essentials
- R Data Analysis Cookbook(Second Edition)
- 區塊鏈底層設計Java實戰
- PySide 6/PyQt 6快速開發與實戰
- Scratch3.0趣味編程動手玩:比賽訓練營
- C++ Fundamentals
- 區塊鏈國產化實踐指南:基于Fabric 2.0
- SQL Server 2012 數據庫應用教程(第3版)
- Joomla!Search Engine Optimization
- 軟技能2:軟件開發者職業生涯指南