流星：如何设计useraccounts的样式

Question

我使用meteor-useraccounts处理用户帐户 - 包括g++ -pthread -o one1 one.cpp -Wall -std=c++11 -O3 -I /opt/boost/include/ -L /opt/boost/lib/ -lboost_system -lboost_thread -static。我的boilerplate直接来自回购。

我的问题： 我不明白是要放置我自己的HTML / CSS。

我的config.js：

useraccounts:bootstrap

我在文档中读到您应该用自己的模板替换原始模板，这是我使用// Options AccountsTemplates.configure({ defaultLayout: 'emptyLayout', showForgotPasswordLink: true, overrideLoginErrors: true, enablePasswordChange: true, showLabels: false, showPlaceholders: true, negativeValidation: true, positiveValidation: true, negativeFeedback: true, positiveFeedback: true, }); AccountsTemplates.addFields([ { _id: 'firstName', type: 'text', placeholder: "First Name", required: true, re: /^[^\d]{2,}$/i, errStr: "Please enter your first name.", }, { _id: 'surName', type: 'text', placeholder: "Sur Name", required: true, re: /^[^\d]{2,}$/i, errStr: "Please enter your first name.", }, { _id: 'institution', type: 'text', placeholder: "Institution/Company", required: true, re: /^[^\d]{2,}$/i, errStr: "Please enter the institution or company you work for.", }, { _id: 'position', type: 'text', placeholder: "Position", required: true, re: /^[^\d]{2,}$/i, errStr: "Please enter the your position in the institution/company.", }, ]); 和以下模板所做的：

Template.myAtForm.replaces("atForm");

这是给定的线框：

例如，我在哪里必须添加引导类，所以我连续有两个输入字段（但不是在WF中看到的每一行）？或者，我如何设置自己的上传按钮（据我所知，甚至还没有<template name="myAtForm"> {{#unless hide}} <div class="at-form"> {{#if showTitle}} {{> atTitle}} {{/if}} {{#if showError}} {{> atError}} {{/if}} {{#if showResult}} {{> atResult}} {{/if}} {{#if showOauthServices}} {{> atOauth}} {{/if}} {{#if showServicesSeparator}} {{> atSep}} {{/if}} {{#if showPwdForm}} {{> atPwdForm}} {{/if}} {{#if showTermsLink}} {{> atTermsLink}} {{/if}} {{#if showSignInLink}} {{> atSigninLink}} {{/if}} {{#if showSignUpLink}} {{> atSignupLink}} {{/if}} </div> <!-- end main div --> {{/unless}} </template> ）？

使用type:file包的活动，我不知道将HTML / CSS放在哪里。

任何帮助真的很感激。

Answer 1

答案：更好地编写自己的模板

我确信useraccounts正在做的事情非常好。但它的目标是更简单的UI。我猜大多数应用都很满意。

但是，您可以使用CSS设置所有字段的样式。您的字段模板中添加了类（_id字段）。查看生成的 html以及useraccounts:unstyled包的来源。然后你就可以清楚地了解它的渲染算法是如何工作的。

但正如您在原始帖子中提到的那样，例如没有文件字段。这意味着你必须自己添加模板，并管理文件上传逻辑/验证。