Meteor：如何设置用户帐户的样式

Question

我正在使用 meteor-useraccounts for handling user accounts - including useraccounts:bootstrap. My boilerplate 直接来自存储库。

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

我的config.js:

// 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"); 和以下模板所做的：

<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>

这是给定的线框：

例如，我必须在哪里添加 bootstrap 类以便我有两个连续的输入字段（但不是在 WF 中看到的每一行）？或者，我如何设计自己的上传按钮（据我所知甚至没有 type:file）？

带有useraccounts:unstyled包的事件，我不知道把HTML/CSS放在哪里。

非常感谢任何帮助。

Answer 1

回答：最好自己写模板

我相信 useraccounts 做得很好。但它的目标是更简单的用户界面。我想大多数应用程序都对此感到满意。

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

但是正如您在原文 post 中提到的，例如没有文件字段。这意味着您必须自己添加模板，并管理文件上传 logic/validation.

Meteor：如何设置用户帐户的样式

Meteor: how to style useraccounts

html

css

twitter-bootstrap

meteor

user-accounts