小编Mat*_*att的帖子

我有一个markdown文件夹,每个文件都有许多键/值.我需要_faq通过密钥过滤文件夹中的所有markdown文件faq_category.

我试过了:

 {% assign post = site.faqs | where: "faq_category", name-of-category %}
  <ul>
  <li>{{ post.title }}</li>
  </ul>

但是,这最终没有显示出任何结果.

它应该循环的文件夹结构是:

jekyll
|
 --faqs
   |
   --name-of-faq
   --name-of-faq-2

示例降价文件:

title: name of faq
faq_id: 2567
slug: title-of-faq
created: Mar 6, 2017
modified: Mar 6, 2017
faq_category: how to fly

我有一个react组件需要从父Play组件中获取背景图像,而不是在样式表中设置.我试图将它作为支持传递给组件,但不确定如何使其工作:

主要成分

import React from 'react'
import ReactDOM from 'react-dom'
import DeviceBlock from '/DeviceBlock/DeviceBlock'

const Play = {
  init() {
    const container = document.getElementById('blocker-container');
    if(container) {
      ReactDOM.render(
        <DeviceBlock
        backgroundImage={'background-image-url.png'}
        logo={'url-to-logo.png'} />,
        container
      )
    }
  }
}

document.addEventListener('DOMContentLoaded', () => {
  Play.init()
})

阻止导入上述Play组件的组件

import React from 'react'
import './DeviceBlock.scss'

function DeviceBlock (props) {
  constructor(props) {
    super(props)
    this.state = {
      backgroundImage: backgroundImage,
      logo: logo;
    }
  }
  return (
    <div className='device-blocking' style={this.state.backgroundImage}>
      <div className='container'>
        <div className='logo'>
          <img src='{{this.state.logo}}' />
        </div> …

我有一行有三个图像和文本覆盖它们.我似乎无法在单独的部分中平衡文本的左右两侧.它应该如下所示:

我能够正确设置左侧的文本,但无法平衡右侧的文本,并在部分之间设置垂直管道,右边框或左边框.

     .practice-areas {
      h1 {
        font-weight: 600;
        font-size: 60px;
        font-family: 'Open Sans Condensed';
        text-transform: uppercase;
        color: #ffffff;
        position: absolute;
        bottom: 10%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-font-smoothing: antialiased;
      }
      h5 {
        text-transform: uppercase;
        color: #ffffff;
        position: absolute;
        bottom: 10%;
        left: 65%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        -webkit-font-smoothing: antialiased;
      }
      p {
        font-family: 'Open Sans Condensed';
        font-size: 20px;
        text-transform: uppercase;
        color: #ffffff;
        position: absolute;
        bottom: 10%;
        left: 55.4%;
        -moz-transform: translateX(-50%) …

我有一个简单的组件，可以将链接复制到剪贴板，并且想用复选标记交换链接图标。我有这样做的逻辑设置，但是在 3 秒后重置状态以将按钮重置回链接图标时遇到问题。如何正确设置我的useEffect和状态钩子以设置然后重置状态以显示/隐藏选中标记的链接并再次返回？

const [copySuccess, setCopySuccess] = useState('');
const [visible, setVisible] = useState(true);
const copyToClipBoard = async copyHeader => {
try {
  await navigator.clipboard.writeText(copyHeader);
    setCopySuccess('Copied!');
  } catch (err) {
    setCopySuccess('Failed to copy!');
  }
};

<Button>
    {copySuccess ? (
       <Icon name="success" />
    ):(
     <Icon
        name="linked"
        onClick={() => copyToClipBoard(url)}
     />
    )}
</Button>

我正在尝试useEffect这样的：

useEffect(() => {
    setTimeout(() => {
      setVisible(false);
    }, 3000);
 });
  

但不确定如何使用setVisible状态和超时，将图标交换回链接，让用户知道他们可以再次复制它。

在尝试在两个子组件之间切换时，我需要在子组件中有触发器按钮，并将单击功能通过子组件传递给 以切换另一个子组件。我不确定如何将道具从孩子推送到父母以触发切换。

父组件

import React from 'react'
import CancelOffer from '../CancelPages/CancelOffer'
import CancelWarning from '../CancelPages/CancelWarning'

class Cancel extends React.Component {
  constructor() {
    super()
    this.state = {
      isHidden: true
    }
  }
  toggleOffer() {
    this.setState({
      isHidden: !this.state.isHidden
    })
  }
  render() {
    return ( 
    <div className = 'cancel'
      style = {{backgroundImage: `url(${this.props.backgroundImage})`}} >
      <div className = 'container' > 
        {!this.state.isHidden &&
          <CancelOffer { ...this.props}/>
        }

        {this.state.isHidden &&
            <CancelWarning { ...this.props}/>
        }

        {this.state.isHidden &&
            <button onClick = {this.toggleOffer.bind(this)} > Click < /button>
        } 
      </div> 
      </div> …

我有一个功能性反应组件，其中包含从映射数组显示的文本。如何将字符数限制{item.description}为 250 个字符？

 import React from "react";

 const Component = props => {
  const classes = props.classes;
  return (
    <div className={classes.container}>
      <ul className={classes.items}>
        {props.children.map((item, i) => (
          <li key={i} className={classes.item}>
            <p className={classes.category}>
              {item.genre} {item.date}
            </p>
            <p className={classes.header}>{item.header}</p>
            <p className={classes.details}>{item.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

我知道如何实现这一点,但似乎并非所有相似的帖子,任何人都可以给出一个简单的例子.我想简单地将"marketing-message-global"的切换状态值存储在cookie中.如果用户单击"hide-marketing-message-btn",则切换状态将存储在cookie中.当用户刷新页面时,将使用存储的切换状态,并隐藏已切换的div.

<div id="marketing-message-global">
</div>
<div id="hide-marketing-message-btn">
</div>

$(document).ready(function() {
 if $('#hide-marketing-message-btn").clicked()
 {
    $("#marketing-message-global").hide();
    $.cookie("toggle-state") == true;
 }

if ($.cookie("toggle-state") == true)
{
    $("#marketing-message-global").hide();
}
else if ($.cookie("toggle-state") == false)
{
$("#marketing-message-global").show();
}
 });
</script>

除一个之外的所有锚链接都会在焦点上更改背景颜色,除了一个.

HTML

<a id="login-as-guest">Cancel and browse as guest</a>

CSS

#login-as-guest a:focus{ background-color: yellow; }

有任何想法吗？