初学Node.js之Markdown建站

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介:

 平时做项目中的Web应用都是用Asp.Net或者Java,但有时候需要快速做一些小Web的时候,感觉用Asp.Net或者Java都有点重。一开始想学学PHP,但实在不喜欢PHP的语法,所只用PHP写了两个简单的Demo之后就写不下去了。了解到最近Node.js有点热,前景也不错,而且JavaScript平时也都在用,所以决定学习下Node.js。


  准备入门,习惯做两件事,一件是在Google上搜索相关的入门教程,参考等;二是去官方网站找找Guide或者Manual。最后花了一两天浏览了些资料,这两个够了:



  当然还有其它一些资料,比如博客、论坛之类。不过官方网站上只找到API文档,适合参考不适合入门。所有这些资料主要是浏览一遍,认识下Node.js,然后还是要在实践中学习。

  官方下载,安装都很顺利。不过虽然安装时修改了PATH,但是安装好之后命令行不能直接运行“node”,想起Windows有个老毛病——经常安装程序修改了PATH之后不会生效,所以自己又去系统环境变量设置里重新配置了一下PATH,node命令就可用了。


  “Helloworld”还是很简单的,把各种教程上的示例都试了下,然后准备写个小Web。Web Helloworld也很简单,不过要想写功能完整的Web,还是得花些精神,所以还是找框架吧。Google出来Express评价不错,也比较主流,所以决定用Express。仍然是Google+官方文档,这两个资料都不错:



  简单实践之后准备构思自己的第一个Node.js Web应用。因为懒得写HTML,最近又正好经常写Markdown的文档,所以准备用Markdown来建个站。Markdown解析当然想自己写,所以仍然是老办法,Google。Node.js的Markdown包找到两个,都是Github上:



  也不知道哪个好,所以随便选一个,就选了第一个。当然在建站之前还是需要实验下的,基本满足要求,能支持标准的Markdown语法,但有一些小BUG。因为这次目的是熟悉Node.js和Express,所以不纠结这个问题了,以后有空再找更好的Markdown解析包,实在找不到自己写个也不是很麻烦的事情。


  一切准备就绪,开始建站,这里记录下建站的详细过程,一步步说明,入门级的。老实说我比较懒,不想自己去准备Express的结构,所以用了传说中最好的Node.js IDE - JetBrain WebStrom。WebStorm新建项目时有“Node.js Express App”模板


wKiom1MkEJ_iVx_iAAE84auSzqQ395.jpg


  然后在Node.js Express App的选项中,选择使用EJS模板引擎和LESS样式引擎。虽然很多人推荐Jade模板引擎,但是这是个新语法,而且也是我不喜欢的那种。还是EJS更贴近ASP和JSP的语法,所以选择它了。至于LESS,写起来肯定要比直接写CSS轻松得多,这个早就有经验了。


  Express应用信息和依赖包在package.json中配置。先得把markdown加进来,所以修改WebStorm生成的package.json:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
     "name" "application-name" ,
     "version" "0.0.1" ,
     "private" true ,
     "scripts" : {
         "start" "node app.js"
     },
     "dependencies" : {
         "express" "3.5.0" ,
         "ejs" "*" ,
         "less-middleware" "*" ,
         "markdown" "*"
     }
}


  最后那句 "markdown": "*" 就是新加的内容。package.json是JSON格式,需要使用双引号把属性名和字符串值包起来。虽然Node.js规范推荐大家在编程时使用单引号表示字符串,但这里,单引号是不行的。


  Express App的入口是app.js,这个也在package.json中配置:"start""node app.js"。WebStorm生成的app.js中是通过3000端口监听服务,因为我的机器上没有安装Web服务器,80端口空着,所以我把端口号改成了80。然后,看app.js的源码,在启动HTTP服务之前配置了两行URL Route。考虑到以后的应用中URL路由配置可能会很长,再加上我有点洁癖,所以我决定尝试把URL路由放在一个独立的脚本中配置,于是在根目录下创建了一个app-routes.js,专们用来配置路由:


1
2
3
4
5
6
var  routes = require( './routes' );
var  user = require( './routes/user' );
exports.route =  function  (app) {
     app.get( '/' , routes.index);
     app.get( '/users' , user.list);
};


  然后在app.js中引入app-routes,并调用导出的route方法,顺便把上面没用的require都删了:


1
2
3
// app.get('/', routes.index);
// app.get('/users', user.list);
require( './app-routes' ).route(app);


  运行了下,效果不错,路由没问题。剩下的就是解析Markdown的问题了。Markdown文件我准备专门建个目录来保存,所有文件都用其它编辑器(比如Sublime Text)写好放在里面,然后通过在url中直接输入“/文件名”的方式来打开解析后的HTML页面。


  然后在routes目录下添加了一个markdown.js,这个脚本根据URL参数,在md目录下选择对应的文件,解析后,通过views目录下新添加的md.ejs模板显示成HTML,所以目录结构就像这个


wKioL1MkEHiBxrYwAADqw3rRoqk097.jpg


  接着添加路由,将访问请求交给markdown.js来处理


1
2
3
4
5
var  routes = require( './routes' );
var  markdown = require( './routes/markdown' );
exports.route =  function  (app) {
     app.get( '/(:md)?' , markdown.show);
};


  还有md.ejs模板,需要在<body>标准中显示由Markdown文件转换而来的HTML,所以使用<%- %>标记。


1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
< html >
< head >
     < meta  http-equiv = "content-type"  content = "text/html; charset=utf-8" />
     < title ><%= title %></ title >
     < link  rel = 'stylesheet'  href = '/stylesheets/style.css' />
</ head >
< body >
<%- content %>
</ body >
</ html >


  markdown.js中的处理过程是获取路由参数,再根据参数在md目录下去找对应的文件,如果没找到直接返回404错误。如果找到了就将这个文件的内容读出来,解析成HTML,传递给md.ejs输出到浏览器。同时考虑如果URL不带参数,则说明是访问首页,markdown.js应该直接去解析md/index.md。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var  fs = require( "fs" );
var  path = require( "path" );
var  markdown = require( "markdown" ).markdown;
exports.show =  function  (req, res) {
     // 获取参数并将参数转换成
     var  mdName = req.params.md ||  "index" ;
     if  (!mdName.match(/\.md$/i)) {
         mdName +=  ".md" ;
     }
     // 根据当前目录和相对目录找到参数对应的md文件
     var  filename = path.resolve(path.join(__dirname,  "../md" , mdName));
     // render函数定义符合readFile和callback标准
     // 如果md文件读取错误或者没有内容,向浏览器返回404
     // 有内容则调用md.ejs渲染HTML页面
     var  render =  function  (err, md) {
         if  (err || !md) {
             res.status(404).send( "Error" );
             return ;
         }
         var  html = markdown.toHTML(md);
         res.render( "md" , {
             title:  "Markdown Content" ,
             content: html
         });
     };
     // 从md文件读取内容,并将读到的内容交能render函数处理
     fs.readFile(filename, { encoding:  "utf8"  }, render);
};



  完工,使用node app.js启动服务,再在浏览器中访问,一切正常,只是——页面太丑了,因为没加样式。修改public/stylesheets/style.less,加入样式


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
body {
     margin 24px ;
     font 14px  "微软雅黑" "Lucida Grande" Helvetica Arial sans-serif ;
}
.h {
     font-weight normal ;
}
h 1  {
     .h();
     font-size 32px ;
}
h 2  {
     .h();
     font-size 24px ;
}
h 3  {
     .h();
     font-size 18px ;
}
.quote {
     background-color #e8e8e8 ;
     border-left 5px  solid  #cacaca ;
     padding 3px  0  3px  24px ;
     border-radius:  3px ;
     margin 0 ;
     p {
         margin 1px  0 ;
     }
}
code  {
     .quote();
     font-family : Consolas, Monaco,  "Lucida Console" monospace ;
     padding 0  5px ;
     margin-left 2px ;
     margin-right 2px ;
     border 1px  solid  #cacaca ;
}
pre  {
     .quote();
     border-left-width 32px ;
     padding-left 12px ;
     code  {
         border 0 ;
         padding 0 ;
         margin 0 ;
     }
}
blockquote {
     .quote();
     code  {
         background-color #f8f8f8 ;
     }
}
a {
     color #666 ;
     text-decoration underline ;
     &:visited {
         color #999 ;
     }
     &:hover {
         color #000 ;
     }
}
ul, ol {
     margin 0 ;
     padding 0 ;
     li {
         margin-left 1.2em ;
         padding 0 ;
     }
}
ul li {
     list-style-type square ;
}
hr {
     height 1px ;
     border 0 ;
     background-color #999 ;
}


  这回才是真正的完工了,看看效果:


wKioL1MkEHnSGqJvAAL_f5pnYvk875.jpg


本文转自边城__ 51CTO博客,原文链接:http://blog.51cto.com/jamesfancy/1377256,如需转载请自行联系原作者

相关文章
|
7月前
|
JavaScript 安全 前端开发
从建站到拿站 -- JS基础
从建站到拿站 -- JS基础
47 1
|
7月前
|
运维 Dubbo Java
对于使用Next.js建站
【1月更文挑战第18天】【1月更文挑战第88篇】对于使用Next.js建站
101 1
|
4月前
|
弹性计算 Serverless 开发者
Next.js 建站的生死抉择:Serverless FC 与 Serverless 应用引擎的激烈碰撞,何去何从?
【8月更文挑战第7天】在选择Serverless FC或Serverless应用引擎部署Next.js网站时,需考量便捷性、性能与成本。Serverless应用引擎提供直观界面简化部署管理,而Serverless FC需深入了解函数配置;性能上,应用引擎表现更稳定,尤其高并发场景,但FC按需伸缩;成本方面,FC适合低流量应用,应用引擎大规模使用更经济。两者均具良好扩展性,但体验各异。最终选择应基于具体需求、预算和技术背景。
82 3
|
5月前
|
运维 Kubernetes Serverless
Serverless 应用引擎使用问题之使用Next.js建站,该选择哪个
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
7月前
|
存储 JavaScript 前端开发
使用Strve.js来搭建一款 Markdown 编辑器
今天,我们来使用Strve.js来搭建一款 Markdown 编辑器,没错!你没听错。我们需要创建了一个实时 Markdown 编辑器,用户可以在 textarea 中输入 Markdown 文本,然后实时显示转换后的 HTML。你可能会说使用 Strve.js 开发会不会写的特别复杂难懂啊,还不如用 Vue.js 呢!
|
4月前
|
JavaScript 算法 前端开发
学习 node.js 六 Markdown 转为 html,zlib
【8月更文挑战第19天】
30 0
|
7月前
|
存储 JSON 资源调度
next.js博客搭建_react-markdown渲染内容(第三步)
next.js博客搭建_react-markdown渲染内容(第三步)
133 1
|
7月前
|
运维 Dubbo Java
对于使用Next.js建站,选择Serverless FC还是Serverless应用引擎
【1月更文挑战第12天】【1月更文挑战第60篇】对于使用Next.js建站,选择Serverless FC还是Serverless应用引擎
369 2
|
JavaScript 安全 前端开发
从建站到拿站 -- JS基础
从建站到拿站 -- JS基础
152 0
从建站到拿站 -- JS基础
|
前端开发 JavaScript 数据建模
JavaScript 使用 Markdown 制作 PPT
markdown 对于开发者来说是一个熟悉的文档格式,编写文档或者博客首选的格式。markdown 文档可以转换为HTML进行展示。在文章《2021 年 6 个GitHub推荐前端项目》中介绍了一个将 markdown 转换为幻灯片的脚本库 Slidev 。
373 0
JavaScript 使用 Markdown 制作 PPT

热门文章

最新文章