在类别页面上显示三个完整帖子,然后仅显示其余帖子作为标题

I'm building a theme and on my category.php page I want to show several full posts (let's say 3, but need to be able to change this to 2 or 1 easily), and then the rest of the posts in the category as title links.

I have quite a bit of HTML in my loop for styling my posts and adding custom fields so sorry about all the code, but this is what my category.php page looks like now. I've tried a few things that haven't worked so have edited this to show my original code which just has a normal list of posts. I'm somewhat new to editing The Loop so would appreciate as much explanation/clarity as possible.

    <?php
     /**
     * The template for displaying Category Archive pages.
     */

    get_header(); ?>

    <div id="primary" class="<?php
    $category = get_the_category();
            echo $category[0]->cat_name;
            ?>">


    <div id="feature-container" class="full-width-container">
        <div class="full-width-container content-page" id="tagline-wrapper">
                <div id="left-black"></div>
                <div class="page-width-container">
                    <div id="tagline-box">  
                        <h1 class="category-title">Transactions</h1>
                    </div>  
                </div>
            </div>
    </div>          

    <div id="content-wrapper">

        <div id="project-menu" class="page-width-container">
            <?php wp_nav_menu( array( 'theme_location' => 'project-types' ) ); ?>
        </div>



        <div id="content" role="main" >



    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


            <div class="story-container" class="module-container">
                <div class="our-story">
                    <div class="story-image">

            <?php
                    // check if the post has a Post Thumbnail assigned to it.
                if ( has_post_thumbnail() ) {
                    the_post_thumbnail();
                } 
            ?>

                    </div>
                    <div class="story-text">
                        <article class="post" id="post-<?php the_ID(); ?>">
                            <div class="entry-container">

                <h2><a href="<?php the_permalink() ?>#content" rel="bookmark"   title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

                <div class="project-details">

                    <p><span class="details-location"><?php
                        global $wp_query;
                        $postid = $wp_query->post->ID;
                        echo get_post_meta($postid, '_project-location', true);
                        wp_reset_query();
                        ?></span><br />
                       <span class="details-funding"><?php
                        global $wp_query;
                        $postid = $wp_query->post->ID;
                        echo get_post_meta($postid, '_funding-type', true);
                        wp_reset_query();
                        ?> | <?php
                        global $wp_query;
                        $postid = $wp_query->post->ID;
                        echo get_post_meta($postid, '_funding-source', true);
                        wp_reset_query();
                        ?></span><br />
                       <span class="details-value"><?php
                        global $wp_query;
                        $postid = $wp_query->post->ID;
                        echo get_post_meta($postid, '_project-value', true);
                        wp_reset_query();
                        ?></span></p>

                </div>



            <div class="entry">



                <?php the_content(); ?>



                <?php wp_link_pages(array('before' => __('Pages: ','html5reset'), 'next_or_number' => 'number')); ?>

            </div>

            <?php edit_post_link(__('Edit this entry','html5reset'), '<p>', '</p>'); ?>

            </div>

        </article>

                    </div>
                </div>

            </div>


            <?php endwhile; endif; ?>


</div><!-- #content -->
        </div>
        </div><!-- #primary -->

<?php get_footer(); ?>

You can achive above thing using following code: First you have to loop all post and and put counter when it reach more then 2 its stop to print a content.but title will be there always.

      <?php $countPost=1;?>
      <?php if (have_posts()) : ?>
       <?php while (have_posts()) : the_post(); ?>
         <div class="post">
       <h2 id="post-<?php the_ID(); ?>">
 <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

       <?php  if($countPost>2) : /*Condition for Content*/
         the_content(); 
         endif;
       ?>
          </div>
        <?php endwhile; ?>
    <div class="navigation">
    <div class="alignleft">
    <?php posts_nav_link('','','&laquo; Previous Entries') ?>
    </div>
    <div class="alignright">
    <?php posts_nav_link('','Next Entries &raquo;','') ?>
    </div>
      </div>
    <?php else : ?>
      <h2 class="center">Not Found</h2>
     <p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
      <?php endif; ?>
    </div>

For more details please refer : https://codex.wordpress.org/The_Loop_in_Action

I figured out a bit of a workaround solution on my own, although it relies on using plugins/widgets which isn't what I'd prefer.

I simply set the Reading settings to display 2 posts, and then below the Loop I added a widget area and used the Recent Posts Extended widget to display a list of titles/links. This widget allows you to skip a certain amount of posts in the list, so I set it to start at post #3. There was no option to show posts from the current category only, so I had to use the Widget Context plugin as well and make individual widgets with a specific category to show on each corresponding category page. As I said, a bit of a convoluted solution, but the end result is exactly what I wanted to achieve.