MGTemplateEngine 模版引擎简单使用

最新推荐文章于 2024-10-25 22:07:00 发布

转载最新推荐文章于 2024-10-25 22:07:00 发布 · 1.2k 阅读

文章标签：

#MGTemplateEngine #iOS

iPhone 专栏收录该内容

131 篇文章

订阅专栏

本文介绍如何使用MGTemplateEngine简化HTML模板的管理和显示，通过设置不同的HTML模版实现内容多样化的展示方式，减轻设计人员的工作负担并提高网页内容更新的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

MGTemplateEngine比较象 PHP 中的 Smarty
模版引擎，是一个轻量级的引擎，简单好用。只要设置很多不同的HMTL模版，就能轻松的实现一个View多种内容格式的显示，对于不熟悉HTML或者减轻
工作量而言，把这些工作让设计分担一下还是很好的，也比较容易实现设计想要的效果。
首先，看看模版的代码

<!DOCTYPE html>  
    <html lang="en">  
      <head>  
        <meta charset="utf-8">  
        <title></title>  
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
        <link href="./detail.css" rel="stylesheet">  
      </head>  
      <body>  
      <div id='container' name="container">  
        <div class="title">{{ title }}</div>  
        <div class="date">{{ date }}</div>  
        <div class="content">{{ content }}</div>  
      </div>  
      </body>  
</html>

Objective-C代码 - 下面的创建代码MGTemplateEngine都是从官方的例子中参考下来的，已经有很详细的说明

// Set up template engine with your chosen matcher.  
MGTemplateEngine *engine = [MGTemplateEngine templateEngine];  
//[engine setDelegate:self];  
[engine setMatcher:[ICUTemplateMatcher matcherWithTemplateEngine:engine]];  
      
// 这里就是设置，或者里边塞变量的地方。其实也可以设置一个数组，这样模板的灵活也会更强。这里我就不演示了官方有例子  
[engine setObject:self.detailData[@"title"] forKey:@"title"];  
[engine setObject:self.detailData[@"content"] forKey:@"content"];  
      
// MGTemplateEngine/Detail/detail.html  
// MGTemplateEngine/Detail/detail.css  
NSString *templatePath = [[NSBundle mainBundle] pathForResource:@"detail" ofType:@"html"];  
      
// Process the template and display the results.  
NSString *html = [engine processTemplateInFileAtPath:templatePath withVariables:nil];  
      
// 获得HTML  
self.htmlWebView = [[UIWebView alloc] initWithFrame:CGRectMake(8, 5, 304, 320)];  
self.htmlWebView.delegate = self;  
self.htmlWebView.userInteractionEnabled = NO;  
      
// 你就能加载到HTML里面的.css文件  
NSString *baseURL = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Detail"];  
[self.htmlWebView loadHTMLString:html baseURL:[NSURL fileURLWithPath:baseURL]];  
[self.detailView addSubview:self.htmlWebView];

因为我的UIWebView是在插入到UITableView，所以在UIWebView加载完后，就得重新计算高度。因为我想让用户感觉不到这其实是一个HTML。

// 我将UIWebView添加到了self.detailView  
self.listTableView.tableHeaderView = self.detailView;

#pragma mark -
#pragma mark -# UIWebViewDelegate

- (void)webViewDidFinishLoad:(UIWebView *)webView {

// 获取整个HMTL的高度，这很好理解，很简单的JS
NSString *heightString = [self.htmlWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"container\").offsetHeight;"];
// 重设view内容大小
CGRect nFrame = self.detailView.frame;
nFrame.size.height = [heightString doubleValue] + 35.0;
self.detailView.frame = nFrame;

// 重设webview内容大小
CGRect nWebViewFrame = self.htmlWebView.frame;
nWebViewFrame.size.height = [heightString doubleValue] + 15;
self.htmlWebView.frame = nWebViewFrame;

// 让UIWebView加载完后，才设置UITableView,最后才加载评论
[self tableViewSetting];
[self getCommentList];
}

以上的都是 MGTemplateEngine 很基本的使用，将来也会大派用场的。对于内容页的显示，没有比HTML来的更方便直接，通过切换模版和简单的参数设置，多个不同类型的栏目也可以使用同一个详细页，很大程度上减轻工作理和易于维护。
要更深入的了解，可以去 MGTemplateEngine 官方网站

另参考：https://github.com/mattgemmell/MGTemplateEngine