I'm trying to use the Translation API to translate some knowledge base articles, and am wrapping some code blocks in tags to ensure they stay as they are. However, in the translation result some of the notranslate tags have disappeared.
Is this a bug, or am I doing something wrong?
For example:
Input:
<ul>
<li>
<p><span class='notranslate'><code>Nuke11.0.exe -V script.nk</code></span></p>
</li>
<li>
<span class='notranslate'><pre>import nuke\nb = nuke.toNode(\'Blur1\')\nnuke.tprint(\'Hello world\')\n</pre></span>
</li>
</ul>
Translated text:
<ul>
<li>
<p><span class="notranslate"><code>Nuke11.0.exe -V script.nk</code></span></p>
</li>
<li>
<pre> import nuke \ nb = nuke.toNode（\'Blur1 \'）\ nnuke.tprint（\'Hello world \'）\ n </pre>
</li>
</ul>
Python repro:
from google.cloud import translate
translator = translate.Client()
translation = translator.translate(['<ul>\
<li>\
<p><span class="notranslate"><code>Nuke11.0.exe -V script.nk</code></span></p>\
</li>\
<li>\
<span class="notranslate"><pre>import nuke\nb = nuke.toNode(\'Blur1\')\nnuke.tprint(\'Hello world\')\n</pre></span>\
</li>\
</ul>'], target_language='de', source_language='en')
print translation
Tried out a suggestion from a colleague, it seems that using this instead works:
<pre class='notranslate'>import nuke\nb = nuke.toNode(\'Blur1\')\nnuke.tprint(\'Hello world\')\n</pre>
Related
I would like to dynamically generate a class name for my element. For example,
<span class=``icon icon-${route.title}``></span> (had to use double backticks here, but it should really be just one set of backticks.)
<ul class="sidebar-list">
<li *ngFor="let route of menuRoutes.items">
<span class=`icon icon-${route.title}`></span>
<a routerLink="/{{route.path}}" routerLinkActive="active">{{ 'menu.' + route.title | translate}}</a>
</li>
</ul>
Try this:
<span class="icon icon-{{route.title}}"></span>
You can also archive this by using a [ngClass] directive
<span [ngClass]="['icon', route.title]"></span>
Is there a way to have multiple router-links inside a li and that li gets the active class in vue2?
I was thinking in something like this: https://jsfiddle.net/tejitak/o44z47ag/5/
<div id="app">
<ul>
<li>
<ul v-link-active>
<li>
<a v-link="{ path: '/foo' }">Go to Foo</a>
</li>
<li>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</li>
</ul>
</li>
<li>
<a v-link="{ path: '/baz' }">Go to Baz</a>
</li>
</ul>
<router-view></router-view>
</div>
It's supposed to be used in a menu which as submenus.
The migration docs only references a single link so I don't know if this is possible: https://v2.vuejs.org/v2/guide/migration-vue-router.html#v-link-active-replaced
You can use router-link like this to do that:
<ul>
<router-link tag="li" to="/foo">
<span>
<strong>
<a>/foo</a>
</strong>
</span>
</router-link>
</ul>
Here's the documentation for vue-router: http://router.vuejs.org/en/
Here's the documentation for router-link: http://router.vuejs.org/en/api/router-link.html
Here's a demo for nested router-links: https://jsfiddle.net/wx17jh2y/
<ul>
<router-link tag="li" to="/foo">
<span><a>Foo</a></span>
<ul>
<router-link tag="li" to="/bar">
<span><a>bar</a></span>
</router-link>
</ul>
</router-link>
</ul>
If you want to group multiple links underneath one element that should be considered active (e.g. using Bootstrap dropdowns), you can just make the parent element a router-link as well and prevent any interaction by setting the event attribute to an empty list. Example:
<router-link tag="li" to="/function" :event="[]">
<ul>
<router-link tag="li" to="/function/a"><a>Function A</a></router-link>
<router-link tag="li" to="/function/b"><a>Function B</a></router-link>
</ul>
</router-link>
See also the documentation on the event property on router-link.
I would not use router-link and instead bind to the href attribute on the anchor tags. If the links in the menu are static, then you may not even need to bind to the href attribute - just specify href="/foo" (at least that's how it worked in angular1). If the href needs to be generated, like if you're looping through menu items, then create the hrefs in a vue instance function and call it like :href="createHref(menuItem)" for example.
To assign the active class, I would assign the class if the href matches the current route (see https://v2.vuejs.org/v2/guide/class-and-style.html). The current route is in this.$route. Just make sure route is passed into the root app instance: https://router.vuejs.org/en/api/component-injections.html
So the Yoast SEO plugin provides some handy stuff within Wordpress, one of these is the Breadcrumb functionality, however the markup output is within span tags (I added # for URLs - don't worry about that)...
<span xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" href="#">Home</a>
</span>
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" href="#">Our Services</a>
</span>
<span typeof="v:Breadcrumb">
<a property="v:title" rel="v:url" href="#">GP Services</a>
</span>
<span typeof="v:Breadcrumb">
<span property="v:title" class="breadcrumb_last">GP Appointments</span>
</span>
</span>
I'd like to output the breadrcumbs as a list instead of these spans - so ultimately I think I need to add some sort of filter to my functions.php file - so when I update the Yoast SEO plugin down the line it doesn't overwrite my edits.
Within "/plugins/wordpress-seo/frontend/class-breadcrumbs.php" there is some code at the start where you can set the wrapper of the element.
Currently (minus comments and unrelated bits of code):
if ( ! class_exists( 'WPSEO_Breadcrumbs' ) ) {
class WPSEO_Breadcrumbs {
private $element = 'span';
So this is the part I need to overwrite with something in my theme's functions.php file.
I'm struggling with the markup for how to do this however.
There also seems to be a filter in this plugin file too:
private function filter_wrapper() {
$wrapper = apply_filters( 'wpseo_breadcrumb_output_wrapper', $this->wrapper );
$wrapper = tag_escape( $wrapper );
if ( is_string( $wrapper ) && '' !== $wrapper ) {
$this->wrapper = $wrapper;
}
}
Any help would be greatly appreciated.
I believe I found a solution -- my execution:
functions.php
function get_breadcrumb() {
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<ol class="article__bread-crumb"><li>','</li></ol>');
}
}
Then I call get_breadcrumb() wherever I need it in the theme.
Then in yoast settings, set the "separator between breadcrumbs" option to:
</li><li>
resulting code should end up like this:
<ol class="article__bread-crumb">
<li>
<span xmlns:v="http://rdf.data-vocabulary.org/#">
<span typeof="v:Breadcrumb">
Home
</span>
</span>
</li>
<li>
<span rel="v:child" typeof="v:Breadcrumb">
All
</span>
</li>
<li>
<span rel="v:child" typeof="v:Breadcrumb">
News
</span>
</li>
<li>
<span class="breadcrumb_last">Related Test</span>
</li>
</ol>
I didn't find a simple way to do this, so I ended up just altering my CSS styles to account for the fact that instead of an unordered list, the elements were nested spans and links - not the end of the world, and a solution of sorts, but not really the solution I had in mind, sadly.
I'm sure there's a way to do this - but without help, I'm struggling.
I am using ng-repeat to show list items with some text. And I want every single item to be indented 10-20px to the right from the previous one. I don't have much experience with css.
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}">
{{todo.toDoText}}
</li>
Here is a jsFiddle with my code.
Thanks in advance!
you may use ng-style to solve your problem:
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}"
ng-style="{'margin-left': 10*$index+'px'}">
{{todo.toDoText}}
</li>
$index is a varibale that will be set by ng-repeat. You may use this to calculate your style.
Change your template with following::
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="todo in todos"
ng-class="{'selectedToDo': (todo.id == selectedToDo)}" style="text-indent: {{$index * 10}}px">
{{todo.toDoText}}
</li>
</ul>
</div>
Let's say I created a menu titled "Main Menu" from the admin panel and I need to customize the default markup, e.g. let's say I want to modify/replace the <ul>, <li> as well as the surrounding <article> and <nav> tags.
I assume that I have to come up with something like this in my Parts.MenuWidget.cshtml alternate template.
<ul class="a b c">
for each item in menuItems:
display("<li>" + item + "</li>")
end
</ul>
How do I do that in Orchard?
That's quite simple.
You could first create an alternate for you MenuWidget like so:
Parts.MenuWidget-MyZoneName.cshtml
<nav>
<div class="logo">
#Html.Partial("_Logo")
</div>
<ul>
#*Display all the stuff added in the admin*#
#DisplayChildren(Model.Menu)
#*Add additional stuff. Of course you could also add it as MenuItem to the Menu-Model*#
#if ( Request.IsAuthenticated )
{
if ( Authorizer.Authorize(StandardPermissions.AccessAdminPanel) )
{
<li>
<a href="/Admin">
Admin
</a>
</li>
}
<li>
<a href="~/Example1">
Extra1
</a>
</li>
}
else
{
<li>
<a href="~/Example2">
Extra2
</a>
</li>
}
</ul>
</nav>
And then go on and do something similar for your MenuItems. For example:
MenuItemLink.cshtml
#Model.Text
Another thing that's worth mentioning is that you can either only provide an alternate for a specific shape like the MenuItemLink above or just provide an alternate for the base MenuItem shape which will then be used for every MenuItem type that exists.
(Maybe those are not the best examples, but I guess they'll do the job ;) )
Update:
In order to remove/modify the tags you can create an alternate for MenuItem.cshtml and look at this part:
if (HasText(renderedMenuItemLink))
{
var tag = Tag(Model, "li");
#tag.StartElement
#renderedMenuItemLink
if (items.Any())
{
<ul>
#DisplayChildren(Model)
</ul>
}
#tag.EndElement
}