Question

我正在尝试从我的主页链接到一个页面，在该页面上，我会在用户单击以显示食谱时打开Foundation Reveal模式。

我想在我的主页上显示一些食谱，当用户单击主页上的一个食谱时，我希望它打开食谱页面并在与该食谱一起的食谱页面上打开特定模式。 / p>

这是我在首页上的精选食谱代码：

<div class="content grid-x">
    <?php 
        $args = array(
            'post_type' => 'recipes',
            'orderby'   => 'rand',
            'posts_per_page' => 3
        );
        $query = new WP_Query( $args );
        $counter = 0;
        if( $query->have_posts() ) : while( $query->have_posts() ) : $query->the_post(); 
            global $post;
            $slug = $post->post_name; 
    ?>

    <a class="cell small-12 large-4 recipeCell" data-open="recipe-<?php echo $slug; ?>">
        <div class="cell text-left" >
            <img src="<?php the_field('image'); ?>"/>
            <div class="recipeTitle" data-sr><div class="doubleUnderline"><h4><?php the_title(); ?></h4></div></div>
        </div>
    </a>
    <?php $counter++; endwhile; endif; ?>
</div>

这是模态的代码（我正在使用Foundation Reveal模态）：

<div class="reveal recipeModal" id="recipe-<?php echo $slug; ?>"  style="background:url(<?php the_field('image'); ?>) center center;background-size: cover;" data-reveal>
    <div class="grid-container">
        <div class="grid-x recipeDetails">
            <img src="<?php the_field('image'); ?>" class="printableImage" />
                <div class="cell small-12 doubleUnderline"><h4><?php the_title(); ?></h4></div>
                    <h6 class="cell small-9 time">Start to Finish: <?php the_field('preparation_time'); ?></h6>
                    <h6 class="cell small-3 text-right servings">Servings: <?php the_field('servings'); ?></h6>
                    <div class="recipeInstructions">
                        <p><?php the_content(); ?></p>
                    </div>
                    <a href="#"><button class="button large printButton darkButton" style="margin:0;" onclick="window.print();return false;">Print Recipe</button></a>
                </div>   
        </div>   

        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>

如您所见，我正在使用“ recipe-” +后缀为每个配方卡创建ID，以便可以将其与需要打开的模式相关联。有没有一种方法可以将数据发送到配方页面并在那里而不是在主页上打开特定模式？

Answer 1

在您的主页上，确保您的配方链接在URL中包含配方ID作为参数。现在，您的配方链接缺少“ href”；您是否要使用AJAX或其他常规页面加载页面？我相信数据属性仅在单个页面实例上有用。

最终，您希望请求URL类似于以下几行：page = requests.get('https://www.yellowpages.com/new-orleans-la/mip/upperline-restaurant-526381149?lid=1001797484770') soup = BeautifulSoup(page.text, 'lxml') # I am trying to find this class 'sales-info' but it isn't in the html when rendered. business_name = soup.find('div', class_='sale-info') print(business_name)

然后在您的食谱页面上，在页面加载后运行Javascript，它将检查URL参数以及请求URL中是否存在特定食谱，然后相应地打开模式，否则仅按原样显示食谱页面。理想情况下，您有一个可以在其中放置JS的配方页面的自定义模板。

http://www.mywebsite.com/recipes/?recipe=34512

链接到新页面并打开特定的模式

1 个答案: