小编dra*_*035的帖子

使用[woocommerce_checkout]短do_shortcode('[woocommerce_checkout]')代码(在我加载Ajax的PHP代码中)我可以在任何地方显示结帐表单.但缺少付款方式.我怎么能有这些呢？

在这个答案之后我尝试垂直居中我的header元素,但是我遇到了麻烦,因为container中间有一个元素可以确保它们包含在某个max-width中心内.我应用于display: table-cell这个元素,现在它max-width不起作用(占据整个屏幕宽度,无论它max-width).如何解决这个问题呢？

标记:

<header class="banner">
  <div class="container">
    <a class="header__branding" href="<?php bloginfo( "wpurl" ); ?>">
      <img src="<?php bloginfo( "template_url" ); ?>/dist/images/baia_logo.svg" />
    </a> 
    <nav class="nav_primary">
      <?php wp_nav_menu( array( 'menu' => 'main menu' ) ); ?>
    </nav>
  </div>
</header>

CSS:

.banner {
    height: 160px;
    width: 100%;
    display: table;
    background: url(../images/header.jpg) 50% 50% repeat-x;
}
.container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    vertical-align: middle;
    display: table-cell; …

尽管在编解码器中完全遵循了示例,但在单击分页next链接(http:// localhost:3000/my_project/news/page/2 /)时我到达的页面不存在("找不到页面").

为什么？

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; echo 'paged = ' . $paged;
$regular_posts = new WP_Query('posts_per_page=3&paged=' . $paged);
while ($regular_posts->have_posts()): $regular_posts->the_post(); 
  the_title();
endwhile;
echo get_next_posts_link('Older Entries', $regular_posts->max_num_pages);

此代码包含在我的"home.php"模板中,管理我在仪表板中创建的"新闻"页面,并在"阅读设置"中设置为"帖子页面".

在PHP当我们从另一个文件包含的代码,我们包括它,就是这样,代码现在我们进行的包含文件中提供给我们.但是Vue.js,在导入组件后,我们还必须将其导出.

为什么？我们为什么不简单地导入它？

在我的主要组件中，我有：

mounted() {
    window.$cookie.set('cookie_name', userName, expiringTime);
},

这会产生以下错误：

挂载钩子错误：“TypeError：无法读取未定义的属性‘set’”

在我的main.js我有：

import VueCookies from 'vue-cookies';
Vue.use(VueCookies);

任何的想法？

在我的 Vue 项目中，我有以下元素：

<img
  class="header__branding__logo"
  src="@/assets/img/logo_desktop.svg"
/>

它是自动关闭的。然而，ESlint 抛出了这个警告：

Disallow self-closing on HTML void elements (<img/>)  vue/html-self-closing

对我来说没有任何意义，我错过了什么吗？有什么问题？

我想在我的应用程序中使用Vue 测试库Nuxt.js。但是在安装软件包后立即启动测试会触发此错误：

'vue-cli-service' 不是内部或外部命令，也不是可运行的程序或批处理文件。

这大概是因为Nuxt.js不使用vue-cli-service.

尽管如此，有没有一种简单的方法可以使用Vue Testing Librarywith Nuxt.js？

我有一个模态，它是半透明深色背景上的白色容器。当触发此模式时，我希望背景淡入，之后我希望白色容器从屏幕底部向上滑动。

但是，虽然淡入有效，但向上滑动却不起作用。我究竟做错了什么？

模板：

<transition name="modal">
  <div v-if="showModal" class="backdrop">
    <transition name="content">
      <div v-if="showModal" @click="showModal = false" class="container">
        content
      </div>
    </transition>
  </div>
</transition>

CSS 动画：

.modal-enter-active {
  animation: fade-in-and-slide-up 1s;
}

.content-enter-active {
  animation: wait-and-fade-in 4s;
}

@keyframes wait-and-fade-in {
  0% {
    opacity: 0;
  }

  66% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-in-and-slide-up {
  0% {
    transform: translateY(100%);
  }

  50% {
  }

  100% {
    transform: translateY(0);
  }
}

代码沙箱

我经常发现自己必须将徽标和主菜单垂直居中放在全角标题中。是否有一种广泛接受的方法来处理此问题？

我有一个项目列表(从CMS获取),其编号未知.我需要在大致相同数量的项目的两列中显示此列表.以下代码有效但我在下面解释为什么它有问题:

<ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
</ul>

ul {
  display: flex;
  flex-wrap: wrap;
}

如果物品的内容总是相同的高度,这一切都很好.但是当一个项目中的内容更长时,同一行中的同级项目将被强制扩展以匹配相同的高度.我不希望这样.我希望两列在项目高度方面完全独立.

单独使用CSS可能吗？

编辑:

这是一个揭露问题的JSfiddle:https://jsfiddle.net/g9p3m2dp/