美文网首页Hexo
hexo/next主题自定义集合

hexo/next主题自定义集合

作者: 项勇 | 来源:发表于2019-07-30 21:21 被阅读5次

    访问原文

    next10.png

    怎么发文章

    git里输入hexo n “文章标题”,回车
    source/_posts中就会出现一个名为文章标题.md的文件;
    编辑md文件,md全名为MarkDown,是种轻量级的页面格式文件!像我现在正在用印象笔记里的MarkDown编辑

    next1.png

    编辑好了文章,先再本地预览

    hexo g
    hexo s
    

    浏览器打开输入http://localhost:4000,如果不行,就重复几次gs命令
    确认文章之后

    hexo d
    

    怎么修改网站图标Favicon

    准备好图标


    next2.png

    命名为favicon.ico,放到github的images里,修改你主题下的_config.yml文件

    # favicon
    favicon: /img/favicon.png
    

    成果:


    next3.png

    怎么防止每次hexo clean后CNAME文件被删除

    先把github中的CNAME文件复制一份到本地public
    再安装插件

    npm install hexo-generator-cname --save
    

    根目录_config.yml中添加

    Plugins:
    - hexo-generator-cname
    

    并修改

    url: looseyouth.com
    

    这样CNAME文件就不会被删除了!

    怎么让文章带图片

    首先下载插件

    npm install hexo-asset-image --save
    

    _config.yml配置文件中,修改

    post_asset_folder: true
    

    然后每次hexo n “文章标题”时,_posts文件夹里都会新建一个文章标题的文件夹,把你的图片素材同意放这里,然后md格式的文章正文里引用[图片上传失败...(image-998c49-1564492878984)]就能添加图片素材了!

    怎么SEO优化

    安装sitemap站点地图自动生成插件

    npm install hexo-generator-sitemap --save
    npm install hexo-generator-baidu-sitemap --save
    

    修改站点配置文件
    sitemap文件添加到站点配置文件_config.yml中,并修改url字段的值,其值默认为http://yoursite.com

    sitemap: 
      path: sitemap.xml
    baidusitemap:
      path: baidusitemap.xml
    url: looseyouth.com
    

    执行hexo g就能在站点public\目录中生成sitemap.xmlbaidusitemap.xml了;其中第一个是一会要提交给google的,后面那个看名字当然就是提交给Baidu的了;

    然后添加蜘蛛协议
    在站点source文件夹下新建robots.txt文件,文件内容如下:

    User-agent: *
    Allow: /
    Allow: /archives/
    Allow: /categories/
    Allow: /tags/ 
    Allow: /resources/ 
    Disallow: /vendors/
    Disallow: /js/
    Disallow: /css/
    Disallow: /fonts/
    Disallow: /vendors/
    Disallow: /fancybox/
    
    Sitemap: https://looseyouth.com/sitemap.xml
    Sitemap: https://looseyouth.com/baidusitemap.xml
    

    主题清单配置:

    baidu_push: true
    

    提交

    怎么让首页文章折叠

    修改主题下的_config.yml

    auto_excerpt:
          enable: false
          length: 150
    

    enablefalse改成truelength可以设定文章预览的文本长度。
    或者
    在文章中添加``

    怎么设置为中文站

    站点根目录_config.yml
    设置language: zh-CN

    怎么添加文章点击图片放大功能

    切到next/source/lib
    下载插件

    git clone https://github.com/theme-next/theme-next-fancybox3 fancybox
    

    更改next/_config.yml
    fancybox: true

    next4.png

    怎么增加评论模块和阅读统计

    阅读统计教程
    评论教程
    修改主题下的_config.yml

    valine:
      enable: true
      .
      .
      .
    leancloud_visitors:
      enable: true
    
    next7.png next8.png

    怎么增加打赏模块

    主题下的_config.yml

    # Reward (Donate)
    reward_settings:
      # If true, reward would be displayed in every article by default.
      # You can show or hide reward in a specific article throuth `reward: true | false` in Front-matter.
      enable: true
      animation: false
      comment: 感谢您的访问,您的支持将鼓励我继续创作!
    
    reward:
      wechatpay: /images/wechat.jpg
      alipay: /images/alipay.jpg
      #bitcoin: /images/bitcoin.png
    
    next5.png next6.png

    怎么增加分类/关于/标签模块

    教程
    以增加分类为例,其他同理

    $ hexo new page categories
    

    添加成功后显示INFO Created: ~/Documents/blog/source/categories/index.md
    根据上面的路径,找到index.md这个文件,打开后默认内容是这样的:

    ---
    title: 文章分类
    date: 2017-05-27 13:47:40
    ---
    

    添加type: "categories"到内容中,添加后是这样的:

    ---
    title: 文章分类
    date: 2017-05-27 13:47:40
    type: "categories"
    ---
    

    保存并关闭文件。
    然后在文章中添加分类属性

    ---
    title: 网站自定义篇
    date: 2019-07-24 20:57:59
    categories: 网站
    ---
    
    next9.png

    怎么增加头像

    主题下的_config.yml

    avatar:
      # In theme directory (source/images): /images/avatar.gif
      # In site directory (source/uploads): /uploads/avatar.gif
      # You can also use other linking images.
      url: /images/apple-touch-icon-next.png  //头像图标
      # If true, the avatar would be dispalyed in circle.
      rounded: true //是否为圆角
      # If true, the avatar would be rotated with the cursor.
      rotated: false //是否旋转
    

    怎么增加个人其他网站

    主题下的_config.yml

    social:
      GitHub: https://github.com/looseyouth || github
      #E-Mail: mailto:2507262@qq.com || envelope
      #Weibo: https://weibo.com/yourname || weibo
      #Google: https://plus.google.com/yourname || google
      #Twitter: https://twitter.com/yourname || twitter
      #FB Page: https://www.facebook.com/yourname || facebook
      #VK Group: https://vk.com/yourname || vk
      #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
      #YouTube: https://youtube.com/yourname || youtube
      Instagram: https://instagram.com/evenxiangyong || instagram
      #Skype: skype:yourname?call|chat || skype
    

    我这里只放开了GitHub和Instagram

    怎么增加RSS订阅功能

    教程
    安装hexo-generator-feed

    在hexo根目录下执行下列命令
    npm install hexo-generator-feed --save

    然后在根目录_config.yml中配置如下:

    feed:
      type: atom
      path: atom.xml
      limit: 20
      hub:
      content:
      content_limit: 140
      content_limit_delim: ' '
      order_by: -date
      icon: icon.png
    

    在主题对应的_config.yml中的social下加入
    social: rss fa: /atom.xml
    然后hexo g重新渲染,hexo s重启项目,就可以在首页看到RSS按钮了。

    相关文章

      网友评论

        本文标题:hexo/next主题自定义集合

        本文链接:https://www.haomeiwen.com/subject/livorctx.html