个人中心
gpt4 book ai didi

handlebars.js - Shiny Server 自定义 Handlebars.js 模板

转载 作者：行者123 更新时间：2023-12-02 03:22:48 25 4
gpt4 key购买 nike

我对 handlebars.js 一点也不熟悉，但我想自定义 Shiny Server 附带的目录索引模板。具体来说，我要做的是呈现不同应用程序的缩略图页面。

文件/opt/shiny-server/templates/directorIndex.html 带有下面的代码，其中引用了许多表达式，包括 {{title}}、对应用程序、目录和文件的引用。

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{title}}</title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
  <style type="text/css">
    body {
      font-family: Helvetica, Arial, sans-serif;
      background-color: #F5F5F5;
    }
    pre, tt, code, .code, #detail {
      font-family: 'Consolas', 'Courier New', 'Courier', monospace;
    }
    h1 {
      font-size: 40px;
    }
    a {
      text-decoration: none;
    }
  </style>
</head>
<body>

<h1>{{title}}</h1>

<ul>
  {{#each apps}}
    <li><a class="code" href="{{this.url}}">{{this.name}}</a> (application)</li>
  {{/each}}
  {{#each dirs}}
    <li><a class="code" href="{{this.url}}/">{{this.name}}</a></li>
  {{/each}}
  {{#each files}}
    <li><a class="code" href="{{this.url}}">{{this.name}}</a></li>
  {{/each}}
</ul>

</body>
</html>

所以我有两个问题。

首先 - 我怎么知道可以调用哪些表达式？

其次 - 假设我只有这个 html 页面(据我所知)我如何注册一个助手，例如 
Handlebars.registerHelper('splitURL', function(url) {
  var t = url.split("/");
  return t[1];
});

最佳答案

我同样希望自定义 directoryIndex.html 模板，并且同样缺乏关于可以使用哪些 Handlebars 表达式的文档。我不是网络开发人员，所以这里的代码可能是垃圾，但它运行良好。听起来您已经解决了您的问题，但其他人可能会在这种方法中找到一些用处。每个应用程序的图像都保存在 site_dir/images 中。

screenshot of end result

目录索引.html:

<!DOCTYPE html>
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>{{title}}</title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'>
  <link href="main.css" rel="stylesheet">
  <script type='text/javascript'>
    function include(arr,obj) {
      return(arr.indexOf(obj) != -1);
    }

    function updateView(data) {
      //update title and heading
      if ("title" in data) {
        var host = document.location.hostname;
        if (host in data.title) {
          document.title = data.title[host];
          document.getElementById("title").innerHTML = data.title[host];
        } else if ("default" in data.title) {
          document.title = data.title.default;
          document.getElementById("title").innerHTML = data.title.default;
        }
      }

      //hide cards (for directories like /images)
      if ("ignore" in data) {
        var element;
        for (var i in data.ignore) {
          if (element = document.getElementById("card_"+data.ignore[i])) {
            element.parentNode.removeChild(element);
          }
        }
      }

      //update each shiny app if it has JSON data
      if ("apps" in data) {
        for (var item in data.apps) {
          if (document.getElementById("card_"+item)) {
            if ("img" in data.apps[item])
              document.getElementById("img_"+item).src = "/images/" + data.apps[item].img;
            if ("name" in data.apps[item])
              document.getElementById("name_"+item).innerHTML = data.apps[item].name;
            if ("desc" in data.apps[item])
              document.getElementById("desc_"+item).innerHTML = data.apps[item].desc;
          }
        }
      }
    }


    function loadJSON(url) {
      var xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          var data = JSON.parse(this.responseText);
          updateView(data)
        }
      }
      xmlhttp.open("GET", url, true);
      xmlhttp.send();
    }

    document.addEventListener("DOMContentLoaded", function() {
      loadJSON("data.json");
    });
  </script>
</head>

<body>
<div id="title_bar">
  <h1 id="title"></h1>
</div>

<div id="apps">
  {{#each dirs}}
    <div id="card_{{name}}" class="card" onclick="location.href='{{url}}';" style="cursor: pointer;">
      <img id="img_{{name}}" src="" alt="{{name}}" onerror="if (this.src != '/images/missing.png') this.src = '/images/missing.png';">
      <div class="container">
        <h4 id="name_{{name}}">{{name}}</h4>
        <p id="desc_{{name}}"></p>
      </div>
    </div>
  {{/each}}
</div>

</body>
</html>

data.json(位于 site_dir 根位置): 
{
  "title": {
    "default": "Shiny Server",
    "dev_host": "Shiny Server (Development)",
    "accp_host": "Shiny Server (Acceptance)",
    "prod_host": "Shiny Server",
    "dev_host.fully.qualified.name": "Shiny Server (Development)",
    "accp_host.fully.qualified.name": "Shiny Server (Acceptance)",
    "prod_host.fully.qualified.name": "Shiny Server"
  },
  "ignore": [ "app_4", "app_5", "images" ],
  "apps": {
    "app_1": {
      "name": "app 1 name goes here",
      "desc": "app 1 description goes here",
      "img": "app1.png"
    },
    "app_2": {
      "name": "app 2 name",
      "desc": "app 2 desc",
      "img": "app2.png"
    },
    "app_3": {
      "name": "app 3 name",
      "desc": "",
      "img": "app3.png"
    }
  }
}

main.css(位于 site_dir 根位置): 
body, html {
  font-family: Helvetica, Arial, sans-serif;
  background-color: #F5F5F5;
  color: #114;
  margin: 0;
  padding: 0;
}

#title_bar {
  height: 80px;
  background-color: #3475b4;
  overflow: hidden;
  border-bottom: 1px solid #3475b3;
  -moz-box-shadow:    0px 0px 10px 3px #BBC;
  -webkit-box-shadow: 0px 0px 10px 3px #BBC;
  box-shadow:         0px 0px 10px 3px #BBC;
}

#title_bar h1 {
  margin: 14px auto .5em auto;
  padding: .2em;
  color: #EEE;
  text-align: center;
}

#apps {
  margin-top: 14px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px;
  width: 300px;
  margin: 10px;
  display: inline-block;
  vertical-align: top;
}

.card:hover {
  box-shadow: 0 12px 24px 0 rgba(0,0,0,0.2);
}

.card img {
  display: block;
  margin: 0 auto;
  max-width: 300px;
  max-height: 250px;
}

.container {
  padding: 2px 16px;
}

关于handlebars.js - Shiny Server 自定义 Handlebars.js 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32207842/

25 4 0
文章推荐： Node.js 将汉字转成\uXXXX
文章推荐： .net - 不要回滚 Entity Framework 中的错误事务
文章推荐： wordpress - 安全地存储插件特定数据
文章推荐： web - 如何根据设备平台为 firestore 指定安全规则？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com