index.html

---
layout: home 
title: Fully customizable browser extension for one-click translation/dictionary.
description: Get built-in google-translation, bing-translate, baidu-fanyi support, and more via plugins. Supports en,zh-CN,zh-TW,ja,af,sq,ar,az,eu,bn,be,bg,ca,hr,cs,da,nl,eo,et,tl,fi,fr,gl,ka,de,el,gu,ht,iw,hi,hu,is,id,ga,it,kn,ko,la,lv,lt,mk,ms,mt,no,fa,pl,pt,ro,ru,sr,sk,sl,es,sw,sv,ta,te,th,tr,uk,ur,vi,cy,yi.
---

<main class="bd-masthead" id="content" role="main">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-8 mx-auto col-md-8 order-md-2">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="{{ site.baseurl }}/assets/img/home_slide_1.png" class="d-block w-100" alt="Popup on right side">
            </div>
            <div class="carousel-item">
              <img src="{{ site.baseurl }}/assets/img/home_slide_2.png" class="d-block w-100"
                alt="Alt+Double-click to trigger overlay">
            </div>
            <div class="carousel-item">
              <img src="{{ site.baseurl }}/assets/img/home_slide_3.png" class="d-block w-100"
                alt="Customize plugin you need">
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 order-md-1 text-center text-md-left pr-md-5">
        <h1 class="mb-3 bd-text-purple-bright">DictHub</h1>
        <p class="lead">
          DictHub is an open-source browser extension supporting translation & dictionary of 100+ languages.
        </p>
        <p class="lead">
          Translation results are backed by various sources, and fully customizable with your preference by light-weight plugin system.
        </p>
        <div class="row mx-n2">
          <div class="col-md px-2">
            <a href="{{ site.baseurl }}/docs/getting-started/introduction/"
              class="btn btn-lg btn-bd-primary w-100 mb-3">Get started</a>
          </div>
        </div>
        <p class="text-muted mb-0">
          Currently v{{ site.current_version }}
        </p>
      </div>
    </div>
  </div>
</main>


<div class="masthead-followup row m-0 border border-white">
  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
    {% include icons/lightning.svg width="32" height="32" class="text-primary mb-2 mr-2 float-left" %}
    <h3>Convinient</h3>
    <p>Popup (show translation right of browser): <br>
      # Click {% include icons/dicthub.svg width="1em" height="1em" class="text-primary" %} / <kbd>alt</kbd> + <kbd>w</kbd>
    </p>
    <p>
      Overlay (show translation close to text selection)<br>
      # <kbd>alt</kbd> + <code>Double-Click</code> / <code>Right-Click</code> + {% include icons/dicthub.svg width="1em" height="1em" class="text-primary" %}
    </p>
  </div>
  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
    {% include icons/info.svg width="32" height="32" class="text-primary mb-2 mr-2 float-left" %}
    <h3>Detailed</h3>
    <p>Compare translation result from different sources to improve accuracy.</p>
    <p>Detailed explaination from dictionary sources is available for learning deeper.</p>
  </div>
  <div class="col-12 col-md-4 p-3 p-md-5 bg-light border border-white">
    <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
    {% include icons/options.svg width="32" height="32" class="text-primary mb-2 mr-2 float-left" %}
    <h3>Multilingual</h3>
    <p>Translation to both mother tongue as well as other languages.</p>
    <p>Learn words better from different translations.</p>
  </div>
</div>