GitHub + Hexo build their own blog (2) Next theme configuration

Check out my blog for more details: sandop.github. IO /

1. Basic configuration

There are two main configuration files in Hexo, both named _config.yml. One, located at the root of the site, contains the configuration of Hexo itself; The other is in the topic directory, and this configuration is provided by the topic author to configure topic-related options.

For ease of description, the former is referred to as a site profile and the latter as a topic profile in the following notes.

1. Basic site Settings

In the site configuration file, _config.yml, in the root directory of the blog


# Site
title: Sando blog       
subtitle: Code diary      
description: The first mail magazine
keywords:
author: Sando
language: zh-Hans
timezone:

Copy the code

2. Profile picture Settings

2.1 Setting the Profile Picture

Add avatar in the site configuration file and set the value to the link address of the avatar. The address can be a network address or a local address (placed in the source/images/ directory)

# Sidebar avatar Settings
avatar: /images/user.jpg
Copy the code

2.2 Head rotation animation

Open \themes\next\source\css_common\ Components \sidebar\sidebar-author. Styl and add the following code:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
 
  /* Head is round */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 # 333sf;
 
  /* Set animation: (play) animation name (2s) animation playback time unit in seconds or microseconds (ase-out) animation playback speed curve to end at low speed (1s) wait 1 second and then start animation (1) animation playback times (infinite)]*/
 
 
  /* Rotate your head 360 degrees over it */
  -webkit-transition: -webkit-transform 1.0 s ease-out;
  -moz-transition: -moz-transform 1.0 s ease-out;
  transition: transform 1.0 s ease-out;
}
 
img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
 
  /* Rotate your head 360 degrees over it */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
 
/* Z axis rotation animation */@ -webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg); 100%} {-webkit-transform: rotateZ(-360deg); @ -}}moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg); 100%} {-moz-transform: rotateZ(-360deg); }} @keyframes play {
  0% {
    transform: rotateZ(0deg); 100%} {transform: rotateZ(-360deg); }}Copy the code

3. Theme layout Settings

Set Scheme to Pisces in the topic configuration file (_config.yml in the next topic directory), and you can set it to anything else you like

# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini
Copy the code

4. Menu item Settings

Set to Menu in the theme configuration file, and add movies. Note: Don’t set movies here, that’s where you look for files! The following

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  #archives: /archives
  #search: /search
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404
  movies: /movies || film
Copy the code

These Settings should be associated with the corresponding YML document in the languages file in your subject directory. For example, if you set language to zh-hans in the configuration file at the root of the site, go to the Languages file in the subject directory and change zh-Hans.yml to display the new Chinese content of the menu item

menu:
  home: Home page
  archives: The archive
  categories: classification
  tags: The label
  about: about
  search: search
  schedule: calendar
  sitemap: Site map
  commonweal: The public in 404
  movies: The movie
Copy the code

5. Set menu item ICONS

The corresponding field in the topic configuration file is menu_icons. The format is item name: icon name, where item name corresponds to the configured menu name. Icon name is the name of the Font Awesome icon. While enable controls whether ICONS are displayed, you can set it to false to remove ICONS.

menu_icons:
  enable: true
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat
  movies: film
Copy the code

To create a new column, icon, in the Font Awesome icon inventory, for example, movies, look in the icon library and select the film icon. In the theme configuration file, in menu_icons, change movies: film

6. Set the sidebar position

Modify the position value of sidebar in the theme directory in the theme configuration file

sidebar:
  # Sidebar Position, available value: left | right (only for Pisces | Gemini).
  position: left
  #position: right
Copy the code

7. Add a TAB page

You can add the label option to the menu bar of the main page by modifying the menu option in the _config.yml file under the next theme. However, if you click the label, the page not found will be displayed. To create a new page, type hexo New Page tags in Git Bush

Add type: “tags” to the new index.md file

---
title: tags
date: 2019-02-18 17:16:00
type: "tags"
---
Copy the code

When you want to tag an article, simply tag the tags of the specific article in the blog/source/_ POST directory

8. Sidebar social section

The modification of the sidebar social link consists of two parts, the first is the link and the second is the link icon. Both configurations are in the topic configuration file

(1) Links are placed under the social field, one link in a row. Its key value format is display text: link address.

# Social links
social:
  GitHub: https://github.com/your-user-name
  Twitter: https://twitter.com/your-user-name
  Weibo: http://weibo.com/your-user-name
  Douban: http://douban.com/people/your-user-name
  Zhihu: http://www.zhihu.com/people/your-user-name
  #, etc.
Copy the code

(2) Set the ICONS of the links. The corresponding field is Social_icons. The matching key is the same as the displayed text of the link configured in the previous step (case matching is strict), and the icon name is the name of the Font Awesome icon (without the fa- prefix). The enable option controls whether ICONS are displayed or not. You can set false to remove ICONS. The seoial_icons node in the back of the value is http://fontawesome.io/icons/ provided in the name of the icon. After that, other links such as Twitter and Weibo can be added or deleted by themselves.

# Social Icons
social_icons:
  enable: true
  # Icon Mappings
  GitHub: github
  Twitter: twitter
  Weibo: weibo
Copy the code

9. Display the current browsing progress

Change scrollPercent to true in themes/*/_config.yml,b2t to true to return to the top and browse progress displayed under the left sidebar, change to false to show in the lower right corner, according to personal preferences.

sidebar:
# Sidebar Position - the Sidebar Position (only for Pisces | Gemini two styles effectively)
  position: left        // Keep to the left
  #position: right // Position to the right

# Sidebar Display - the Sidebar shows time (only to Muse | Mist two styles effectively)
  #display: post // The default behavior to display when the article page has a list of contents
  display: always       // display it on all pages
  #display: hide // Hide on all pages (can be expanded manually)
  #display: remove completely //

  offset: 12            // Text spacing (for Pisces only Effective) | Gemini two styles  b2t: false            // Return to the top button (Pisces only Effective) | Gemini two styles  scrollpercent: true   // Returns the percentage of the top button
Copy the code

Second, personalized Settings

1, add lovely two yuan kanban niang

English introduction Chinese introduction

1.1. Install the plug-in

npm install --save hexo-helper-live2d

1.2, configuration,

Add the configuration to the _config.yml file in the root directory or to the _config.yml file in the theme.


live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: Live2d-widget-model -< your favorite model name >
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

Copy the code

Model connection configuration details

1.3. Configuration Files

There are many methods for configuration files. Here is the main method I use: For details, please refer to the following:

English introduction Chinese introduction

1.3.1 Create live2d_models in the root directory of the blog;

1.3.2 Create folder < your favorite model name > under live2d_Models;

1.3.3 Create a JSON file under < your favorite model name > : < your favorite model name >.model.json;

1.4. Install the model

From the command line (Git Bash), run the following command:

NPM install –save live2D-widget-model -< your favorite model name > model install

1.5. View the results

Run the following command from the command line (Git Bash) to view the test results at http://127.0.0.1:4000/ :

hexo clean && hexo g && hexo s

1.6. Change the model

To change the model, change model.use from step 2. Delete the original files in step 3, recreate, install the model, and view the results

Fork me on Github

2.1, clickherePick the style you like and copy the code

2.2. Then paste the copied code into themes/next/layout/_layout.swig`<div class="headband"></div>`“) and change the href to your Github address

2.3 If the location is incorrect, modify it in the IMG label`style="position:fixed; top:0; right:0"`

3. Set the site’s Favicon

Find a in EasyIcon or Iconfont ico icon (32 * 32), and change the name of the icon to the favicon. Ico, then put the icon/themes/next/source/images, and modify the theme configuration file:

4. Add a shadow effect to the homepage article

Open themes\next\source\css_custom\custom.styl and add:

Margin-top: 0px; margin-top: 0px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5); }Copy the code

5, the top of the site loading bar

Change the theme configuration file (_config.yml) to change pace: false to pace: true. You can also change the style of the loading bar, as shown in the following image:

6. Count the number of articles read

1. Sign up for leanCloud and create your own app. 2. Click the Settings icon in the upper right corner of the picture to enter the application interface; 3. Go ahead and create a table and name it Counter 4. Go to Settings -> App Key to obtain the App ID and App key. 5. Open the themes/*/_config.yml configuration file.

leancloud_visitors:
  enable: true
  app_id: # your app_id
  app_key: # your app_key
Copy the code

6. Complete the configuration and recompile. At this point you have successfully set up the read count

7, article encryption access

Open themes->next-> Layout ->_partials->head.swig and insert this code in the following location:

<script>
    (function(a){
        if('{{ page.password }}') {if (prompt('Please enter the article password')! = ='{{ page.password }}'){
                alert('Wrong password! '); history.back(); }}}) ();</script>

Copy the code

Then write password: **** on the article as follows:

8. Modify the link URL

Edit the _config.yml file in the site configuration file and modify the permalink field: permalink: :category/:title/

9. Article at the top

9.1 Installing Plug-ins

npm uninstall hexo-generator-index --save npm install hexo-generator-index-pin-top --save

9.2 Add “top” to the articles to be placed at the top. The higher the value is, the more advanced the articles will be

---
title: 'GitHub + Hexo build your own blog (2) Next Theme configuration '
date: 2019-02-19 15:35:40
tags: [hexo,github]
categories: blog,hexo,next
top: 10
---
Copy the code

9.3 Setting the top mark

Open: /themes/*/layout/_macro/post.swig, navigate to

and insert the following code:

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>Placed at the top</font>
  <span class="post-meta-divider">|</span>
{% endif %}
Copy the code

10. Hide the bottom of the page powered By Hexo

The first method: In the theme configuration file, find the footer and configure it as follows:

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon: heart

  # If not defined, will be used `author` from Hexo main config.
  copyright: Sando
  # -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false
Copy the code

Second method: open themes/next/layout/_partials/footer.swig and use
Hide the code between, or directly delete.

11. Statistical function

1. Install hexo-wordcount in the root directory and run NPM install hexo-wordcount –save 2. Then in the topic configuration file, configure the following:

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: true
Copy the code

12. Word count at the bottom of the website

1. Install hexo-wordcount in the root directory and run NPM install hexo-wordcount –save 2. Then add the following to the end of the /themes/next/layout/_partials/footer.swig file:

  <div class="theme-info">
    <div class="powered-by"></div>
    <span class="post-count">{{totalcount(site)}</span>
  </div>
Copy the code

13, addREADME.mdfile

There is usually a readme. md file under each project, but there is no readme. md file under a project after deploying to the repository using hexo.

Add a readme. md file to the source root in the Hexo directory, modify the site configuration file _config.yml, and set the skip_render parameter to skip_render: readme. md

Modify the hashtag at the bottom of the article

Modify the template /themes/next/layout/_macro/post.swig, search rel=”tag”># and replace # with #

15. Add RSS

NPM install –save hexo-generator-feed 2. Add the following content to the site configuration file _config.yml:

# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed
Copy the code

3. Configure RSS in the topic configuration file.

rss: /atom.xml
Copy the code

4. After configuration, run hexo clean && hexo g && hexo S; 5. Rebuild and you will see the atom.xml file in the./public folder. Then start the server to see if it works before deploying to Github

16, click on the heart effect

1. Create a new love-.js file in the directory /themes/*/source/js/ SRC and copy the code into it.

! function (e, t, a) {
  function n() {
    c(".heart{width: 10px; height: 10px; position: fixed; background: #f00; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }.heart:after,.heart:before{content: ''; width: inherit; height: inherit; background: inherit; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; position: fixed; }.heart:after{top: -5px; }.heart:before{left: -5px; }"), o(), r()
  }

  function r() {
    for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += 004., d[e].alpha -= 013., d[e].el.style.cssText = "left:" + d[e].x + "px; top:" + d[e].y + "px; opacity:" + d[e].alpha + "; transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg); background:" + d[e].color + "; z-index:99999");
    requestAnimationFrame(r)
  }

  function o() {
    var t = "function"= =typeof e.onclick && e.onclick;
    e.onclick = function (e) {
      t && t(), i(e)
    }
  }

  function i(e) {
    var a = t.createElement("div");
    a.className = "heart", d.push({
      el: a,
      x: e.clientX - 5.y: e.clientY - 5.scale: 1.alpha: 1.color: s()
    }), t.body.appendChild(a)
  }

  function c(e) {
    var a = t.createElement("style");
    a.type = "text/css";
    try {
      a.appendChild(t.createTextNode(e))
    } catch (t) {
      a.styleSheet.cssText = e
    }
    t.getElementsByTagName("head") [0].appendChild(a)
  }

  function s() {
    return "rgb("+ ~ ~ (255 * Math.random()) + ","+ ~ ~ (255 * Math.random()) + ","+ ~ ~ (255 * Math.random()) + ")"
  }
  var d = [];
  e.requestAnimationFrame = function () {
    return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e) {
      setTimeout(e, 1e3 / 60)
    }
  }(), n()
}(window.document);

Copy the code

2. Add it before at the end of \themes\*\layout\_layout.swig

<! -- Page click little red heart -->
<script type="text/javascript" src="/js/src/love.js"></script>
Copy the code

3. I chose the special effects of socialist core values, because we are all successors to socialism!!

(function() {
    
    var T_color = "";// The font color is random if you don't set it.
    
    var T_size = [10.20];// Text size range, not recommended too large
    
    var T_font_weight = "bold";// Font gradient -->normal,bold,900
    
    var AnimationTime = 1500;// The total number of milliseconds the text disappears
    
    var Move_up_Distance = 388;// Text move distance, positive numbers represent up, vice versa
    
    var a_index = 0;
    $("html").click(function(e){
        var a = new Array("Rich"."Democracy"."Civilization"."Harmony"."Freedom"."Equality"."Justice" ,"The rule of law"."Patriotic"."Professional"."Good faith"."Friendly");
        var $i = $("<span/>").text(a[a_index]);
        a_index = (a_index + 1) % a.length;
        var x = e.pageX,y = e.pageY;
        var x_color =  "#" + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(- 6);//--> random color
        //console.log(x_color);
        if(T_color.length>=4){
            x_color = T_color;
        }
        
        var x_size = Math.random()*(T_size[1]-T_size[0]) + T_size[0];
        x_size +=  "px";
        
        $i.css({
            "z-index": 99999."top": y - 20."left": x,
            "position": "absolute"."font-weight": "bold"."font-size":x_size,
            "color": x_color
        });
        $("html").append($i);
        $i.animate({"top": y-Move_up_Distance,"opacity": 0},AnimationTime,function() { $i.remove(); }); }); }) ();Copy the code

17, modify the link text style in the article

1. Modify the themes\*\source\ CSS \_common\ Components \post\post.styl file and add the following CSS styles at the end:

// Link text styles within articles
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423; }}Copy the code

18. Add an “End of article” tag at the end of the article

1. Create a passage-end-tag.swig file in path \themes\*\layout\_macro and add the following contents:

<div>
    {% if not is_index %}
        <div style="text-align:center; color: #ccc; font-size:14px;">------------- End<i class="fa fa-paw"></i>Thank you for reading -------------</div>
    {% endif %}
</div>
Copy the code

2. Open the themes\*\layout\_macro\post.swig file and add the following code after post-body and before post-footer.

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

Copy the code

3. Open the theme configuration file (_config.yml) and add the following at the end:

Add a "end of article" tag to the end of the article
passage_end_tag:
  enabled: true
Copy the code

4. After the above Settings are complete, add this image at the end of each post

19. Customize mouse styles

Open themes/*/source/ CSS /_custom/custom.styl and write the following code inside:

// Cursor style * {cursor: url("http://om8u46rmb.bkt.clouddn.com/sword2.ico"),auto! important } :active { cursor: url("http://om8u46rmb.bkt.clouddn.com/sword1.ico"),auto! important }Copy the code

Canvas background

In the theme configuration file, find the Canvas configuration item and apply the Canvas effects that come with NNext

Want to change color and quantity? Modify the file: / themes/next/source/lib/canvas – nest/canvas – nest. Min. Js, modify the reference

21. Modify the width of the content area

Edit the source/ CSS /_variables/custom.styl file of the theme and add new variables:

$content-desktop = 700px; $Content-desktop - Large = 900pxCopy the code

However, this method does not apply to Pisces Scheme, which needs to be modified at the same timeheaderThe width,.main-innerAnd the width of.content-wrapThe width of the. For example, use percentages (the layout of Pisces is defined insource/css/_schemes/Picses/_layout.stylC)

.header{ width: 60%; }
.container .main-inner { width: 60%; }
.content-wrap { width: calc(100% - 260px); }
Copy the code

After exceeding a certain width (too much text in a line leads to too large line break span), the reading experience is not good. I adjusted the width to 60%, you can test and adjust by yourself

Reward function

1. Prepare alipay and wechat QR codes and store them in Themes /*/source/images 2. Set this in the topic configuration file (_config.yml)

# Reward
reward_comment: Thank you for the latiao!
wechatpay: /images/wechatpay.png
alipay: /images/alipay.jpg
Copy the code

3. Repair images flashing bug, modify the next/source/CSS / _common/components/post/post – reward. Styl, annotation wechat: hover and alipay: hover

23. Configure the Valine comment system

1.Valine is a fast, clean and efficient backend free review system based on Leancloud; 2. Obtain the APP ID and APP KEY of Leancloud, as described in Step 6. 3. Open the theme configuration file: themes/*/_config.yml;

# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
  enable: true
  appid:  # your leancloud application appid
  appkey: # your leancloud application appkey
  notify: true # mail notifier , https://github.com/xCss/Valine/wiki
  verify: false # Verification code
  placeholder: Say something here... # comment box placeholder
  avatar: identicon # comments header style/mm/identicon monsterid/wavatar/retro/hide
  guest_info: nick,mail,link # custom comment header
  pageSize: 10 # pagination size
Copy the code

4. For other configurations and email reminders, see the official website of Valline detailed configuration

24. Add a search function

1. Install hexo-generator-searchdb in the root directory, NPM install hexo-generator-searchdb –save; 2. Add the following fields to the site configuration file

search:
  path: search.xml
  field: post
  format: html
  limit: 10000
Copy the code

3. Edit the subject configuration file to enable local search

# Local search
local_search:
  enable: true
Copy the code

No garlic son access statistics

1. Edit the configuration item of busuanzi_count in themes/*/_config.yml.

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i>
  site_uv_footer:
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i>
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i>
  page_pv_footer:
Copy the code

2. Find the theme to call the non-theme swig file \themes*\layout_third-party\analytics\busuanzi-counter. Swig 3. Change the domain name

Add to the original:<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>Domain name change can be:<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
Copy the code

26, add 404 public interface

1. Enter hexo new page 404 in the root directory. 2. Open the newly created page file, which is in the root directory of the Hexo folder /source/404/index.md by default. 3. Change the file name of index.md to 404.html. 4. Write content in the document, Tencent Commonweal is used here;

-- Title: 404 Not Found: This page cannot display toc: false comments: false permalink: /404 --
      
<html>
    <head>
         <meta charset="UTF-8" />
         <title>404</title>                                                                                                                                        
    </head>
    <body>
         <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="Back to home page" homePageUrl="https://sandop.github.io"></script>
	</body>
</html>
Copy the code

5. Change the link back to the home page to your own link.

Web code compression

There are a lot of blog posts on this topic. The normal way is to use gulp for compression, but it didn’t work, so we replaced it with hexo-Neat.

NPM install hexo-neat –save; 2. Modify the site configuration file and add the following code at the end.

# hexo-neat
# Blog compression
neat_enable: true
# compressed HTML
neat_html:
  enable: true
  exclude:
# compress CSS
neat_css:
  enable: true
  exclude:
    - '**/*.min.css'
# compression js
neat_js:
  enable: true
  mangle: true
  output:
  compress:
  exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js'

Copy the code

3. Run hexo clean && hexo G && Hexo S to check the effect.

28. Add the beating heart at the bottom of the site

1. In the themes/*/_config.yml configuration file, change the footer;

footer:
  icon: heart
Copy the code

2. Edit the TAB and add id=”heart” to span in /themes/*/layout/_partials/footer.swig.

 <span class="with-love" id="heart">
Copy the code

3. Edit the CSS and change the style in themes/*/source/ CSS /_custom/custom.styl as follows:

@keyframes heartAnimate {0%,100%{transform:scale(1); Were 10% and 30%} {the transform: scale (0.9); } 20%, 40%, 60%, 80%, {transform: scale (1.1); Were 50% and 70%} {the transform: scale (1.1); }} #heart {animation: heartAnimate 1.33s ease-in-out infinite; } .with-love { color: rgb(255, 113, 168); }Copy the code