Nginx 上的材料设计 [英] Material design on Nginx
问题描述
我正在尝试将 Material Design UI 应用于工作的 Web 应用程序.应用程序使用 Nginx、PHP、PostgreSQL.我有 PHP 和 PostgreSQL 的经验，所以应用程序可以工作(用记事本++编写的代码)，但它很丑，因为我没有网页设计的经验，java(脚本)所以只使用基本的 html 表单，输入，按钮...
I'm trying to apply material design UI to working web application. Application uses Nginx, PHP, PostgreSQL. I have experience with PHP and PostgreSQL so the application works (code written in notepad++), but it is ugly as I have NO experience with web pages design, java(script) so using only basic html forms, input, button...
我想改进 UI，所以我开始学习 CSS.我下载了材质图标字体并创建了几个按钮，效果很好，按钮也可以缩放到屏幕大小.
I would like to improve the UI so I started learn CSS. I downloaded material icons font and created several buttons, this works great and the buttons also scale to screen size.
h1 {
/* color: #999999; */
font-family: arial, sans-serif;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
margin-bottom: 3px;
text-align: center;
}
@font-face {
/* Material Icons big thanks to: https://google.github.io/material-design-icons/ */
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/font/MaterialIcons-Regular.ttf); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/font/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: clamp(12px,4vmin,30px);
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
.material-icons:hover {
color: e3000f;
/* background-color: #555; /* Add a dark-grey background on hover */
}
#home_button {
display: block;
position: fixed; /* Fixed/sticky position */
top: 1%;
left: 1%;
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
/*background-color: #E5E7E9;*/ /* Set a background color #E5E7E9 = 229R 231G 233B*/
background-color: rgba(229,231,233,0.5); /* Set a background color #E5E7E9 = 229R 231G 233B*/
color: black; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
text-align: center;
padding-top: 3px;
padding-left: 3px;
padding-right: 4px;
padding-bottom: 0px;
border-radius: 5px; /* Rounded corners */
}
#home_button:hover {
/*background-color: #555; /* Add a dark-grey background on hover */
filter: drop-shadow(2px 2px 2px #555);
color: #e3000f; /* Add a dark-grey background on hover */
background-color: rgba(229,231,233,1); /* Set a background color #E5E7E9 = 229R 231G 233B*/
}<!DOCTYPE html>
<head>
<!-- This line is normally NOT included as font is locally loaded in CSS --><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- This line is normally NOT included as font is locally loaded in CSS -->
</head>
<body>
<a href="/index.php"><button title="Home Button" id="home_button"><i class="material-icons" >home</i></button></a>
<body>现在我想包括表单、文本框、复选框、按钮...在指南中，他们总是依赖于node.js.我下载了 node.js 并在本地 PC 上创建了测试应用程序，但无法将其推送到 nginx.我发现了多篇带有 proxyPass 的文章，但是我不能在服务器上使用 node.js 所以这不是解决方案.
Now I would like to include forms, textboxes, checkboxes, buttons... In guide(s) they always rely on node.js. I downloaded node.js and created test application on my local PC, but can not push this to nginx. I found multiple articles with proxyPass, but I can not use node.js on server so this is not solution.
将页面样式化为 Material Design 并能够保留所有 PHP 代码和现有功能的正确方法是什么?
What is the correct way to style the pages into material design and being able to keep all the PHP code and existing functionality?
举例来说，我要完成的是移动FROM这个简单的 HTML 表单(此处简化，实际上由 PHP 生成):
To specify example what I'm trying to accomplish is to move FROM this simple HTML form (simplified here, in reality generated by PHP):
<!DOCTYPE html>
<html>
<head>
<title>Form sample</title>
</head>
<body>
<form action="/sample_form.php">
<label for="sample_input">Sample:</label><br>
<input type="text" id="sample_input" name="sample_input" value="Empty">
<input type="submit" value="Submit">
</form>
</body>
</html>TO 带有概述文本字段的材料设计表单a> 和 概述按钮.在下面的示例中有材料设计 html 语法，但缺少正确的 css 和 javascript，因此它看起来不像上面的链接.在哪里/如何获取它并使其在没有 node.js 的 Nginx 上运行?
TO material design form with outlined text fields and outlined button. In below sample there is material design html syntax, but missing correct css and javascript so it is not looking as on above links. Where/how to get it and make it run on Nginx without node.js?
<!DOCTYPE html>
<html>
<head>
<title>Form sample</title>
</head>
<body>
<form action="/sample_form.php">
<label class="mdc-text-field mdc-text-field--outlined">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" id="sample_input">Sample:</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
<input type="text" value="Empty" class="mdc-text-field__input" aria-labelledby="sample_input">
</label>
<button class="mdc-button mdc-button--outlined">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Submit</span>
</button>
</form>
</body>
</html>所有教程都严重依赖于 node.js.真的可以只在 node.js 上使用材料设计吗?如果是，node.js 代码(本地开发)可以导出并在没有 node.js 的 Nginx 上使用吗?
All the tutorials are heavily depending on node.js. Is it really possible to use material design only on node.js? If yes can the node.js code (locally developed) be exported and used on Nginx WITHOUT node.js?
如果我的问题是新手问题，请提前道歉，但我阅读了所有可用的手册并且无法找到解决方案.
Apologize in advance if my questions are newbie ones, but I read all the available manuals and was not able to find solution.
推荐答案
NodeJS 和 Nginx 是后端技术.
NodeJS and Nginx are Back-end technologies.
Material UI 是为名为 React 的 NodeJS 模板引擎设计的.
Material UI is designed for a NodeJS Templating engine called React.
在 PHP 中，如果我想从数据库中填充某些内容，我会编写类似 .我可能是错的，因为我不使用 PHP. In PHP, in case I want to populate something from a database, I would write something like 在 NodeJS 家族中，该语言没有内置的 In the NodeJS Family, the language does not have an inbuilt 现在，React 就是这样一个框架，用于在 NodeJS 中集成对模板标签(即 Now, React is such a framework which is used to integrate support for the template tag (i.e., the 所以，最后，Material-UI 是 React 的主题，React 是 NodeJS 的框架，所以，Material-UI 仅适用于 NodeJS，而不适用于运行的 Nginx、Apache 等PHP等 So, finally, Material-UI is a theme for React and, React is a framework for NodeJS so, Material-UI will work only with NodeJS and Not Nginx, Apache, etc. which run PHP, etc. 您可以使用 Bootstrap 4 作为 CSS 框架和 https://daemonite.github.io/material 或 https://djibe.github.io/material 作为 PHP 的主题(即 Nginx、Apache 等). You can use Bootstrap 4 as the CSS framework and https://daemonite.github.io/material or https://djibe.github.io/material as the theme in case of PHP (i.e., Nginx, Apache, etc.). Material-UI 的大部分教程都是基于 NodeJS，因为它是为 Node.js 编写的.您会找到一些教程，在这些教程中他们通过移植您提到的 Nginx 的 CSS 来演示 Material-UI 的使用，但是，它们无法达到标准并且 Material-UI 不推荐这样做. Most of the tutorials of Material-UI is based on NodeJS as it is made for Node.
You will find tutorials where they demonstrate the use of Material-UI by porting its CSS as you mentioned for Nginx but, they do not work up-to the mark and Material-UI does not recommend it. 我在 9 年级的时候也有这个问题.希望这能回答你的问题！ Even I had this question when I was in Grade 9. Hope this answers your question! 这篇关于Nginx 上的材料设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！<p><?php echo("Value1"); ?></p>. I may be wrong as I do not use PHP.<?php ?> 标签.因此需要使用像 EJS 和 React 这样的模板引擎来帮助集成 PHP 的此功能.<?php ?> tag. So templating engines like EJS and React need to be used which help integrating this functionality of PHP.<?php ?> 标签)的支持.Material-UI 是 React 的主题.<?php ?> tag) in NodeJS. and Material-UI is a theme for React.
