• Hexo建站指南

    新博客地址：https://gyrojeff.top，欢迎访问！ 本文为博客自动同步文章，为了更好的阅读体验，建议您移步至我的博客

    本文标题:Hexo建站指南

    文章作者:gyro永不抽风

    发布时间:2020年03月08日 - 19:03

    最后更新:2020年09月15日 - 07:09

    原始链接:http://hexo.gyrojeff.moe/2020/03/08/Hexo%E5%BB%BA%E7%AB%99%E6%8C%87%E5%8D%97/

    许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 转载请保留原文链接及作者！

    奶茶铺开张

    创建GitHub项目

    到自己的GitHub，新建一个repository，名为username.github.io，其中username是用户名。

    安装Hexo

    1
    npm install -g hexo-cli

    Once Hexo is installed, run the following commands to initialize Hexo in the target <folder>.

    1
    2
    3
    $ hexo init <folder>
    $ cd <folder>
    $ npm install

    初始化完成之后，文件目录：

    1
    2
    3
    4
    5
    6
    7
    8
    .
    ├── _config.yml
    ├── package.json
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes

    配置_config.yml

    我的配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    # Hexo Configuration
    ## Docs: https://hexo.io/docs/configuration.html
    ## Source: https://github.com/hexojs/hexo/

    # Site
    title: gyro永不抽风
    subtitle: ああああああああああああああああおおおおおおおおおおおおおおおお
    description: 更新？咕咕咕...
    keywords: 蒟蒻
    author: Haoyun Qin
    language: zh-CN
    timezone: Asia/Shanghai

    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: 你自己的域名
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    pretty_urls:
      trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
      trailing_html: true # Set to false to remove trailing '.html' from permalinks

    # Directory
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:

    # Writing
    new_post_name: :year:month/:title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link:
      enable: true # Open external links in new tab
      field: site # Apply to the whole site
      exclude: ''
    filename_case: 0
    render_drafts: false
    post_asset_folder: true
    relative_link: false
    future: true
    highlight:
      enable: true
      line_number: true
      auto_detect: false
      tab_replace: ''
      wrap: true
      hljs: false

    # Home page setting
    # path: Root path for your blogs index page. (default = '')
    # per_page: Posts displayed per page. (0 = disable pagination)
    # order_by: Posts order. (Order by date descending by default)
    index_generator:
      path: ''
      per_page: 10
      order_by: -date

    # Category & Tag
    default_category: uncategorized
    category_map:
    tag_map:

    # Metadata elements
    ## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
    meta_generator: true

    # Date / Time format
    ## Hexo uses Moment.js to parse and display date
    ## You can customize the date format as defined in
    ## http://momentjs.com/docs/#/displaying/format/
    date_format: YYYY-MM-DD
    time_format: HH:mm:ss
    ## Use post's date for updated date unless set in front-matter
    use_date_for_updated: false

    # Pagination
    ## Set per_page to 0 to disable pagination
    per_page: 10
    pagination_dir: page

    # Include / Exclude file(s)
    ## include:/exclude: options only apply to the 'source/' folder
    include:
    exclude:
    ignore:

    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next

    symbols_count_time:
      symbols: true
      time: true
      total_symbols: true
      total_time: true

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
      type: git
      repo: your repository link
      branch: master

    安装Next

    在blog的根目录下

    1
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next

    添加访客量显示

    在themes/next/layout/_partials/footer.swig末尾添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="powered-by">
        <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
        <i class="fa fa-user-md"></i>
        <span id="busuanzi_container_site_uv">
            本站访客数:<span id="busuanzi_value_site_uv"></span>
        </span>
        <span class="post-meta-divider">|</span>
        <span id="busuanzi_container_site_pv">
            本站访问量<span id="busuanzi_value_site_pv"></span>
        </span>
    </div>

    自定义样式

    在next的_config.yml当中解出如下两行的注释

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Define custom file paths.
    # Create your custom files in site directory `source/_data` and uncomment needed files below.
    custom_file_path:
        head: source/_data/head.swig
        #header: source/_data/header.swig
        #sidebar: source/_data/sidebar.swig
        #postMeta: source/_data/post-meta.swig
        #postBodyEnd: source/_data/post-body-end.swig
        #footer: source/_data/footer.swig
        #bodyEnd: source/_data/body-end.swig
        #variable: source/_data/variables.styl
        #mixin: source/_data/mixins.styl
        style: source/_data/styles.styl

    并在source下新建文件夹_data，在_data当中新建文件head.swig, styles.styl。

    更改页面下方年份和copyright之间的图标

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # Icon between year and copyright info.
    icon:
      # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
      # `heart` is recommended with animation in red (#ff0000).
      name: heart
      # If you want to animate the icon, set it to true.
      animated: true
      # Change the color of icon, using Hex Code.
      color: "#FF3348"

    在文章最后与侧边栏附上版权声明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # Creative Commons 4.0 International License.
    # See: https://creativecommons.org/share-your-work/licensing-types-examples
    # Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
    # You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
    # CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
    creative_commons:
      license: by-nc-sa
      sidebar: true
      post: true
      language: zh-cn

    在文章最后加入自定义版权声明

    在themes/next/layout/_macro/新建文件：my-copyright.swig

    写入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    <style>
    .my_post_copyright {
       85%;
      max- 45em;
      margin: 2.8em auto 0;
      padding: 0.5em 1.0em;
      border: 1px solid #d3d3d3;
      font-size: 0.93rem;
      line-height: 1.6em;
      word-break: break-all;
      background: rgba(255,255,255,0.4);
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
      display: inline-block;
       5.2em;
      color: #b5b5b5;
      font-weight: bold;
    }
    .my_post_copyright .raw {
      margin-left: 1em;
       5em;
    }
    .my_post_copyright a {
      color: #a3d2a3;
      border-bottom:0;
    }
    .my_post_copyright a:hover {
      color: #a3d2a3;
      text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
      color: #000;
    }
    .my_post_copyright .post-url:hover {
      font-weight: normal;
    }
    .my_post_copyright .copy-path {
      margin-left: 1em;
       1em;
      +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
      color: #808080;
      cursor: pointer;
    }
    </style>
    <div class="my_post_copyright">
      <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
      
      <!-- JS库 sweetalert 可修改路径 -->
      <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
      <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
      <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
      <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
      <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
      <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
      <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
        <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
      </p>
      <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-SA 4.0)">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a> 转载请保留原文链接及作者！</p>  
    </div>
    <script> 
        var clipboard = new Clipboard('.fa-clipboard');
    	  $(".fa-clipboard").click(function(){
          clipboard.on('success', function(){
            swal({   
              title: "",   
              text: '复制成功',
              icon: "success", 
              showConfirmButton: true
              });
    	    });
        });  
    </script>

    打开themes/next/layout/_macro/post.swig，在

    1
    2
    3
    {%- if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
      {{ partial('_partials/post/post-related.swig') }}
    {%- endif %}

    后添加：

    1
    2
    3
    4
    {% if not is_index %}
      {% include 'my-copyright.swig' %}
    {% endif %}

    选择Gemini主题

    1
    2
    3
    4
    5
    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

    适配系统的暗色模式

    1
    2
    # Dark Mode
    darkmode: true

    设置页面的背景图片

    打卡前面创建的styles.styl，添加：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // background

    body {
        background-image:url(../images/2233.jpg);
        height:100%;
        100%;
        background-repeat:repeat-x;
        background-attachment:fixed;
        background-size:cover;
    }

    这里的2233.jpg是图片名称，图片存放在sources/images当中（文件夹没有需要新建）

    对页面的透明度进行设置

    注：opacity调整的是整个元素的透明度，设置opacity会将字也变得透明
    background调整的则是元素的背景，可以通过rgba中的a来设置透明度

    在styles.styl中加入：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    // page-opacity

    .content-wrap {
        background: rgba(255,255,255,0);
    }

    .content {
        background: rgba(255,255,255,0);
    }

    .posts-expand {
        background: rgba(255,255,255,0);
    }

    .post-block {
        background: rgba(255,255,255,0.6);
    }

    // ------ post end ------ 

    .sidebar {
        opacity: 0.8;
    }

    .header-inner {
        background: rgba(255,255,255,0.6);
    }

    .popup {
        opacity: 0.8;
    }

    如果有不满意的话，可以自己用浏览器的检查元素来确定元素的class或者id，在这个文件里加入自己样式。

    对默认的暗色模式进行调整

    打开前面创建的styles.styl文件，将CSS样式添加在：

    1
    2
    3
    @media (prefers-color-scheme: dark) {
        // 需要添加的样式
    }

    这里添加的样式如果和前面添加的样式重复，则会在暗色模式中覆盖，无需担心。

    以下是我的配置方案：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    // background

    body {
        background-image:url(../images/2233.jpg);
        height:100%;
        100%;
        background-repeat:repeat-x;
        background-attachment:fixed;
        background-size:cover;
    }

    // page-opacity

    .content-wrap {
        background: rgba(255,255,255,0);
    }

    .content {
        background: rgba(255,255,255,0);
    }

    .posts-expand {
        background: rgba(255,255,255,0);
    }

    .post-block {
        background: rgba(255,255,255,0.8);
    }

    // ------ post end ------ 

    .sidebar {
        opacity: 0.8;
    }

    .header-inner {
        background: rgba(255,255,255,0.8);
    }

    .popup {
        opacity: 0.8;
    }

    .site-brand-container {
        background: #E8704E;
    }

    .github-corner svg {
        fill: #E8704E;
    }

    .headband {
        background: #E8704E;
    }

    @media (prefers-color-scheme: dark) {
        $text-color = #cccccc;
        $link-color = #cccccc;

        body {
            background-image:url(../images/pixiv-1.jpg);
            height:100%;
            100%;
            background-repeat:repeat-x;
            background-attachment:fixed;
            background-size:cover;
        }
        
        blockquote {
            color: #cccccc;
        }


        .header-inner {
            background: rgba(0,0,0,0.8);
        }

        // page-opacity
        .content-wrap {
            background: rgba(255,255,255,0);
        }

        .content {
            background: rgba(255,255,255,0);
        }

        .posts-expand {
            background: rgba(255,255,255,0);
        }

        .post-block {
            background: rgba(0,0,0,0.8);
        }

        .sidebar {
            opacity: 0.9;
        }

        img {
            opacity: 1;
        }

    }

    为Menu添加tag栏和categories栏

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    # Usage: `Key: /link/ || icon`
    # Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
    # Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
    # When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
    # External url should start with http:// or https://
    menu:
      home: / || home
      #about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat

    并且需要新建文件，命令：

    1
    hexo new page tags
    1
    hexo new page categories

    接下来分别打开这两个文件，分别在最上面两个分割线处添加：

    1
    type: "tags"

    1
    type: "categories"

    为侧边栏添加自定义的栏目

    和前面新建tags和categories的方法差不多，假设你想添加的栏目为done，运行如下命令：

    1
    hexo new page done

    然后到_config.yml中添加为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    # Usage: `Key: /link/ || icon`
    # Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
    # Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
    # When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
    # External url should start with http:// or https://
    menu:
      home: / || home
      #about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
      done: /done/ || calendar

    其中/done/是站内网址的索引，calendar是选择的图标，done是栏目命名

    为了显示出正确的中文，我们需要去翻译文件中添加done的中文

    打开themes/next/languages/zh-CN.yml，找到menu添加done：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      schedule: 日程表
      sitemap: 站点地图
      commonweal: 公益 404
      done: 记录

    开启侧边栏的数字提示

    1
    2
    3
    4
    # Enable / Disable menu icons / item badges.
    menu_settings:
      icons: true
      badges: true

    侧边栏放置位置

    我这里设置的右边

    1
    2
    3
    4
    sidebar:
      # Sidebar Position.
      #position: left
      position: right

    侧边栏头像设置

    1
    2
    3
    4
    5
    6
    7
    8
    # Sidebar Avatar
    avatar:
      # Replace the default image and set the url here.
      url: /images/avatar.JPG
      # If true, the avatar will be dispalyed in circle.
      rounded: true
      # If true, the avatar will be rotated with the cursor.
      rotated: true

    其中avatar.JPG是图片名，图片文件放置在source/images下

    侧边栏添加社交网络账号

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    # Social Links
    # Usage: `Key: permalink || icon`
    # Key is the link label showing to end users.
    # Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
    social:
      GitHub: https://github.com/JeffersonQin || github
      E-Mail: mailto:1247006353@qq.com || envelope
      Weibo: https://weibo.com/5981714994 || weibo
      洛谷: https://www.luogu.com.cn/user/200035 || 
      bilibili: https://space.bilibili.com/114418778 || youtube-play
      网易云音乐: https://music.163.com/#/user/home?nickname=gyro%E6%B0%B8%E4%B8%8D%E6%8A%BD%E9%A3%8E || music
      QQ: tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1247006353 || qq
      #Google: https://plus.google.com/yourname || google
      #Twitter: https://twitter.com/yourname || twitter
      #FB Page: https://www.facebook.com/yourname || facebook
      #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
      #YouTube: https://youtube.com/yourname || youtube
      #Instagram: https://instagram.com/yourname || instagram
      #Skype: skype:yourname?call|chat || skype

    这当中的链接改成自己的链接，最后QQ中的1247006353改为自己的qq号即可。

    添加友链

    首先先加入：

    1
    2
    3
    4
    5
    6
    # Blog rolls
    links_settings:
      icon: coffee
      title: 奶茶铺的邻居(们)
      # Available values: block | inline
      layout: block

    这里的title属性是你想要的标题，icon是标题旁边的图标

    然后再加入友链，e.g.

    1
    2
    3
    links:
      #Title: http://yoursite.com
      枫亚: https://maplewithered.github.io/

    格式：名称: 链接

    目录全展开

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Table of Contents in the Sidebar
    # Front-matter variable (unsupport wrap expand_all).
    toc:
      enable: true
      # Automatically add list number to toc.
      number: true
      # If true, all words will placed on next lines if header width longer then sidebar width.
      wrap: false
      # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
      expand_all: true
      # Maximum heading depth of generated toc.
      max_depth: 6

    首页文章简短显示

    1
    2
    3
    4
    5
    6
    # Automatically excerpt description in homepage as preamble text.
    excerpt_description: true

    # Read more button
    # If true, the read more button will be displayed in excerpt section.
    read_more_btn: true

    在文章中添加：

    1
    <!-- more -->

    来分割，之后的内容将不在首页显示

    增加阅读时间显示

    安装插件：

    1
    npm install hexo-symbols-count-time

    到_config.yml当中修改：

    1
    2
    3
    4
    5
    6
    symbols_count_time:
      separated_meta: true
      item_text_post: true
      item_text_total: true
      awl: 1
      wpm: 120

    底部标签增加图标显示

    1
    2
    # Use icon instead of the symbol # to indicate the tag at the bottom of the post
    tag_icon: true

    打赏功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Reward (Donate)
    # Front-matter variable (unsupport animation).
    reward_settings:
      # If true, reward will be displayed in every article by default.
      enable: true
      animation: false
      comment: 真的不买杯奶茶吗？T^T

    reward:
      wechatpay: /images/wechatpay.JPG
      alipay: /images/alipay.JPG
      #paypal: /images/paypal.png
      #bitcoin: /images/bitcoin.png

    其中两张图片的位置就是wechatpay和alipay的属性，一定要放在source（文件夹里面，这个是source文件夹的相对路径

    相关文章

    安装插件：

    1
    npm install hexo-related-popular-posts --save

    更改设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Related popular posts
    # Dependencies: https://github.com/tea3/hexo-related-popular-posts
    related_posts:
      enable: true
      title: # Custom header, leave empty to use the default one
      display_in_home: false
      params:
        maxCount: 5
        #PPMixingRate: 0.0
        #isDate: false
        #isImage: false
        #isExcerpt: false

    代码块风格设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    codeblock:
      # Code Highlight theme
      # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
      # See: https://github.com/chriskempson/tomorrow-theme
      highlight_theme: night eighties
      # Add copy button on codeblock
      copy_button:
        enable: true
        # Show text copy result.
        show_result: true
        # Available values: default | flat | mac
        style: mac

    返回顶部按钮

    1
    2
    3
    4
    5
    6
    back2top:
      enable: true
      # Back to top in sidebar.
      sidebar: true
      # Scroll percent label in b2t button.
      scrollpercent: true

    阅读进度条

    1
    2
    3
    4
    5
    6
    7
    # Reading progress bar
    reading_progress:
      enable: true
      # Available values: top | bottom
      position: top
      color: "#E8704E"
      height: 3px

    书签

    1
    2
    3
    4
    5
    6
    7
    8
    # Bookmark Support
    bookmark:
      enable: true
      # Customize the color of the bookmark.
      color: "#E8704E"
      # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
      # If manual, only save it by clicking the bookmark-icon.
      save: manual

    右上角Github图标

    1
    2
    3
    4
    5
    # `Follow me on GitHub` banner in the top-right corner.
    github_banner:
      enable: true
      permalink: https://github.com/JeffersonQin
      title: Follow me on GitHub

    Mathjax数学公式

    安装：

    1
    2
    $ npm un hexo-renderer-marked
    $ npm i hexo-renderer-kramed # or hexo-renderer-pandoc

    设置：

    1
    2
    3
    4
    math:
      ...
      mathjax:
        enable: true

    增加评论功能

    注册LeanCloud账号

    https://leancloud.cn/

    注册完以后需要创建一个应用（页面上方），名字可以随便起，然后 进入应用->设置->应用key

    获取你的appid 和 appkey

    配置

    拿到你的appid和appkey之后，打开主题配置文件 搜索 valine，填入appid 和 appkey

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    valine:
      enable: true
      appid: your appid # Your leancloud application appid
      appkey: your app key # Your leancloud application appkey
      notify: false # Mail notifier
      verify: false # Verification code
      placeholder: ヾﾉ≧∀≦)o 来呀！快活呀！~ # Comment box placeholder
      avatar: mm # Gravatar style
      guest_info: nick,mail,link # Custom comment header
      pageSize: 10 # Pagination size
      language: zh-cn # Language, available values: en, zh-cn
      visitor: true # Article reading statistic
      comment_count: true # If false, comment count will only be displayed in post page, not in home page
      recordIP: true # Whether to record the commenter IP
      serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
      #post_meta_order: 0

    增加评价功能

    注册widgetpack账号

    注册widgetpack账号： https://widgetpack.com

    获取ID，很明显可以看见，一般在页面左上角

    更改widgetpack设置

    rating -> settings 改为根据IP地址投票

    配置

    1
    2
    3
    4
    5
    6
    # Star rating support to each article.
    # To get your ID visit https://widgetpack.com
    rating:
      enable: true
      id: your app id
      color: fc6423

    支持PDF

    Go to dir

    1
    2
    3
    $ cd themes/next
    $ ls
    _config.yml  crowdin.yml  docs  gulpfile.js  languages  layout  LICENSE.md  package.json  README.md  scripts  source

    Install

    1
    $ git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf

    Configure

    1
    2
    3
    4
    5
    6
    7
    8
    # PDF tag
    # NexT will try to load pdf files natively, if failed, pdf.js will be used.
    # So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
    # See: https://github.com/theme-next/theme-next-pdf
    pdf:
      enable: true
      # Default height
      height: 500px

    Usage

    1
    {% pdf /path/to/your/file.pdf %}

    Update

    1
    2
    $ cd themes/next/source/lib/pdf
    $ git pull

    搜索功能

    1
    $ npm install hexo-generator-searchdb
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Local Search
    # Dependencies: https://github.com/theme-next/hexo-generator-searchdb
    local_search:
      enable: true
      # If auto, trigger search by changing input.
      # If manual, trigger search by pressing enter key or search button.
      trigger: auto
      # Show top n results per article, show all results by setting to -1
      top_n_per_article: 1
      # Unescape html strings to the readable one.
      unescape: false
      # Preload the search data when the page loads.
      preload: false

    增加jQuery的支持

    在next的config当中

    1
    2
    3
    vendors:
      ...
      jquery: https://code.jquery.com/jquery-2.1.3.min.js

    给页面右下角适配一个按钮来消除透明度

    因为老师要看我笔记，背景如果是2233怕不是要被锤爆，故写了一个小按钮。

    在theme/next/layout/_macro/post.swig当中，在最后的</article>之前，添加如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    {% if not is_index %}
        <div id="comple-dark-button-wrap" style="z-index: 100000; position: fixed; right: 20px; bottom: 20px;">
            <style>
                .control-mask-button {
                    display: block;
                     42px;
                    height: 42px;
                    line-height: 42px;
                    color: #ff8572;
                    background: #ffd9d3;
                    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
                     2.5em;
                    height: 2.5em;
                    line-height: 2.5em;
                    border-radius: 50%;
                    -webkit-transform: translateZ(0);
                    transform: translateZ(0);
                    overflow: hidden;
                    position: relative;
                    cursor: pointer;
                    display: inline-block;
                    -webkit-user-select: none;
                    -moz-user-select: none;
                    -ms-user-select: none;
                    user-select: none;
                    -webkit-tap-highlight-color: transparent;
                }
                .control-mask-button:hover {
                    color: #FFBDFF;
                    transition-duration: 0.5s;
                }
            </style>
            <a href="javascript:;" id="jeffMaskControl" class="control-mask-button"></a>
            <script>
                var click_time = 0;
                
                document.querySelector('a[id="jeffMaskControl"]').addEventListener('click', function(){
                    click_time += 1;
                    var content_wrap = document.getElementsByClassName('content-wrap')[0];
                    if (click_time % 2 == 1) {
                        content_wrap.style.cssText += 'background: rgba(175,210,237,1);';
                    } else {
                        content_wrap.style.cssText += 'background: rgba(175,210,237,0);';
                    }
                })
            </script>
        </div>
    {% endif %}

    加密文章

    1
    npm install --save hexo-blog-encrypt

    在hexo的config中

    1
    2
    3
    4
    encrypt:
      enable: true
      abstract: 这是一篇加密文章，内容可能是个人情感宣泄或者收费技术。如果你确实想看，请与我联系。
      message: 输入密码，查看文章。

    给需要加密的文章添加password属性即可

    看板娘 live2d

    1
    npm install --save hexo-helper-live2d

    模型可以用自己喜欢的样式，具体可以参照：https://blog.csdn.net/wang_123_zy/article/details/87181892

    我使用的是hibiki，安装：

    1
    npm install live2d-widget-model-hibiki

    在hexo的config中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: live2d-widget-model-hibiki
      display:
        position: left
         150
        height: 325
      mobile:
        show: true

    不同的模型只要更改hibiki部分即可。

    Note图标

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    # Note tag (bs-callout)
    note:
      # Note tag style values:
      #  - simple    bs-callout old alert style. Default.
      #  - modern    bs-callout new (v2-v3) alert style.
      #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
      #  - disabled  disable all CSS styles import of note tag.
      style: simple
      icons: true
      # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
      # Offset also applied to label tag variables. This option can work with disabled note tag.
      light_bg_offset: 0
  • 相关阅读:
    10个对Web开发者最有用的Python包
    9款最好的JavaScript压缩工具
    推荐15款制作 SVG 动画的 JavaScript 库
    2016年最好的15个Web设计和开发工具
    整理六百篇web前端知识混总
    9款免费的跨浏览器测试工具
    9个有用的和免费的工具来支持动态网页开发
    8个基本的引导工具的网页设计师
    11款CSS3动画工具的开发
    2016年某前端群题目答案参考
  • 原文地址：https://www.cnblogs.com/jeffersonqin/p/13671222.html
Copyright © 2020-2023  润新知