Personal Blog---Learning 02

Article Directory

One, mind map

Insert picture description here

2. Introduction to Personal Blog

1. Front-end development

(1), page design

  1. Home
  2. Details page
  3. classification
  4. label
  5. Archive
  6. about me

2. Back-end development

  • Additions, deletions, revisions

3. Introduce Spring Boot module

  • web
  • Thymeleaf
  • JPA
  • MySQL
  • Aspects
  • DevTools

4. Technology

Back-end: Spring Boot + JPA + thymeleaf template
Database: MySQL
Front-end UI: Semantic UI framework

Three, personal blog

  • I received the last personal blog to do

1. Write the middle part of index.html

Insert picture description here
<!--中间内容-->
<div  class="m-container m-padded-tb-big">
  <div class="ui container">
    <div class="ui  grid">
      <!--左边博客列表-->
      <div class="eleven wide column">
        <!--header-->
        <div class="ui top attached segment">
          <div class="ui middle aligned two column grid">
            <div class="column">
              <h3 class="ui teal header">博客</h3>
            </div>
            <div class="right aligned column">
              共 <h2 class="ui orange header m-inline-block m-text-thin"> 14 </h2> 篇
            </div>
          </div>
        </div>

        <!--content-->
        <div class="ui attached  segment">

          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005" alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>
          <div class="ui padded vertical segment m-padded-tb-large">
            <div class="ui mobile reversed stackable grid">
              <div class="eleven wide column">
                <h3 class="ui header">你真的理解什么是财富自由吗?</h3>
                <p class="m-text">正确做好任何一件事情的前提是清晰、正确的理解目标。而事实是,我们很多人很多时候根本没有对目标正确的定义,甚至根本从来就没有想过,只是大家都那么做而已…...</p>
                <div class="ui grid">
                  <div class="eleven wide column">
                    <div class="ui mini horizontal link list">
                      <div class="item">
                        <img src="https://unsplash.it/100/100?image=1005" alt="" class="ui avatar image">
                        <div class="content"><a href="#" class="header">李仁密</a></div>
                      </div>
                      <div class="item">
                        <i class="calendar icon"></i> 2017-10-01
                      </div>
                      <div class="item">
                        <i class="eye icon"></i> 2342
                      </div>
                    </div>
                  </div>
                  <div class="right aligned five wide column">
                    <a href="#" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin">认知升级</a>
                  </div>
                </div>
              </div>

              <div class="five wide column">
                <a href="#" target="_blank">
                  <img src="https://unsplash.it/800/450?image=1005"  alt="" class="ui rounded image">
                </a>
              </div>

            </div>
          </div>


        </div>

        <!--footer-->
        <div class="ui bottom attached segment">
          <div class="ui middle aligned two column grid">
            <div class="column">
              <a href="#" class="ui mini teal basic button">上一页</a>
            </div>
            <div class="right aligned column">
              <a href="#" class="ui mini teal basic button">下一页</a>
            </div>
          </div>
        </div>

      </div>

      <!--右边的top-->
      <div class="five wide column">

        <!--分类-->
        <div class="ui segments">
          <div class="ui secondary segment">
            <div class="ui two column grid">
              <div class="column">
                <i class="idea icon"></i>分类
              </div>
              <div class="right aligned column">
                <a href="#" target="_blank">more <i class="angle double right icon"></i></a>
              </div>
            </div>
          </div>
          <div class="ui teal segment">
            <div class="ui fluid vertical menu">
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                思考与感悟
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
              <a href="#" class="item">
                学习日志
                <div class="ui teal basic left pointing label">13</div>
              </a>
            </div>
          </div>
        </div>

        <!--标签-->
        <div class="ui segments m-margin-top-large">
          <div class="ui secondary segment">
            <div class="ui two column grid">
              <div class="column">
                <i class="tags icon"></i>标签
              </div>
              <div class="right aligned column">
                <a href="#" target="_blank">more <i class="angle double right icon"></i></a>
              </div>
            </div>
          </div>
          <div class="ui teal segment">
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
            <a href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny">
              方法论 <div class="detail">23</div>
            </a>
          </div>
        </div>

        <!--最新推荐-->
        <div class="ui segments m-margin-top-large">
          <div class="ui secondary segment ">
            <i class="bookmark icon"></i>最新推荐
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment" >
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
          <div class="ui segment">
            <a href="#" target="_blank" class="m-black m-text-thin">用户故事(User Story)</a>
          </div>
        </div>

        <!--二维码-->
        <h4 class="ui horizontal divider header m-margin-top-large">扫码关注我</h4>
        <div class="ui centered card" style="width: 11em">
          <img src="../static/images/wechat.jpg" alt="" class="ui rounded image" >
        </div>
      </div>

    </div>
  </div>

</div>

  • attached
  • stackable
  • mobile reversed
Insert picture description here

3. Write css style

.m-padded-mini{
    padding:0.2em !important;
}
.m-padded-tiny{
    padding:0.3em !important;
}
.m-padded-tb-mini{
    padding-top:0.2em !important;
    padding-bottom:0.2em !important;
}
.m-paddded-tb-tiny{
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
}
.m-paddded-tb-small{
    padding-top: 0.5em !important;
    padding-bottom: 0.5em !important;
}
.m-paddded-tb{
    padding-top: 1em !important;
    padding-bottom: 1em !important;
}
.m-paddded-tb-large{
    padding-top: 2em !important;
    padding-bottom: 2em !important;
}
.m-paddded-tb-big{
    padding-top: 3em !important;
    padding-bottom: 3em !important;
}
.m-paddded-tb-huge{
    padding-top: 4em !important;
    padding-bottom: 4em !important;
}
.m-paddded-tb-massive{
    padding-top: 5em !important;
    padding-bottom: 5em !important;
}
/*----text----*/
.m-text{
    font-weight: 300 !important;
    letter-spacing: 1px !important;
    line-height: 1.8;
}

.m-text-thin{
    font-weight: 300 !important;
}
.m-text-spaced{
    letter-spacing: 1px !important;
}
.m-twxt-lined{
    line-height: 1.8;
}


/*----margin------*/
.m-margin-top-small{
    margin-top: 0.5em !important;
}
.m-margin-top{
    margin-top: 1em !important;
}
.m-margin-top-large{
    margin-top: 2em !important;
}
.m-margin-tb-tiny{
    margin-top: 0.3em !important;
    maragin-bottom: 0.3em !important;
}
/*-----opactity------*/

.m-opacity-mini{
    opacity: 0.8 !important;
}

/*---display-----*/
.m-inline-block{
    display: inline-block !important;
}
/*-----container----*/
.m-container{
    max-width: 72em !important;
    margin:auto !important;
}
/*---color---*/
.m-block{
    color: #333 !important;
}
@media screen and (max-width:768px){
    .m-mobile-hide{
        display:none !important;
    }
}

4. Operation effect

Insert picture description here

5. Add stackable to be stackable

  • Reduced pages can be stacked

(1) Modify the navigation bar

Insert picture description here

(2) Modify the middle part

Insert picture description here

(3), bottom

Insert picture description here

6. Operation effect

Insert picture description here

7. Add button icon

Insert picture description here

8, write css style

Insert picture description here

9. View the running effect

Insert picture description here

10. Hide the navigation bar on the mobile phone

Insert picture description here

11. Write css style

  • On the mobile phone screen, the navigation bar is hidden when less than 768
Insert picture description here

12. Check the running effect

Insert picture description here

13. This button is not displayed on the non-mobile terminal

Insert picture description here

14, write css style

Insert picture description here

15. Run to check the effect

Insert picture description here

16. Click the button to show the navigation bar, click again to hide

Insert picture description here
Insert picture description here

17. Run to check the effect

Insert picture description here

18. Copy a picture under images

Insert picture description here

19. Add a background image

Insert picture description here

20. Run to check the effect

Insert picture description here